字体颜色：color: pink;
字体大小：font-size: 20px;
块宽度：width: 100px;
块高度：height: 100px
注意：
若块未规定宽度，则默认等于浏览器宽度
宽度、高度为百分数时，则为父级块/浏览器的宽度、高度的百分比
对span/em/a/strong等行内盒子不起作用
块背景颜色：
background-color: black;
background-color: #fff;
background-color: rgba(255, 255, 0, 0.5;（0透，1实）);
字体族：font-family: Arial, Helvetica, sans-serif;
字体风格：font-style: italic;（倾斜，或normal不倾斜）
字体粗细：font-weight: 700/bold;（标准粗度，或400/normal标准细度；范围100~900，无需写px） <h>标签的内容的大小、粗细须指定才能修改，泛指无法修改
字体装饰：text-decoration: none;（取消所有装饰，或underline下划线/overline上划线/line-through删除线）
块级文本水平方向对齐：text-align: center;（居中，或left左对齐/right右对齐/justify两端对齐）
块级文本缩进：text-indent: 20;
20、20px、20em均可；em指当前文本字体大小下的相对缩进单位
字间距：letter-spacing: 2px;（可负值）
行高：line-height: 20px;
有无px单位均可；无单位则为当前文本字体大小下的倍数
文字仅为单行时，行高=块级文本框高度时，文字有居中效果
font简写格式：font: font-style font-weight font-size/line-height font-family;
（记忆：字体、大小、粗细、斜体倒序）
font-size、font-family必须，其他省略则为默认
合并table的双线边框：border-collapse;
变为单线框
form表单控件的黑色外框线：outline: none;
去除外框线
基础选择器
类选择器
.box {color: red;
}
所有标签内，类名class为box的字体都变红
注意：
类名不能是中文、纯数字
类名可对应多个项目
每个标签内class可有多个类名：<div class="namecar">benz</div>
id选择器
#header {color: red
}
所有标签内，id为header的字体都变红
注意：
不能是中文、纯数字
每个id只能使用对应一个项目，相当于该项目的编号
id只能有一个类名（无法使用空格）<p id="testcolor">测试</p>
通配符选择器：
* {margin: 0;
padding: 0;
box-sizing: border-box;
}
所有<p>标签内的字体都变红
关系选择器
后代选择器
.box p {color: red;
}
所有类名为box中，所有后代中的<p>标签内的字体都变红
可多层：
nav .box p{
color: red;
}
nav类型中类名为box的所有后代中的<p>标签内的字体都变红，非nav中的box、nav中的非box的<p>标签内的字体不变红
子代选择器
.box>p{color: red;
}
类名为box的下一层中，<p>标签内的字体都变红
注意：
类名不能是中文、纯数字
类名可对应多个项目
每个标签内class可有多个类名：<div class="namecar">benz</div>
邻接兄弟选择器
h2+p {color: red;
}
同级标签中，紧跟在<h2>后面的第一个<p>标签内的字体变红，若中间夹有其他标签则不生效
通用兄弟选择器：
h2~p {color: red;
}
同级标签中，紧跟在<h2>后面的所有<p>标签内的字体变红
分组选择器
并集选择器
div,.box {
color: red;
}
所有<div>标签内的和所有<.box>标签内的字体变红
伪类选择器
元素和选择器标签中的:冒号不能有空格
状态伪类
链接伪类
一定要按LVHA从上到下，不能乱
未访问链接：
a:link {
color: red;
text-decoration: none;
}
所有未访问的超链接字体红色、无下划线
已访问链接：
a:visited {
color: purple;
text-decoration: none;
}
所有未访问的超链接字体紫色、无下划线
鼠标悬停：
a: hover {
color: red;
text-decoration: underline;
}
所有未访问的超链接字体红色、下划线
鼠标点击：
a:active {
color: orange;
text-decoration: none;
}
所有未访问的超链接字体橙色、无下划线
用户行为伪类
鼠标经过元素：
.box: hover {
background-color: red;
width: 100px;
}
鼠标划过类名为.box的色块时，改变颜色、宽度
获得焦点元素（表单待输入状态）：
.box:focus {
background-color: red;
width: 100px;
}
点击类名为.search的色块时，改变颜色、宽度
结构伪类
对于混合同级标签，代码不会根据所需标签名及相对位置自动跳过，此处的n应该是所需标签在同级所有标签中的绝对序号，见详例
同级元素中的第一个元素：
ul li:first-child {
color: red;
}
ul列表里面的第一项字体变红
同级元素中的最后一个元素：
ul li:last-child {
color: red;
}
ul列表里面的最后一项字体变红
同级元素中的第n个元素：
ul li:nth-child(5) {
color: red;
}
ul列表里面的第五项字体变红
注意：n可代表：
①实际值（须正整数）
②关键字
odd为奇数
even为偶数
③公式，此时n从0开始计算
xn为第x、2x、3x个元素
n+x为第x个开始的所有元素
-n+x为前x个元素
伪元素选择器
见详例（略拓展）伪元素和选择器标签中的::冒号不能有空格
选择特定部分
首行：
.qtext::first-line {
color: red;
}
.qtext的文本的第一行文字为红色（该文本块在浏览器中的实际显示的第一行内容）
首字母：
.qtext::first-letter {
color: red;
}
.qtext的文本的第一个字为红色
插入内容
在前面插入：
.box::before {
content: "哈哈";
color: red;
}
.box的前面插入红色的“哈哈”
注意：无内容时要写content=""（必须要有content指令），单双引号均可
在后面插入：
.box::after {
content: "哈哈";
color: red;
}
.box的后面插入红色的“哈哈”
注意：无内容时要写content=""（必须要有content指令），单双引号均可
属性选择器
见详例（略拓展）值不能为纯数字，且最好加上双引号
包含指定元素：
a[class] {
color: red;
}
有class属性的链接a的字体为红
包含指定字符的元素：
a[class="tex"] {
color: red;
}
class为tex的链接a的字体为红（全字符匹配）；class为其他字符的不变
以指定字符开头的元素：
a[class=^"go"] {
color: red;
}
class以go开头的链接a的字体为红，以其他字符开头的不变
以指定字符结尾的元素：
a[class=$"ha"] {
color: red;
}
class以ha结尾的链接a的字体为红，以其他字符结尾的不变
任意位置包含指定字符的元素：
a[class=$"ha"] {
color: red;
}
class包含ha的链接a的字体为红
继承性
从更高级继承下来的属性，及通配符*，权重值为0
边框
边线样式
border: 粗细 样式 颜色;
如：.box {
border: 1px solid（实线） red;
}
.table {
border: 2px dashed（点） #f1f1f1;
}
.p {
border: 2px dashed（虚线） rgba(255, 150, 200, 0.25);
}
边框圆角
border-radius: 大小 (大小) (大小) (大小);(单位px/n%)
如：.box {
border-radius: 20px;
}
.p {
border-radius: 50%;
}
胶囊圆角仅需将大小设置为矩形短边的50%
图片也可设置
值不足4位（可以0占位）的以顺时针对角的顺序填充，空格隔开
内边距
（与内部内容的距离）
简写：padding: 大小 (大小) (大小) (大小);
分写：padding-top/bottom//left/right: 大小;
(单位px)
如：.box {
padding: 20px（上、下） 15px（左、右）;
}
.box {
padding: 20px（上） 10px（左、右） 15px（下）;
}
值不足4位（可以0占位）的以顺时针对边的顺序填充，空格隔开
.p {
padding-left（左）: 50px;
}
外边距
（与外部内容的距离）
简写：marin: 大小 (大小) (大小) (大小);
分写：margin-top/bottom/left/right: 大小;
(单位px)
如：.box {
margin: 20px（上、下） 15px（左、右）;
}
.box {
margin: 20px（上） 10px（左、右） 15px（下）;
}
值不足4位（可以0占位）的以顺时针对边的顺序填充，空格隔开
.p {
margin-left（左）: 50px;
}
注意：
对span/em/a/strong等行内元素的上下外边距无效
水平居中：
marin: 0 auto;
或
margin: auto;
或
margin-left: auto;（仅该条时，盒子靠右）
margin-right: right;（仅该条时，盒子靠左）
并列元素的外边距折叠问题：由较大值控制， 见PPT
嵌套块级元素的外边距塌陷问题的解决：父级添加上边框/上内边距/overflow: hidden， 见PPT
尺寸计算
box尺寸随内容增加而变化，可能超过100px：.box {
width: 100px;
height: 100px;
box-sizing: content-box;
}
box尺寸不随内容增加而变化，从边框开始计算始终为设定的宽、高：
.box {
width: 100px;
height: 100px;
box-sizing: border-box;
}
背景基础属性
.box {width: 500px;
height: 500px;
background-color: pink;（颜色）
background-image: url(此处为连接，如./黑马复习/a.jpg);（盒子插入图片）
background-repeat: repeat/no-repeat/repeat-x/repeat-y;（图片是否重复）
background-position: x y/center center/50% 50%;（图片位置，只写一个方位时，y默认center）
background-size: cover（填充长边，覆盖色块）/contain（短边填充）/20px 10px/50% 50%;（图片位置，只写一个px或%时，默认等比例缩放）
background-attachment: scroll（随盒子移动）/fixed（不随盒子移动）注意：当background-position使用方位时，如果background-attachment为fixed，则位置是相较于浏览器的视口固定的，而不是.box元素
复合写法：background: 颜色 图片 重复 固定 位置/尺寸;（可乱序，位置尺寸之间须/）
}见详例：滚动视差
注意css中的html, body样式指令
背景渐变
线性渐变（方向可控）：background(-image): liner-gradient: (to 方向, 颜色 百分比, 颜色 百分比);（可多个颜色）
径向渐变（形状、位置可控）：background(-image): radical-gradient: (形状(at 位置), 颜色 百分比, 颜色 百分比);（可多个颜色）
当需要在文字渐变的同时，填充背景时，需要使用嵌套，见详例阴影
.box {box-shadow: (inset（内阴影必要此指令）) x轴偏移量（必要） y轴偏移量（必要） 模糊半径 扩散半径 颜色;
}
过渡
.box {transition: 过渡属性（如box-shadow/box-sizing/默认所有all） 时间s;
}
样式初始化
重置盒模型
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
重置列表样式
ul,
ol {
list-style: none;
}
重置链接样式
a {
text-decoration: none;
}
最佳实践
注意：
块级元素中，单行文字溢出无法完全显示、需省略时，可如下（本案例）：
.p {
white-space: no-warp;（不换行）
overflow: hidden;（隐藏超出元素的内容）
text-overflow: ellipsis;（超出元素的文本使用省略号代替）
}
块级元素中，多行文字溢出无法完全显示、需省略时，可如下：
.p {
display: -webkit-box;（旧版弹性盒子布局）
-webkit-box-orient: vertical;（内容垂直排列）
overflow: hidden;（隐藏超出元素的内容）
text-overflow: ellipsis;（超出元素的文本使用省略号代替）
-webkit-line-clamp: n;（第n行显示省略号）
}
操作步骤：
1.将图片在ps网站上打开
2.点击左下角放大镜调整大小位置
3.点击左上角裁剪工具，并点击右侧信息
4.将光标定于所需部分的左上角，在信息栏查看宽、高、x、y
5.在css中使用background-image导入图片，根据获取的信息，使用background-position调整图片位置
注意position移动方向的正负值