CSS布局与样式

CSS的三种样式语法

第一点：CSS的使用
1.内联样式（行内样式）
将样式声明在元素的style属性中
语法：

   <p style="color: red;">

注意：所有的样式都必须在双引号之内并且中间用分号进行分隔
2.内部样式
将样式声明定义在页面的Style属性中
步骤：
1.在head标签里面添加一个style标签
2.在style中书写样式
3.外部样式表
步骤：创建一个新的CSS文件
创建和HTML文件的关联
书写样式

<link href="css/style01.css" type="text/css" rel="stylesheet"/>

第二点：CSS样式表的特征
继承性
1、子级元素可以直接使用父级元素声明好的样式（这里不是所有的样式都可以被继承）

层叠性
一个匀速可以声明多个样式
注意：如果样式不冲突，多个样式规则中的样式可以层叠为一个。

优先级
样式定义产生冲突时按照不同的样式使用“优先级”来应用样式
在们三种引入方式中谁的优先级最高（行内样式表）
低：浏览器缺省值
中：外部样式表或者内部样式表
高：内部样式表
第三点：CSS基础选择器
1、类别选择器
类别选择器根据类名来选择，前面以“.”来标志。
在HTML中，元素可以定义一个class的属性，并且多个元素都可以重复应用这个属性。
2、标签选择器
一个完整的HTML页面是有很多不同的标签组成，如：body，div，p，ul，li，而标签选择器，则是 决定哪些标签采用相应的css样式。
3、ID选择器
ID选择器可以为标有特定ID的HTML元素制定特定的样式。根据元素ID来选择元素，具有唯一性，这意味着同一ID在同一文档页面中只能出现一次。例如，你将一个元素的id取值为“name”，那么在同一页面你就不能再将其他元素id取名为“name”了。
前面以“#”号来标志，在样式里面可以这样定义：
4、通用选择器
用过“*”号来表示。如下代码表示所有元素的内外边距都为0，所有的字体都为微软雅黑。他可以清除不同浏览器的默认样式。
同时通用选择器还可以和后代选择器组合。如下表示所有p元素后代的所有元素都应用这个样式。
注意：但是如果你在p标签里嵌套了一个p标签，就会出现浏览器不能解析的情况，因此要避免这种情况发生。
5、后代选择器
后代选择器也称为包含选择汽车，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层子线后代关系，可以有多个空格加以分开。
如下例子定义了所有class属性为father的元素下面的class属性为child的颜色为红色。
6、子选择器
请注意这个选择器与后代选择器的区别，子选择器只是选择元素的直接后代，即仅仅作用于第一个后代。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
7、伪类选择器
即链接样式。a元素的伪类，存在4中不同的状态：link、visited、active、hover。如
8、群组选择器
具有相同样式的标签分组显示，将具有多个相同属性的元素，合并群组进行选择，定义同样的css属性，这大大的提高了编码效率，同时也减少了css文件的体积。
9、相邻同胞选择器
如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式，就可以使用相邻同胞选择器。两个元素之间用“+”进行连接。

第四点：优先级
优先级：!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器