多类名
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="chap01.css">
</head>
<body>
<div class="test cornner">
</div>
</body>
</html>
.test {
width: 700px;
height: 800px;
background-color: skyblue;
}
.cornner {
border-radius: 50%;
}
id选择器：id只能调用一次，别的标签不能使用
<div class="" id="sugar-high-area">
sugar high
</div>
#sugar-high-area {
background-color: pink;
color: white;
}
字体复合属性顺序：font-style font-weight font-size font-family
line-height：属性用于设置行间的距离(行高)，可以控制文字行与行之间的距离，line-height修改的上间距与下间距之间的高度
Emmet语法：缩写提高编写速度，vscode内置
批量生成组件
父子组件生成
带类名或者id的
大括号携带内容
css首字母
后代选择器
后代选择器又称为包含选择器，可以从父元素里面子元素，写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代
<div class="line-test" id="">
<ol>
<li>abc</li>
<li>abc</li>
<li>def</li>
<li>jkl</li>
</ol>
<ul>
<li>hhhaha</li>
<li>77777</li>
<li>888888</li>
</ul>
</div>
ol li {
background-color: skyblue;
}
子元素选择器
<div class="top" id="">
<p>abcd</p>
<div>
<span>def</span>
</div>
</div>
.top > p {
color: darkblue;
}
并集选择器，用逗号分隔
.top ,p, span {
color: darkblue;
background-color: blueviolet;
}
伪类选择器使用冒号
a:link {
color: black;
}
元素显示模式
块级元素 h1-h6 、div 、ol、ul、li等 特点： 1、独占一行 2、宽高、内外边距都可以控制 3、宽度默认是父级宽度的100% 4、是一个盒子内部可以放行内或者块级元素 行内元素 a、 strong、b、em、i、del、s、ins、u、span 特点： 1、相邻行内元素在一行上，一行可以显示多个 2、宽高设置无效 3、默认宽度就是内容宽度 4、行内元素只能容纳文本或者其他行内元素 注意：a里面不能放a，但可以放块级元素 行内块元素 img、input、td 特点： 1、一行可显示多个 2、默认宽高等于内容 3、可以设置宽高
转换元素显示模式
display: block //转为块 display: inline //转为行内 display: inline-block //转为行内块
单行文字垂直居中，可以使文字的行高等于盒子高度
固定背景不随整体滚动
background-attachment：fixed
CSS三大特性
层叠性、继承性、优先级
