CSS3

一、CSS简介

CSS是层叠样式表 ( Cascading Style Sheets ) 的简称。有时我们也会称之为CSS样式表或级联样式表。

CSS是也是一种标记语言，主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS让我们的网页更加丰富多彩，布局更加灵活自如。

简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。

CSS最大价值：由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离。

二、CSS语法规范

使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。

CSS规则由两个主要的部分构成：选择器 和声明

1.选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式

2.属性和属性值以“键值对”的形式出现

3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等

4.属性和属性值之间用英文“:”分开

5.多个属性之间用英文“;”进行分割

6.当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开

7.在书写样式过程中，空格、换行等操作不影响属性显示

8.不要在属性值与单位之间留有空格（如：font-size: 50 px），正确的写法是 font-size: 50px。

我们先举个例子

脸 {
    眼睛 : 放大1厘米;
    鼻子 : 垫高1厘米;
    嘴巴 : 缩小1厘米;
}

我们来看看在HTML中怎么写？

所有的样式，都包含在 <style> 标签内，表示是样式表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style>
            h1 {
                color : red;
            }
        </style>
        <h1>11111111111111111</h1>
        <h2>22222222222222222</h2>
        <h3>33333333333333333</h3>
    </body>
</html>

运行查看

CSS选择器的作用：选择器就是根据不同需求把不同的标签选出来，这就是选择器的作用。简单来说，就是选择标签用的。

我们在使用时要注意两点：

找到所有的 h1 标签。选择器（选对人）
设置这些标签的样式，比如颜色为红色（做对事）。

三、CSS样式的位置

1、内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 <style> 标签在文档头部<head>定义内部样式表。

2、外部样式

当样式需要应用于很多页面时，外部样式表将是理想的选择。

（1）单独定义一个CSS样式文件style.css

h1 {
    color: red;
}

（2）在每个用到样式的HTML页面中使用 <link> 标签链接到样式表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="./style.css"/>
    </head>
    <body>
        <h1>11111111111111111</h1>
        <h2>22222222222222222</h2>
        <h3>33333333333333333</h3>
    </body>
</html>

3、内联（行内）样式

由于要将表现和内容混杂在一起，内联（行内）样式会损失掉样式表的许多优势。

要使用内联样式，需要在相关的标签内使用样式（style）属性。style 属性可以包含任何 CSS 属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1 style="color: red;">11111111111111111</h1>
        <h2 style="color: blue;">22222222222222222</h2>
        <h3>33333333333333333</h3>
    </body>
</html>

这3种样式可以联合使用----多重样式。

多重样式优先级： 内联样式 > 内部样式 > 外部样式

另外，我们在联合使用这3种样式时，一般来说书写习惯：外部样式引入<link>在内部样式<style>前面。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="./style.css" />
        <style>
            h1 {
                color: yellow;
            }

            h3 {
                color: brown;
            }
        </style>
    </head>
    <body>
        <h1 style="color: green;">11111111111111111</h1>
        <h2 style="color: blue;">22222222222222222</h2>
        <h3>33333333333333333</h3>
    </body>
</html>

四、CSS基础选择器

基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器。

1、标签选择器：

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

语法：标签选择器{ 属性：属性值 ... }

标签选择器 { 
    属性 ：属性值 ... 
}

作用：标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

2、类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

语法：

.类名 { 
    属性1 : 属性值1;
    ...
}

（1）如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

（2）类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示。

（3）类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义的）。

（4）类名可以理解为给这个标签起了一个名字。

（5）长名称或词组可以使用中横线来为选择器命名。

（6）不要使用纯数字、中文等命名，尽量使用英文字母来表示。

（7）命名要有意义，尽量使别人一眼就知道这个类名的目的。

多类名选择器

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。

多类名的具体使用：

注意：

（1）在标签class属性中写多个类名

（2）多个类名中间必须用空格分开

（3）这个标签就可以分别具有这些类名的样式

（4）如果一个标签有多个类选择器，并且这些类选择器中有冲突的属性，那么按照CSS的<style>中定义的选择器的顺序来决定优先级：属性相同时，后定义的会把先定义的覆盖掉。

例如

a.情况一：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="./style.css" />
        <style>
            .red {
                color: red;
            }

            .font20 {
                color: blue;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="red">1111111111</div>
        <div class="red font20">2222222222</div>
    </body>
</html>

运行结果

b.情况二：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="./style.css" />
        <style>
            .font20 {
                color: blue;
                font-size: 20px;
            }
            
            .red {
                color: red;
            }            
        </style>
    </head>
    <body>
        <div class="red">1111111111</div>
        <div class="red font20">2222222222</div>
    </body>
</html>

运行结果

3、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#”来定义。

语法：

#id名 {
    属性1: 属性值1;
    ... 
}

注意：id属性只能在每个HTML标签中出现一次，并且id属性的值只能是一个id选择器的名字，不能想类选择器一样，可以有多个。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #box1 {
                background-color: yellow;
            }

            #box2 {
                background-color: red;
            }

            #box3 {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div id="box1">111111111111</div>
        <div id="box2">222222222222</div>
        <div id="box3">333333333333</div>
    </body>
</html>

运行结果

id选择器和类选择器的区别

（1）类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

（2）id选择器好比人的身份证号码，全中国是唯一的，不得重复。

（3）id 选择器和类选择器最大的不同在于使用次数上。

（4）类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。

4、通配符选择器

语法：

* { 
    属性1: 属性值1;
    ... 
}

通配符选择器不需要调用，自动就给所有的元素使用样式。

一般只有一种特殊情况才使用，给所有的元素标签清除内外边距。

* { 
    margin: 0; 
    padding: 0; 
}

5、基础选择器总结

五、CSS字体属性

1、字体大小

CSS 使用 font-size 属性定义字体大小。

语法：

p { 
    font-size: 20px; 
}

（1）px（像素）大小是我们网页的最常用的单位

（2）谷歌浏览器默认的文字大小为16px

（3）不同浏览器可能默认显示的字号大小不一致，我们尽量给一个字号的明确值，不要用默认大小。

（4）可以给 body 指定整个页面文字的大小

2、字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

语法：

p { 
    font-weight: bold; 
}

normal：不加粗（默认值）
bold：加粗
100~900：其中 400 等同于normal，700等同于bold，注意，这个数字后面不用跟单位。

（1）学会让加粗标签（比如 h 和 strong 等) 不加粗，或者其他标签加粗

（2）实际开发时，我们更喜欢用数字表示粗细

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
                font-size: 16px;
                font-family: "宋体";
                font-weight: 400;
            }
            .title {
                font-size: 20px;
                font-family: "黑体", Arial, "微软雅黑", "Microsoft Yahei";
                font-weight: 700;
            }
        </style>
    </head>
    <body>
        <p class="title">静夜思</p>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    </body>
</html>

3、字体样式

CSS 使用 font-style 属性设置文本的风格。
语法：

p {
    font-style: normal;
}

normal：标准字体样式（默认值）
italic：倾斜字体样式，对于没有斜体变量的特殊字体，将应用oblique
oblique：倾斜的字体

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
                font-size: 16px;
                font-family: "宋体";
                font-weight: 400;
                font-style: italic;
            }
            .title {
                font-size: 20px;
                font-family: "黑体", Arial, "微软雅黑", "Microsoft Yahei";
                font-weight: 700;
            }
        </style>
    </head>
    <body>
        <p class="title">静夜思</p>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    </body>
</html>

4、字体的综合写法

字体属性可以把以上文字样式综合来写, 这样可以更节约代码：

body {
    font: font-style font-weight font-size/line-height font-family;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开，不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
                font: italic 400 16px "宋体"
            }

            .title {
                font: italic 700 20px "黑体"
            }
        </style>
    </head>
    <body>
        <p class="title">静夜思</p>
        <p>床前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    </body>
</html>

5、字体总结

六、CSS文本属性

1、文本颜色

color 属性用于定义文本的颜色。

语法：

div { 
    color: red; 
}

CSS的颜色可以通过以下方法指定：https://www.runoob.com/cssref/css-colors-legal.html

预定义颜色名称：147颜色名称（17个标准色加上130个其他色），例如：red，green，blue，pink，而且这些名称是不区分大小写的，比如RED、rED、Red等都相当于red。参见https://www.runoob.com/cssref/css-colornames.html
十六进制颜色：指定一个十六进制的颜色，其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间，可以用大写形式也可以用小写形式，甚至大小写混合都是可以的。例如，0000FF值呈现为蓝色，因为蓝色的组成设置为最高值（FF）而其他设置为0。如果十六进制颜色值中每组数字中的两位都是相同的数字，那么该十六进制值可以简写为3位的形式。比如，#ff00cc可以简写为#f0c。但要注意，如果任何一组数字中的两位不同，那么就不能简写。比如，#ff8c00就不能简写为#f8c0。
RGB颜色：RGB(0,0,255)，RGB(0%,0%,100%)。
RGBA颜色：RGBA颜色值被IE9, Firefox3+, Chrome, Safari和Opera10+支持。RGBA颜色值是RGB颜色值alpha通道的延伸--指定对象的透明度。RGBA颜色值指定：RGBA(红,绿,蓝,alpha)。 alpha参数是不透明度，一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。
HSL色彩：色调、饱和度和亮度 -- 使用色彩圆柱坐标表示，HSL(色调,饱和度,亮度)。例如，hsl(120,65%,75%)
HSLA颜色：带有alpha通道的HSL颜色值的延伸 -- 指定对象的透明度。HSLA(色调,饱和度,亮度,alpha），alpha参数定义的不透明度，是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                color: DarkMagenta;
            }
            #box2 {
                color: rgb(0, 255, 0);
                background-color: rgb(0, 100%, 100%);
            }
            p {
                color: hsl(120.5, 65%, 75%);
                background-color: hsla(30, 50%, 25%, 0.8);
            }
            .box3 {
                color: #0000ff;
                background-color: #e0f;
            }
        </style>
    </head>
    <body>
        <div>111111111111</div>
        <div id="box2">222222222222</div>
        <p>333333333333</p>
        <div class="box3">444444444444</div>
    </body>
</html>

运行结果

2、文本对齐：

text-align 属性用于设置元素内文本内容的水平对齐方式。

语法：

div { 
    text-align: center;
}

3、文本修饰

text-decoration 属性用于设置元素内文本内容的划线情况。

语法：

div {
    text-decoration: underline;
}

属性值

none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                text-decoration: none;
            }

            #box2 {
                text-decoration: underline;
            }

            p {
                text-decoration: line-through;
            }

            .box3 {
                text-decoration: overline;
            }
        </style>
    </head>
    <body>
        <div>111111111111</div>
        <div id="box2">222222222222</div>
        <p>333333333333</p>
        <div class="box3">444444444444</div>
    </body>
</html>

运行结果：

4、文本缩进

text-indent 属性用于设置文本的缩进情况。

语法：

div { 
    text-indent: 20px;
} 
div { 
    text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小，如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                text-indent: 20px;
            }

            #box2 {
                text-indent: 2em;
            }

            p {
                text-indent: 10em;
            }
        </style>
    </head>
    <body>
        <div>今年以来，随着我国经济社会全面恢复常态化运行，国民经济整体恢复向好，稳就业政策接续落地，就业形势总体稳定。</div>
        <div id="box2">“也要看到，当前就业总量压力和结构性问题仍不容忽视，青年人就业压力依然较大，高技能人才短缺，‘求职难’和‘招工难’并存，促进就业供需总量平衡、结构合理，仍需要加力。”付凌晖说。</div>
        <p>谈及就业促进政策，人力资源和社会保障部副部长俞家栋此前在新闻发布会上表示，今年以来，在疫情防控较快平稳转段、稳经济政策效果持续显现的有力支撑下，就业形势逐步恢复，保持总体稳定。但稳的基础仍有待进一步加固，就业工作还面临新的困难。优化调整稳就业政策措施，既是贯彻中央关于稳就业决策部署的具体体现，也是适应形势稳定就业大局的现实需要。
        </p>

    </body>
</html>

运行结果：

5、行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。上间距 + 文本高度 + 下间距 = 行间距。

语法：

p { 
    line-height: 36px;
}

七、层级选择器

1、子代选择器（E>F）

某个元素的下一级元素。只有一代。比如，爷爷的“子代选择器”是爸爸

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            ul>p {
                background-color: green;
            }

            li>p {
                background: red;
            }
        </style>
    </head>
    <body>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
        <p>p7</p>
        <p>p8</p>
    </body>
</html>

2、后代选择器（E F）

在某个元素的后面。比如，祖爷爷的“后代选择器”有爷爷、爸爸、你。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body p {
                background-color: green;
            }

            li p {
                background: red;
            }
        </style>
    </head>
    <body>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
        <p>p7</p>
        <p>p8</p>
    </body>
</html>

3、相邻兄弟选择器（E+F）

同级向下相邻的一个元素。比如，你有一个哥哥和一个弟弟，那么你的“相邻兄弟选择器”是你的弟弟

举例：p1 的相邻兄弟 p2 元素，只有 p2 的样式会发生改变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .active+p {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p class="active">p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
        <p>p7</p>
        <p>p8</p>
    </body>
</html>

4、通用兄弟选择器（E~F）

当前元素的向下的所有兄弟元素。你的“通用兄弟选择器”是你的弟弟妹妹们。

举例：p2 的通用兄弟 p 元素，是 p2 后面的所有 p 元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .active~p {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p class="active">p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p>p4</p>
            </li>
            <li>
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
        <p>p7</p>
        <p>p8</p>
    </body>
</html>

5、交集选择器（E.F或E#F）

选择的元素是同时满足两个条件。只能交集两个，第一个是选择器，第二个是class或id选择器。两者之间无空格，无逗号“，”。

举例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p.red {
                background-color: red;
            }

            p#blue {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <p class="red">p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>
                <p id="blue">p4</p>
            </li>
            <li class="red">
                <p>p5</p>
            </li>
            <li>
                <p>p6</p>
            </li>
        </ul>
        <p>p7</p>
        <p>p8</p>
    </body>
</html>

6、并集选择器（E,F）

多个标签，使用同样的样式规则。可以并集多个，各个之间用“，”隔开

举例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #box2,
            p,
            .box4,
            .box3 .box5,
            h1 {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div>000000000000<p>111111111111</p>
        </div>
        <div id="box2">222222222222</div>
        <p>333333333333</p>
        <div class="box3">
            444444444444
            <div class="box4">555555555555</div>
            <div class="box5">777777777777</div>
        </div>
        <h1>666666666666</h1>
    </body>
</html>

六、属性选择器

为带有特定属性的 HTML 元素设置样式，是通过元素的属性及属性值来选择元素的。

下面介绍属性选择器的五种用法。

1、选择含有指定属性的元素

[属性名] {
}

举例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 第一种用法：选择含有指定属性的元素。
               语法：[属性名]{} */
            /*选择属性名title，设置字体颜色红色  */
            [title] {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1 title="a">《出塞》</h1>
        <h2 title="ab">唐·王昌龄</h2>
        <p title="abc">秦时明月汉时关，</p>
        <p title="abab">万里长征人未还。</p>
        <p title="c">但使龙城飞将在，</p>
        <p>不教胡马度阴山。</p>
    </body>
</html>

运行效果

2、选择含有指定属性及指定属性值的元素

[属性名=属性值] {
}

举例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 第一种用法：选择含有指定属性的元素。
               语法：[属性名]{} */
            /*选择属性名title，设置字体颜色红色  */
            [title] {
                color: red;
            }

            /* 第二种用法：选择含有指定属性及指定属性值的元素。
               语法：[属性名=属性值]{} */
            /*选择属性名为title和属性值为ab的元素，设置字体颜色绿色 */
            [title=ab] {
                color: green;
            }
        </style>
    </head>
    <body>
        <h1 title="a">《出塞》</h1>
        <h2 title="ab">唐·王昌龄</h2>
        <p title="abc">秦时明月汉时关，</p>
        <p title="abab">万里长征人未还。</p>
        <p title="c">但使龙城飞将在，</p>
        <p>不教胡马度阴山。</p>
    </body>
</html>

运行效果

3、选择含有指定属性及指定属性之开头的元素

[属性名^=属性值] {
}

举例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 第一种用法：选择含有指定属性的元素。
               语法：[属性名]{} */
            /*选择属性名title，设置字体颜色红色  */
            [title] {
                color: red;
            }

            /* 第二种用法：选择含有指定属性及指定属性值的元素。
               语法：[属性名=属性值]{} */
            /*选择属性名为title和属性值为ab的元素，设置字体颜色绿色 */
            [title=ab] {
                color: green;
            }

            /* 第三种用法：选择含有指定属性及指定属性之开头的元素。
               语法：[属性名^=属性值]{}  */
            /* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
            [title^=ab] {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <h1 title="a">《出塞》</h1>
        <h2 title="ab">唐·王昌龄</h2>
        <p title="abc">秦时明月汉时关，</p>
        <p title="abab">万里长征人未还。</p>
        <p title="c">但使龙城飞将在，</p>
        <p>不教胡马度阴山。</p>
    </body>
</html>

运行效果

4、选择含有指定属性及指定属性值结尾的元素

[属性名$=属性值] {
}

举例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 第一种用法：选择含有指定属性的元素。
               语法：[属性名]{} */
            /*选择属性名title，设置字体颜色红色  */
            [title] {
                color: red;
            }

            /* 第二种用法：选择含有指定属性及指定属性值的元素。
               语法：[属性名=属性值]{} */
            /*选择属性名为title和属性值为ab的元素，设置字体颜色绿色 */
            [title=ab] {
                color: green;
            }

            /* 第三种用法：选择含有指定属性及指定属性之开头的元素。
               语法：[属性名^=属性值]{}  */
            /* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
            [title^=ab] {
                background-color: yellow;
            }

            /* 第四种用法：选择含有指定属性及指定属性值结尾的元素。
               语法：[属性名$=属性值] */
            /* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px */
            [title$=ab] {
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <h1 title="a">《出塞》</h1>
        <h2 title="ab">唐·王昌龄</h2>
        <p title="abc">秦时明月汉时关，</p>
        <p title="abab">万里长征人未还。</p>
        <p title="c">但使龙城飞将在，</p>
        <p>不教胡马度阴山。</p>
    </body>
</html>

运行效果

5、选择含有指定属性，只要含有某个属性值的元素

[属性值*=属性名] {
}

举例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 第一种用法：选择含有指定属性的元素。
               语法：[属性名]{} */
            /*选择属性名title，设置字体颜色红色  */
            [title] {
                color: red;
            }

            /* 第二种用法：选择含有指定属性及指定属性值的元素。
               语法：[属性名=属性值]{} */
            /*选择属性名为title和属性值为ab的元素，设置字体颜色绿色 */
            [title=ab] {
                color: green;
            }

            /* 第三种用法：选择含有指定属性及指定属性之开头的元素。
               语法：[属性名^=属性值]{}  */
            /* 选择属性名为title和属性值以ab开头的元素，设置背景色黄色 */
            [title^=ab] {
                background-color: yellow;
            }

            /* 第四种用法：选择含有指定属性及指定属性值结尾的元素。
               语法：[属性名$=属性值] */
            /* 选择属性名为title和属性值以ab结尾的元素，设置字体为30px */
            [title$=ab] {
                font-size: 30px;
            }

            /* 第五种用法：选择含有指定属性，只要含有某个属性值的元素。
               语法：[属性值*=属性名]{} */
            /* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */
            [title*=c] {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <h1 title="a">《出塞》</h1>
        <h2 title="ab">唐·王昌龄</h2>
        <p title="abc">秦时明月汉时关，</p>
        <p title="abab">万里长征人未还。</p>
        <p title="c">但使龙城飞将在，</p>
        <p>不教胡马度阴山。</p>
    </body>
</html>

运行效果

七、伪类选择器

伪类选择器简称“伪类”，伪类是一种不存在的类，伪类用来表示元素的一种状态。

1、第一种伪类

:first-child{}，用来选择父元素下的第一个子元素。

注意：:first-child{}是根据父元素下所有子元素进行排序。

posted @ 2023-06-11 22:38 熊猫Panda先生阅读(166) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

熊猫Panda

CSS3

一、CSS简介

二、CSS语法规范

三、CSS样式的位置

1、内部样式

2、外部样式

3、内联（行内）样式

四、CSS基础选择器

1、标签选择器：

2、类选择器

3、id选择器

4、通配符选择器

5、基础选择器总结

五、CSS字体属性

1、字体大小

2、字体粗细

3、字体样式

4、字体的综合写法

5、字体总结

六、CSS文本属性

1、文本颜色

2、文本对齐：

3、文本修饰

4、文本缩进

5、行间距

七、层级选择器

1、子代选择器 （E>F）

2、后代选择器 （E F）

3、相邻兄弟选择器（E+F）

4、通用兄弟选择器（E~F）

5、交集选择器（E.F或E#F）

6、并集选择器（E,F）

六、属性选择器

1、选择含有指定属性的元素

2、选择含有指定属性及指定属性值的元素

3、选择含有指定属性及指定属性之开头的元素

4、选择含有指定属性及指定属性值结尾的元素

5、选择含有指定属性，只要含有某个属性值的元素

七、伪类选择器

公告

1、子代选择器（E>F）

2、后代选择器（E F）