1css概念: css层叠样式表，css是用来美化html标签
2选择器
选择器是一个选择谁的过程
写法：选择器{属性:值;}
属性 解释
Width：20px 元素宽度
Height:20px 高
Background-color 背景颜色
Font-size 文字大小
Text-align:left|center|right 内容的水平对齐方式
Text-index:2em; 首行缩进
3选择器
3.1基础选择器:
3.1.1标签选择器:
标签{属性:值;}
颜色的表达方式；
直接写颜色的名称
十六进制显示颜色
0-9 a-f
#000000;前两位代表红色,中间两位代表绿色,后面两位代表蓝色RGB
3.1.2类选择器(重点)
.自定义类名{属性:值;}
特点:谁调用谁生效；
一个标签可以调用多个类选择器：
<div class="box miss"></div>
自定义类名命名规则；
不可以用纯数字开头来定义类名
不能用特殊符号或特殊符号开头_除外
不建议使用汉字来定义类名
不推荐使用属性或者属性的值来定义类名
3.1.3id选择器
写法: #自定义名称{属性:值;}
特点:一个ID选择器在一个页面只能使用一次.如果使用2次或者2次以上,不符合w3c规范,js调用会出问题
一个标签只能调用一个id选择器
3.1.4通配符选择器
*{属性:值;}
不推荐使用 增加浏览器和服务器负担
3.2复合选择器
两个或者两个基础的选择器通过不懂的方式连接在一起
3.2.1交集选择器；
div.box{}
div#miss{}
3.2.2后代选择器（重点）；
选择器+空格+选择器+空格+选择器{属性:值;}
特点:无限制隔代
只要能代表 标签 类选择器 id选择器 可以自由组合
3.2.3子代选择器:
选择器>选择器{属性:值;}
特点:选择直接下一代元素.
3.2.4并集选择器
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<style type="text/css">
div,#miss,span,h1{
font-size: 100px;
color: #666;
background-color: green;
}
</style>
</head>
<body>
<div>威武</div>
<p id="miss">霸气</p>
<span>帅气</span>
<h1>漂亮</h1>
</body>
</html>
escape(“微软雅黑”)
回车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
div.div1 ul.box li,div.div1 p{
color:red;
}
div.box p.p1,div.box div.div1 p,p{
color: blue;
font-weight: ;/*100-900从700加粗 不推荐使用bold*/
font-family: 微软雅黑;
font-style: normal;/*normal默认 italic斜体*/
line-height: px;/*行高*/
}
</style>
</head>
<body>
<div class="div1">
<ul class="box">
<li>威武</li>
</ul>
</div>
<div class="div1">
<p>霸气</p>
</div>
<div class="box">
<p class="p1">ssssss</p>
</div>
<div class="box">
<div class="div1">
<p>ssss</p>
</div>
</div>
<p>
sssss<br>
</p>
</body>
</html>
font: italic 700 16px/40px 微软雅黑;
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)