第二章 css语法、样式表、选择符
css语法、样式表、选择符
1.css定义
层叠样式表，用于控制网页样式。
2.css语法：
由选择符和声明组成，声明包括属性和属性值
选择符{属性：属性值；属性：属性值；}
注：
1）每个css样式由两部分组成：选择符和声明，声明分为属性和属性值。
2）属性必须放在花括号中，属性和属性值使用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值时。属性和属性值不分先后顺序，由空格分开。
5）书写样式过程中，空格、换行等操作不影响属性显示。
3.css样式表
1）内部样式表
<style type="text/css">
css语句
</style>
注：使用style标记创建样式时，将标记写在<head><head/>.
2)外部样式表
<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名称“
注：使用link元素导入外部样式表时，需将该元素写在文档头部
3）内联样式表
<标签 style="属性1：值1；属性2：值2；..."></标签>
样式表的权重关系：
内联样式表权重最大
内部和外部样式的权重和书写的前后顺序有关（后面的会把前面的样式覆盖，覆盖的只是相同的属性，不同属性的样式会继续执行）
关键字：
! important 当前声明具有最高权重
css语法
选择符{属性：属性值}
选择符
1）类型选择符（标签选择符）
所有的html标签可直接当做选择符进行应用
div/p/em/i/b/strong...
特点：能选中当前结构中全部同名标签
应用：统一某个标签样式时或清除某个标签默认样式时。
2）id选择符
语法：
#名称{属性：属性值}
<标签 id="名称“></标签>
特点：唯一性。同一个页面中，一个id名只能用一次。
应用：划分网页外围结构
注：起名规范：
尽量小写字母
数字、字母、下划线、连字符的组合
不能使用关键字命名
尽量反应板块内容或结构（语义化）
3）类选择符（class选择符）
语法：
.名称{属性：属性值}
<标签 class="名称1 名称2 名称3 名称4...“></标签>
特点：一个元素可以有多个类名，类名可重复出现
可以制定一类样式
4）群组选择符
语法：以逗号分隔的方式，把多个选择器组成一组，给整组添加样式。
选择符1，选择符2，选择符3，选择符4{属性：属性值；}
注：选择符间不需空格
eg: #box,.con,h3,#wrap{width:300px}
5)包含选择符（子代/后代选择器） （通过父元素找子元素）
语法：
父元素 子元素{属性：属性值；}
注：父元素和子元素间需空格
6）伪类选择器
a:link{color:red;} 未访问的链接状态
a:visited{color:rgreen;} 已访问的链接状态
a:hover{color:blue;} 鼠标滑过链接状态
a:active{color:yellow;} 鼠标按下去时的状态
伪类常用方法：
1）a{color:red;}
a:hover{color:yellow} (鼠标滑过后变为黄色）
2）.box:hover h3{color:red} (鼠标滑过父元素box,子元素h3发生改变）
7)通配符
*{ }
* 选择页面中所有的元素
*{margin:0; padding:0;}
选择符权重
id > class > 标签
数字表示权重
内联样式表：1000
id: 100
class: 10
标签： 1
伪类选择符： 10
通配符： 0
包含选择符的权重为权重之和
eg: #box div{ } 100+1==101
.wrap .con p{ } 10+10+1==21
群组选择符的权重：不会发生变化，保持原来的权重值。所以公共样式放在最上面。
！important 权重最高！
总结：
css的层叠性 权重
产生权重关系，必会体现css的层叠性
0：！important 最重要的样式
1：内联样式表 > 内部/外部
2：选择符的权重
id > class/伪类 > 标签
3：开发者样式权重 > 读者（用户）样式 > 浏览器样式
4：当权重相同时，后写的会覆盖先写的样式。
浙公网安备 33010602011771号