本文介绍了CSS在网页设计中的角色，强调了其与HTML和JavaScript的关系。内容包括CSS基本语法，详细讲解了基础选择器如标签选择器、类选择器、ID选择器和通配符选择器，以及复合选择器的应用，如交集选择器、后代选择器、子代选择器和并集选择器。此外，还涵盖了CSS字体和文本属性以及创建CSS样式表的三种方式。
HTML是用来编写网页的骨架
CSS是用来美化网页
javaScript语言是用来为网页添加交互的效果
web的 衰落：
在web早期（1990-1993）,html是一个很局限的语言。几乎完全由用于描述段落，超链接，列表和标题的结构化元素组成。随着万维网的出现（用户交互体验的加强），对html的要求越来越大，人们迫切需要html增加新的元素，去完成一个特定的功能。
一片混乱：
迫于压力，html开始出现<font>，<i> ,<s> 等标签。但是html是一种描述结构的语言，也开始描述外在表现了。几年之后这种随便的做法暴露出严重的问题：1：由于html既写结构又写样式，导致页面缺乏结构性，降低了网页的可访问性。2：页面维护越来越困难
当html中存斥着的表现标记问题，W3c并没有忽视。在1995年，w3c开始发布一种正在进行的计划（work-in-prrgress） 称之为css。
与html相比，Css支持更丰富的文档外观，Css可以为任何元素的文本和背景设置颜色；允许在任何元素外围设置边框；允许改变文本的大小，装饰（如下划线），间隔，甚至可以确定是否显示文本。
什么是CSS？
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表)
Css是用来美化html标签的，给页面添加好看的样式也就是外观
CSS和HTML和JavaScript的关系
HTML 结构层负责从语义的角度搭建页面结构CSS 样式层 负责从 审美的角度美化页JavaScript 行为层负责从交互的角度提升用户体验
CSS的基本语法
选择器{属性:值;属性:值;…….}
属性 | 解释 |
Width:20px; | 宽 |
Height:20px; | 高 |
Background-color:red; | 背景颜色 |
font-size:24px; | 文字大小 |
text-align:left | center| right | 内容的水平对齐方式 |
text-indent:2em; | 首行缩进 |
Color:red; | 文字颜色 |
注意：属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用英文输入法下的分号;隔开。
选择器
选择器：实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。
基础选择器
1. 标签选择器
2. 类选择器(重点)
3. ID选择器
4. 通配符选择器
标签选择器
标签{属性：值;}
作用：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。
通过标签选择器： 改变div标签内字体的颜色和大小 * */ div{ font-size:50px; color: deeppink; background-color: yellow; width:200; height:100; } |
颜色的显示方式：
1. 直接写颜色的名称
2. 十六进制显示颜色
3. rgb(120,120,120);
4. agba(120,120,120,x)了解
a) x颜色的透明度 0-1
类选择器(重点)
写法 .类名{
属性：值;
属性：值;
}
类名：自定义的
类选择器命名规范：
1. 不能用纯数字或者数字开头来定义类名
2. 不能使用特殊符号或者开头或者(_)定义类名
3. 不建议使用汉字来定义类名
4. 不推荐使用属性或者属性值来定义类名
a) header logo main hot
b)
ID选择器
语法：
#自定义名称 {
属性：值;
属性：值;
}
注意事项：在一个 HTML文档中，ID 选择器会使用一次，而且仅一次。
一个标签可以同时调用类选择和ID选择器
通配符选择器(了解)
*{属性：值}
特点：给所有的标签都使用相同的样式。
不推荐使用，增加浏览器和服务器压力。
复合选择器
概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。
交集选择器
语法： 标签+类（ID）选择器名称{
属性:值;
属性:值;
}
特点：即要满足选择了标签还要满足选择类(ID)选择器。
后代选择器(重点)
语法：选择器+空格+选择器+选择器{
属性:值;
属性:值;
}
后代：意思就是标签必须有父子关系，也就是嵌套关系。
后代的子元素：无限制各代的。
子代选择器
语法 选择器>选择器{
属性:值;
属性:值;
}
选中下一代元素
并集选择器
语法： 选择器+选择器+选择器….{
属性:值;
属性:值;
}
选择器练习
根据css样式写出对应的html结构
div.div1ul.boxli,div.div1p{
color: red;
}
<style type="text/css" > /*案例练习*/ div.div1ul.boxli,div.div1p{ color: red; }
</style> </head> <body> <div class="div1" > <ul class="box" > <li>练习题一</li> </ul> </div>
<div class="div1"> <p> 练习题一 </p> </div> </body> |
根据css样式写出对应的html结构
div.boxp.p1,div.boxdiv.div1p,p{
color: red;
}
<head> <meta charset="UTF-8"> <title></title> <style type="text/css" > /*练习题二*/ div.divp.p1,div.boxdiv.div1p,p{ color: red; } </style>
</head> <body> <div class="div" > <p class="p1" > 练习题二 </p> </div>
<div class="box"> <div class="div1" > <p> 练习题二 </p> </div> </div>
<p> 练习题二 </p> </body> |
CSS字体
CSS 字体属性
属性 | 描述 |
简写属性。作用是把所有针对字体的属性设置在一个声明中。 | |
设置字体系列。 | |
设置字体的尺寸。 | |
设置字体风格。 | |
以小型大写字体或者正常字体显示文本。 | |
设置字体的粗细。 |
CSS文本
CSS 文本属性
属性 | 描述 |
设置文本颜色 | |
设置文本方向。 | |
设置行高。 | |
设置字符间距。 | |
对齐元素中的文本。 | |
向文本添加修饰。 | |
缩进元素中文本的首行。 | |
text-shadow | 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。 |
控制元素中的字母。 | |
unicode-bidi | 设置文本方向。 |
设置元素中空白的处理方式。 | |
设置字间距。 |
CSS的创建
如何创建CSS样式表，有三种方式
第一种：外部样式表(主流)
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<link rel="stylesheet"type="text/css"href="css/div.css"/>
第二种：内部样式表(极其少)
<style type="text/css" >
div{
color: red;
}
</style>
第三种：内连样式（绝对不会使用的）
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
css对链接操作
<head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* a:link {color:#FF0000;} 未被访问的链接 a:visited {color:#00FF00;} 已被访问的链接 a:hover {color:#FF00FF;} 鼠标指针移动到链接上 a:active {color:#0000FF;} 正在被点击的链接 */ a:link{ color:#C0C0C0; } a:hover{ color:#FF0000; } a:active{ color:#0000FF; } a:visited{ color:#FFFF00; } </style> </head> <body> <a href="交集选择器.html" >去后代选择器.html 文件</a> </body> |
CSS的背景属性
CSS 背景属性
属性 | 描述 |
简写属性，作用是将背景属性设置在一个声明中。 | |
背景图像是否固定或者随着页面的其余部分滚动。 | |
设置元素的背景颜色。 | |
把图像设置为背景。 | |
设置背景图像的起始位置。 | |
设置背景图像是否及如何重复。 |
CSS的列表属性
属性 | 描述 |
简写属性。用于把所有用于列表的属性设置于一个声明中。 | |
将图象设置为列表项标志。 | |
设置列表中列表项标志的位置。 | |
设置列表项标志的类型。 |
扫一扫
2553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
