CSS

（cascading style sheets）层叠样式表。作用：给网页做样式渲染。

CSS语法

选择符{属性：属性值}

说明：选择的选择符就是html标签，就是html标签的名称

声明

1.声明包括属性和属性值
2.声明必须放在花括号里面{}
3.属性和属性值之间用逗号隔开
4.每一条声明结束用分号结尾
5.如果一个属性有多个属性和属性值，属性值与属性值之间用空格隔开

注意：所有CSS代码必须放在CS样式表中。

CSS样式表

样式表的权重关系：
1.命令产生冲突，按权重最大的执行，不冲突，都要执行（内联权重最大，内部，外部权重和顺序有关，后写的会把前写的覆盖，覆盖的只是相同属性的样式，不同属性会继续执行
2.CSS样式表体现CSS的层叠性：只要产生权重关系，必然会产生CSS层叠性，权重高的会把权重低的覆盖，覆盖的只是相同属性的样式，不同的样式会继续执行
3.划分网页的结构：先上下，后左右

1.内部样式表

创建方法：
放置的位置：尽量放在head标签里面
body:内容区，页面中所以显示内容放在body中
head:描述区，把样式放在head内

2.外部样式表

创建方法：自己创建一个文档，把后缀名改为.css即可
外部样式需要引入，引入方法：

对比link和import区别：
1.本质区别：link是一个标签，由html提供；@import 是一个方法，由CSS提供。
2.加载顺序：link导入的样式和结构同时加载，import先导结构，加载完毕后再加载样式。
3.js操作dom的区别：link完全支持；单@import 加载的CSS样式是不通过JS动态修改
4.兼容性：link兼容比import好

1.<link rel=“stylesheet” href=\”css文件路径“

link rel作用：建立关联性
href为路径
2.

内联样式表（不推荐使用）

语法：<标签 style:\”属性：属性值；”>

CSS选择符

1.id选择符（唯一性）

语法：

1.起名：给标签添加id属性即可<标签 id=“名称”></标签>
2.用名字写样式：#id名称{CSS样式}

特点：

2.id用来划分网页外围结构

起名规范

2.不能使用汉字命名
3.可以连接数字、字母、下划线、连字符
4.名字尽量简短，而且反映板块的用途或板块的信息或是反映板块的结构

起名方法

1.驼峰式命名方法

大驼峰：首字母都大写。例如NewsLeft,NewsRight

小驼峰：第二个单词首字母大写。例如newsLeft,newsRight,newsCenter

连字符命名

news-left,news-right,news-center

下划线命名

news_left,news_right,news_center

2.class选择符

语法

起名字：<标签 class=“名称”></标签>
用class 写样式 .class名称{CSS样式}

特点

一个标签可以拥有多个类名
更适合定义一类样式

3.类型选择符/标签选择符

所有html标签可以直接当作选择符进行应用
特点

1.选择当前页面中的所有同类选择符进行应用
2.统一某个标签样式的时候
3.想改变一个元素默认样式的时候

4.包含选择符（根据父元素查找子元素）

语法：父元素选择符子元素选择符{给子元素写样式}

5.群组选择符

选择符1,选择符2，选择符3{给当前一组添加样式}

6.伪类选择符

a:link{color:red;}/未访问的链接状态/
a:visited{color:green}/已访问的链接状态/
a:hover{color:blue}/鼠标滑过链接的状态/
a:active{color:yellow}/鼠标按下去的状态/

7.通配符*{}（选中所有标签）

有些标签默认产生外边距或内填充默认产生的边距需要清除,因为暂时不能确定哪些标签有间距，我们把所有标签的margin,padding清除

清除外边距 margin:0;
清楚内填充 padding:0;

写CSS样式时，在开头先写上*{marging:0;padding:o;}

缺点：影响性能

选择符的权重

内联样式表（1000）>id（100）>class/伪类选择符（10）>类型/群组选择符（1）>通配符*（0）
开发者样式>读者样式（用户）>浏览器样式（默认样式）
！important权重最高
选择符层叠性总结：只要产生权重关系，必然体现CSS的层叠性。权重高的会覆盖权重低的，权重相同时，后写的会把前写的覆盖掉

XMind – Trial Version

day3:CSS层叠样式表

CSS