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

初识CSS

1. CSS是什么

CSS（Cascading Style Sheets）层叠样式表，用于定义页面的元素的样式

设置字体和颜色
设置位置和大小
添加动画效果

    h1{
        color: white;
        font-size: 100px;
    }

其中开头为选择器（h1）选中页面中标签，选择器（color）用于设置属性，其冒号后是其属性值，整行为一行声明，整个成为声明块。

2. 页面中使用CSS的三种方法

（1）外链

通过链接方式引用外部CSS文件，设置在header标签中

    <!-- 外链 -->
    <link rel="stylesheet" href="./文件名.css">

（2）嵌入

通过直接在header中建立style样式，进行元素样式的选择和设置

  <!-- 嵌入 -->
     <style>
        h1{
            color: white;
            font-size: 100px;
        }
    </style>

（3）内联

在body中的元素标签内，直接设置样式

    <body>
        <!-- 内联 -->
      <p style="margin:lem 0"></p>
    </body>

3. CSS是如何工作的

graph TD
加载HTML --> 解析HTML
解析HTML --> 加载CSS
解析HTML --> 创建DOM树
加载CSS --> 增加样式到DOM节点
增加样式到DOM节点 --> 创建DOM树
创建DOM树 --> 展示页面

4. CSS选择器

（1）通配选择器

       *{
            color: white;
            font-size: 100px;
        }

（2）元素选择器

       h1{
            color: white;
            font-size: 100px;
        }

(3) id选择器（id属性为唯一值）

    <style>
       #id{
            color: white;
            font-size: 100px;
        }
    </style>
    <body>
        <p id="id"></p>
    </body>

（4）类选择器（一个标签可以有多个类，一个类可以有多个标签）

    <style>
       .id{
            color: white;
            font-size: 100px;
        }
    </style>
    <body>
        <p class="id"></p>
    </body>

（5）属性选择器

      <style>
        input[type="text"]{
            color: white;
            font-size: 100px;
        }
    </style>
     <body>
      <p id="id"></p>
      <input type="text" disabled>
    </body>

属性选择器扩展

   <a href="#top"></a>
   <a href="a.jpg"></a>
   <style>
       /*^表示开头 */
       a[href^="#"]{
           color: white;
           font-size: 100px;
       }
       /* $表示结尾 */
       a[href$="#"]{
           color: white;
           font-size: 100px;
       }
   </style>

（5）伪类选择器

   /* 伪类 */
        /*表示链接未点 */
        a:link{
            color: white;
            font-size: 100px;
        }
        /* 表示链接点后 */
        a:visited{
            color: white;
            font-size: 100px;
        }
        /* 表示链接触碰到时候 */
        a:hover{
            color: white;
            font-size: 100px;
        }
        /* 表示链接点击时候 */
        a:active{
            color: white;
            font-size: 100px;
        }
         /* 输入框聚焦时候 */
        :focus{
            outline：2px solid orange;
        }
           /* 列表中li父级第一个时候 */
        li:first-child{
            outline：2px solid orange;
        }
          /* 列表中li父级最后一个时候 */
        li:last-child{
            outline：2px solid orange;
        }

5. CSS选择器的组合

--选自字节跳动前端青训班ppt截图

6. CSS颜色的表示

可以使用rgb（r表示red红色，g表示green绿色，b表示blue蓝色）
使用方法（1）rgb（123，123，123）（2）#8fac87 ；其中（2）中为十六进制，（1）中的数字分别表示rgb的颜色数值，并且在（2）中若每两个数字相同可以简写如#bbffaa可写作#bfa（绿豆沙护眼色）取值范围为（0~255）。
hsl（h表示色彩颜色由0-360，s表示饱和度0-100%，L表示亮度也是0-100%）
可以由hsl(18,91%,84%)表示。
用关键字如：white，red，green，black等等。
同时在rgb中可以添加透明度，用rgba表示rgba(0,0,0,.5)中的.5表示50%透明度。hsla（）中的a同理。

7. 字体族（font-family）

通用字体族：serif 衬线体， sans-serif 无衬线体， cursive手写体， fantasy ，monspace 等宽字体。