前端开发--CSS层叠样式表
字体属性
CSS 字体属性定义字体，加粗，大小，文字样式
- color 规定文本的颜色
- font-size 设置文本的大小 # chrome浏览器接受的最小字体是12px
- font-weight 设置文本的粗细
| 值 | 描述 |
|---|---|
| blod | 定义粗体字体 |
| bolder | 定义更粗的字体 |
| lighter | 定义更细的字体 |
| 100-900 | 由细到粗，400等同默认， 700等同bold |
- font-style 指定文本的字体样式
| 值 | 描述 |
|---|---|
| normal | 默认值 |
| italic | 定义斜体字 |
- font-family 指定一个元素的字体
每个值用都好分开
如果字体名称包含空格，必须加上引号
背景属性
| 属性 | 描述 |
|---|---|
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-attachment | 设置背景图片是否随着内容滚动还是固定 |
| background-position | 设置背景图片显示位置 |
| background-repeat | 设置背景图片如何填充 |
| background | 复合属性 |
- background-image 属性
元素的背景是元素的总大小，包括填充和边界（不包括外边距）。
默认情况下 background-image 属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的部分
- background-repeat 属性
| 值 | 说明 |
|---|---|
| repeat | 默认值 |
| repeat-x | 只向水平方向平铺 |
| repeat-y | 只向垂直方向平铺 |
| no-repeat | 不平铺 |
- background-size 属性
设置背景图像的大小
| 值 | 说明 |
|---|---|
| length | 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
| percentage | 计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
| cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
| contain | 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 |
- background-position 属性
该属性设置背景图像的其实位置，其默认值是 0% 0%
上下左右中， top bottom left right center
x y 单位可以是% 也可以是 px
- background-attachment 属性
该属性设置背景图像是否固定或者随页面滚动。简单来说就是一个页面有滚动条的话，滑动滚动条背景是固定的还是随着页面滚动
| 值 | 说明 |
|---|---|
| scroll | 背景图片随着页面滚动而滚动 |
| fixed | 背景图片固定 |
文本属性
- text-align
指定元素文本的水平对齐方式
| 值 | 描述 |
|---|---|
| left | 文本居左排列，默认值 |
| right | 右对齐 |
| center | 居中对齐 |
- text-decoration
规定添加到文本的修饰，下划线、上划线、删除线等
| 值 | 描述 |
|---|---|
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
- text-transform
控制文本的大小写
| 值 | 描述 |
|---|---|
| captialize | 每个单词开头大写 |
| uppercase | 字母全部大写 |
| lowercase | 字母全部小写 |
- text-indent
规定文本块中首行文本的缩进
负值是允许的，如果值是复数，将第一行左缩进
列表属性
在 HTML 中有两种类型的列表
有序列表 - 列表项标记有数字或者字母
无序列表 - 列表项标记用特殊的图形 如 小黑点小方块等
- list-style-type
设置列表项标记的类型
| 值 | 描述 |
|---|---|
| none | 无标记 |
| disc | 实心圆 |
| circle | 空心圆 |
| square | 实心方块 |
| decimal | 数字 |
- list-style-image
使用图像来替换列表项的标记
- list-style-position
知识如何相对于对象的内容绘制列表
| 值 | 描述 |
|---|---|
| inside | 列表项标记放置在文本内 |
| outside | 列表项标记防止在文本外 |
- list-style
简写属性在一个生命中设置所有的列表属性
可以设置的属性（按顺序）：
list-style-type, list-style-position,list-style-image
表格属性
- border
表格边框
- border-collapse
设置表格的边框是否被折叠成一个单一的边框或隔开
- width 和 height
定义表格的宽度和高度
- text-align
设置水平对齐方式，向左，右，或者中心
- vertical-align
垂直对齐
如果在表的内容中控制空格之间的边框，应该使用td 和 th 元素的填充属性
其他属性
- letter-spacing
调整字符间距
- line-height
设置行高
- overflow
| 值 | 描述 |
|---|---|
| visible | 默认值 |
| hidden | 超出容器内容被修剪 |
| scroll | 内容会被修剪，但是可以滚动查看剩余内容 |
| auto | 如果内容被修剪，可以滚动查看剩余内容 |
- white-space
指定元素内的空白怎么处理
| 值 | 描述 |
|---|---|
| pre | 空白会被浏览器保存 |
| nowrap | 文本不会换行 |
- verticle-align
设置一个元素的垂直对齐方式
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
| 值 | 描述 |
|---|---|
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| text-bottom | 把此元素底端与父元素字体的底端对齐 |
- opacity
设置整个元素的透明度，取值 0-1
0 表示完全透明，1 表示不透明