CSS复习

使用css理由：是为了实现内容与样式的分离。

css特性：

1. 内容与表现分离
2. 网页的表现统一，容易修改
3. 丰富的样式，使得页面布局更加灵活
4. 减少网页的代码量，增加网页的浏览速度，节省网络带宽
5. 运用独立于页面的CSS，有利于网页被搜索引擎收录
6. 由浏览器解释运行
7. 不区分大小写

css基本语法：

选择器 {
    样式声明;
    样式声明;
    ... ...
}

<style type="text/css">
    /* p是html选择器，表示给所有的p标签设置样式 */
    p {
        color:red;
        font-size:24px;
    }
</style>

css基本选择器

标签选择器  标签{}

<style>
    p {
        color:red;
        font-size:24px;
    }
</style>

类选择器 .class类名{} 同一页面可用多次

<style>
    .one {
        color:red;
        font-size:24px;
    }
</style>
<p class="one">这是一个p标签</p>

id选择器  #id名{}  同一页面只能用一次

<style>
    #first {
        color:red;
        font-size:24px;
    }
</style>
<!-- 在一个页面中，id属性的值必须唯一 -->
<p id="first">这是一个p标签</p>

层次选择器

后代选择器 div p {} 

div与p是父子关系 选择所有被div包裹的p元素

子选择器 div>p{}

只选择第一代子元素，离div最近那层的p受影响

群组选择器 html，body{}

用逗号连接，声明风格相同

伪类选择器 

:fistt-of-type

选择一组子元素中的第一个

:last-of-type

选择一组子元素中的最后一个

:nth-of-type(1)

使用索引来选择某一个子元素

css引入方式：

        行内:只对本行有效。

<p style="font-family:华文行楷;color:green;font-size:32px">这是一个行内样式</p>

        内嵌:只对本页面有效。

<style>
    div > p {
        color:red;
        font-size:24px;
    }
</style>

        外部:导入css文件

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

CSS优先级：

基本规则

引用方面：行内样式 > 内嵌样式/外部样式

选择器方面：ID 选择器 > 类选择器（属性选择器、伪类选择器） > 标签选择器

样式叠加的优先级

就近原则：距离最近的样式有效

顺序原则：最后书写的样式有效

精细原则：指向越精细越优先

CSS继承

CSS继承规则：

1. 子标签可以继承父标签的样式风格
2. 子标签的样式不会影响父标签的样式风格
3. 一般只有文字文本具有继承特性，如文字大小、文字加粗、文字颜色、字体等。

CSS颜色

主要有以下两种：

1. 使用英文单词作为颜色值：如：red、green、blue、black、white、yellow ......
2. 使用十六进制的颜色值：如：#000000 #FFFFFF #45F87E
   （其中前两位表示红色，中间两位表示绿色，最后两位表示蓝色。也可以使用简写：#FF0088 -> #F08）