1、文字字体font-family ：后面可以跟多个字体，浏览器从第一个开始使用，如果不支持，则会尝试使用下一个字体。
2、字体大小font-size：常用的是14px,如果设置成inherit表示继承父元素的大小值。
3、字重font-weight：设置字体的字重，也就是字体的粗细。
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bord | 粗体 |
| border | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
4、文本颜色color：
1、十六进制如FF0000/
2、一个RGB值如RGB(255,0,0)/
3、颜色的名称：yellow
5、文本对齐：text-align文本的对齐方式
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
6、文字装饰text-decoration：用来给文本添加特殊效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
常用的为去掉a标签默认的下划线：
a{text-decoration:none}
7、首行缩进
首行缩进32字符：p{text-indent:32px}
8、
/*背景颜色*/background-color: red;
/*背景图片*/
background-image: url('1.jpg');/* 背景重复 repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺*/
background-repeat: no-repeat;
/*背景位置*/
background-position: right top（20px 20px）;素的text-decoration属性的值。
支持简写：
background:#ffffff url('1.png') no-repeat right top;
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滚动背景图示例</title> <style> * { margin: 0; } .box { width: 100%; height: 500px; background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center; background-attachment: fixed; } .d1 { height: 500px; background-color: tomato; } .d2 { height: 500px; background-color: steelblue; } .d3 { height: 500px; background-color: mediumorchid; } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="d3"></div> </body> </html> 鼠标滚动背景不动
9、边框属性
border-width：边框宽度
border-style：边框类型：实线、虚线、点画线等
border-color：边框颜色
#i1 {
border- 2px;
border-style: solid;
border-color: red;
}}
可以简写为：
#i1 {
border: 2px solid red;
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
}除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
10、display属性
用于控制HTML元素的显示效果
| 值 | 意义 |
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失
11、css盒子模型
1、margin：元素与元素之间的距离，也就是与其他元素周围空间的间隔
2、padding：内容与边框之间的距离
3、border：边框，内边距和内容外的边框
4、content：盒子的内容，显示文本和图像
margin-test 外边距
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;}
可以简写为
.margin-test {margin: 5px 10px 15px 20px;}
顺序为：上下左右
常见居中：.mycenter {margin: 0 auto;}