本章中，首先要了解CSS的一些基本概念，然后才能更好的掌握CSS样式。

一、基本概念

1.定义：CSS简称为层叠样式表，具有层叠性和继承性。
2.书写方式
①分类
内联式：在标签内部添加style属性

<p style = "color:red;">CSS内联式的书写方式</p>

外联式：使用link链接添加。要注意href中的地址建议使用相对路径

<link rel="stylesheet" href="css/05-css.css">

嵌入式：在header 使用style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
     </style>
</head>
<body>
    <div>嵌入式</div>
</body>
</html>

②权重
提出权重这个概念是因为当页面中标签样式过多时，可能会造成样式的重叠。比如p标签有样式1和样式2.那么究竟显示样式1还是样式2？取决于两方面。一是书写的位置，后写的生效；二就是权重，显示权重高的样式。因此我们需要知道权重如何比较才能更好的避免样式的重叠问题
首先，内联式权重最高；其次嵌入式和外联式权重一样，具体根据选择器的类型进行比较
③层叠性：指的是标签的权重的关系，当权重一样时，后写的生效
④继承性：与文字类有关的样式都可以被继承。当子级拥有自己的文字样式时，不继承父级的文字样式，只有当子级没有文字样式时才继承

二、选择器

1.定义：就是教你如何标签给标签做标记

2.类型

2-1 单选择器

① 通配符选择器：选择所有的标签。用 * 表示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
</body>
</html>

②标签选择器：直接使用标签名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p{
            color: green;
            font-size: 18px;
            font-family: "楷体";
            font-weight: bold;
            font-style: italic;/* 文字倾斜 */
            text-indent: 2em;/* 文字缩进 */
            line-height: 30px;/* 文字行高 */
            text-decoration: line-through;/* 文字下划线 */
        }
    </style>
</head>
<body>
    <p>这是标题</p>
</body>
</html>

标签选择器.png

③类选择器：声明时通过 “ .+名字” 声明，在使用时，只需要在标签内添加属性 class="名字"即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .information{
            color: red;
        }
    </style>
</head>
<body>
    <p class="information">这是class选择器</p>
</body>
</html>

class选择器.png

④id选择器；声明时通过 “#+名字声明”，在使用的时，只需要在标签内添加属性 id="名字"即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #information{
            color: red;
        }
    </style>
</head>
<body>
    <p id="information">这是id选择器</p>
</body>
</html>

id选择器.png

2-2 复合选择器

复合选择器就是多个单一选择器一起使用，主要有以下几种类型：
①后代选择器：后代指的是标签包裹在内的所有标签。在声明时使用空格隔开标签名或者类名。选择后代选择器具有全局性，就是选中该标签包裹的所有标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div p span{
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <span>这是后代选择器</span>
            <span>这是后代选择器</span>
        </p>
     </div>
</body>
</html>

image.png

本例中，就选中了div包裹下了所有的p标签和span标签

②子代选择器：子代指的是标签包裹下的第一个子级标签。在使用时用 > 隔开标签名或者类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span{
            color: green;
        }
        div>span{
            color:red
        }
    </style>
</head>
<body>
    <div>
        <span>这是子代选择器</span>
        <p>
            <span>这是子代选择器</span>
        </p>
     </div>
</body>
</html>

子代选择器.png

③交集选择器：指多个选择器具有相同的属性。使用逗号选择标签名或者类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span{
            font-size: 10px;
        }
        p,span{
            color: green;
        }
    </style>
</head>
<body>
   <div>
        <span>这是交集选择器</span>
        <p>这是交集选择器</p>
     </div>
</body>
</html>

交集选择器.png

本例中，同时设置了文字的颜色都是绿色
④并集选择器：指只选择某个特定的选择器，选择器权重叠加。使用实心点选择标签名或者类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        span{
            color: red;
        }
        div .one{
            color: green;
        }
    </style>
</head>
<body>
     <div>
        <span class="one">这是并集选择器</span>
     </div>
     <span>这是并集选择器</span>
</body>
</html>

并集选择器.png

3.选择器的权重

①优先显示权重大的选择器： * < 标签名 < 类名 < id名 < 行内样式 < !important
②权重的计算：一个标签选择器为1g 一个类选择器为1kg 一个id选择器为1吨
③!important: 只是修改了一个选择器中的一个样式，而不是整个选择器
④同优先级的，后写的生效

4.特殊选择器

ul>li:nth-of-type(n/1){...} 该选择器选择特定的某几个。一般长度不超过四个，只能选择同级并且权重很高，比类名高。

CSS中最基本的知识你可知道？