今天是我参加青训营学习的第二天，今天带大家走进CSS！

什么是CSS？

CSS（Cascading Style Sheets)
定义页面元素的样式
设置字体和颜色
设置位置和大小
添加动画效果

如何在页面中使用CSS？

外链

<!-- 链接式引用 -->
<link rel="stylesheet" href="/assets/style.css">

嵌入

<!-- 嵌入 -->
<style>
   li{margin:0; list-style: none;}
   p{margin: lem 0;}
</style>

内联

<p style="margin:lem 0"> Example Content</p>

2. CSS工作方式

屏幕截图 2022-07-26 104331.png

3.选择器（Selector）

作用：找出页面中的元素，以便给他们设置样式。
选择器怎样选择元素

按照标签名.类名或ID
按照属性
按照在DOM树中的位置

3.常见选择器类型：

通配选择器：匹配HTML元素

2. 标签选择器：用标签设置样式

3.id选择器：匹配对应ID元素

#logo{color：red；
}

4.类选择器：匹配类名相同元素

.classname{
color:red;
}

5.属性选择器

font-size="28px"
}

伪类

不基于标签和属性定位元素
几种伪类

状态伪类

<form>
<input type ="text" />
<`input type="button"/>
</form>

结构性伪类

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>not选择器</title>
    <style>
        :root{
            background: #126fb0;
        }
        body *:not(h1){
            background: #fff;
        }
        :empty{
            background: #ff6600;
        }
    </style>
</head>
<body>
<h1>not选择器</h1>
<p>not选择器</p >
<br/>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td></td>
        <td>4</td>
    </tr>
    <tr>
            <td>A</td>
        <td>B</td>
        <td>C</td>
        <td></td>
    </tr>
</table>
</body>
</html>