这是我参与「第四届青训营」笔记创作活动的的第2天

一、什么是CSS？

css即层叠样式表，通过设置HTML标签的样式来改变各元素在页面中样式，如果说HTML是把控页面的框架，那么CSS就是一种美工。

CSS是如何工作的

二、页面中使用CSS的三种方式

优先级：内联式>外链式>嵌入式

    <!--外链式-->
    <heml>
        <head>
            <link rel="stylesheet" href="/style.css">
        </head>
    </html>
    
    <!--嵌入式-->
    <style>
        div {
            position: relative;
            margin: 0 auto;
        }
    </style>
    
    <!--内联式-->
    <p style="display: block;"></p>

···

选择器类型

基本选择器

● 标签选择器：针对同一类标签起作用，比如所有的p标签 ● id选择器：用于针对某一个特定的标签 ● 类选择器：针对有着同样类名的标签 ● 通配符选择器：针对所有标签

1、标签选择器 - 直接使用标签

    <body>
        <p>Hello World</p>
    <body>
    
    <!--标签选择器直接使用标签名-->
    <style>
        p {
            color: gray;
        }
    </style>

2、id选择器 - 使用#定义

    <body>
        <!--id选择器需要先在标签内设置id值，然后在css中通过 #id值 的方式选中元素-->
        <p id="words">Hello World</p>
    <body>
    
    <!--id选择器-->
    <style>
        #words {
            color: gray;
        }
    </style>

3、类选择器 - 使用. 定义

    <body>
        <!--类选择器需要先在标签内通过class设置类名，然后在css中通过 .类名 的方式选中元素-->
        <p id="words">Hello World</p>
    <body>
    
    <!--类选择器-->
    <style>
        .words {
            color: gray;
        }
    </style>

4、通配符选择器 - 使用*定义

高级选择器

● 后代选择器、子选择器（一代）、相邻兄弟选择器（一个）、通用兄弟选择器（所有兄弟标签）

示例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
        <p class="text">words</p>
        <p>hello</p>
        <p>world</p>
 
        <ul>
            <li class="item">
                <h1>Line</h1>
                <p>sss</p>
                <p>penta_kill</p>
            </li>
            <li>
                <h2>Line2</h2>
            </li>
            <li>
                <h3>Line3</h3>
            </li>
        </ul>
    </body>
</html>

1、后代选择器 - 使用空格

/*选中一个元素下的所有相同后代*/
.item p{
    color: blue;
}
/* sss 和 penta_kill 均变为蓝色

2、子选择器 - 使用 >

body p {
    color: blue;
}
/*只有 words、hello、world 三个单词变成蓝色*/

3、相邻兄弟选择器 - 使用+，只向下选择一个同名标签

.item + p{
    color: blue;
}
/*只有 sss 变为蓝色，而 penta_kill不变成蓝色*/

4、通用兄弟选择器 - 使用~，选中所有同名的兄弟标签

.item ~ p{
    color: blue;
}
/* sss 与 penta_kill都变成蓝色*/

前端CSS | 青训营笔记