03-CSS

目录

1.CSS基础语法

2.CSS的使用

（1）行内式

（2）嵌入式

（3）外链式

3.CSS基本选择器

（1）通用选择器

 （2）元素选择器

（3）ID选择器

（4）类选择器

（5）分组选择器

（6）CSS样式优先级

4.CSS组合选择器

（1）后代选择器（派生选择器）

（2）子元素选择器

（3）相邻兄弟选择器

（4）普通兄弟选择器

---

1.CSS基础语法

        CSS样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。

选择器名{
    属性: 属性值;
    ······
}

注意：

        CSS声明要以分号;结束，声明以{}括起来；
        建议一行书写一个属性；
        若值为若干单词，则要给值加引号，如font-family: "agency fb";

2.CSS的使用

（1）行内式

        行内样式将样式定义在具体html元素的style属性中。以行内式写的CSS耦合度高，只适用于当前元素，在设定某个元素的样式时比较常用。

例：

<p style="color: red; font-size: 50px;">这是一段文本</p>

        在当前元素使用style属性的声明方式：
                style是行内样式属性；
                color是颜色属性；red是颜色属性值；
                font-size是字体大小属性；50px是字体大小属性值。

（2）嵌入式

        嵌入式通过在htm页面内容开辟一段属于css的代码区域，通常做法为在head标签中嵌套style标签，在style中通过选择器的方式调用指定的元素并设置相关CSS。

<style type="text/css">
    p{
        color: blue;
        font-size: 40px;
    }
</style>

（3）外链式

        在实际开发当中，很多时候都使用引入外联样式文件，这种形式可以使html页面更加清晰，而且可以达到更好的重用效果。

style.css：

p{
    color: green;
    font-size: 30px;
}

test.html：

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

        rel：rel属性规定当前文档与被链接文档之间的关系。
        stylesheet：文档的外部样式表。

        很多时候，大量的HTML页面使用了同一个CSS。那么就可以将这些CsSS样式保存在一个单独的.css文件中，然后通过link元素去引入它。

        注意：当有多重样式时，记住前提规则，越精确越优先（就近原则）。

3.CSS基本选择器

        在CSS中，选择器是一种模式，用于选择需要添加样式的元素。

（1）通用选择器

        选择所有：*

*{
    ······
}

 （2）元素选择器

         选择指定标签

元素名称{
    ······
}

（3）ID选择器

        选择设置过指定id属性值的元素：#

#id属性值{
    ······
}

（4）类选择器

        选择设置过指定class属性值的元素：.

.class属性值{
    ······
}

（5）分组选择器

        当几个元素样式属性一样时， 可以共同调用一个声明，元素之间用逗号分隔。

选择器1,选择器2···{
    ······
}

（6）CSS样式优先级

        CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高：
        元素选择器：1
        类选择器：10
        id选择器：100
        内联样式：1000

4.CSS组合选择器

        CSS组合选择器说明了两个选择器直接的关系。CSS组合选择符包括各种简单选择符的组合方式。
        在CSS中包含了四种组合方式:后代选取器(以空格分隔)，子元素选择器(以大于号分隔) , 相邻兄弟选择器(以加号分隔)，普通兄弟选择器(以波浪线分隔)。

（1）后代选择器（派生选择器）

        用于选择指定标签元素下的后辈元素，以空格分隔。

选择器1 选择器2{
    ······
}

（2）子元素选择器

        用于选择指定标签元素的所有第一代子元素，以大于号>分隔。

选择器1 > 选择器2{
    ······
}

（3）相邻兄弟选择器

        选择指定元素的下一个指定元素（只会找一个），两者有相同的父元素，以加号+隔开。

选择器1 + 选择器2{
    ······
}

（4）普通兄弟选择器

        选择指定元素后面的所有指定元素，两者有相同的父元素，以波浪号~隔开。

选择器 ~ 指定元素{
    属性名: 属性值;
    ···
}