在这篇文章中你能看到有关于 CSS 样式设置的常用属性
1、背景
（1）背景颜色
可以使用 background-color 属性为元素设置背景颜色，它接受任何合法的颜色值，默认是 transparent
注意，background-color 属性不能继承
（2）背景图片
可以使用 background-image 属性为元素设置背景图片，它接受任何合法的 URL，默认是 none
注意，background-image 属性不能继承
（3）背景重复
可以使用 background-repeat 属性对背景图像进行平铺，其可选值如下：
- repeat：默认值，在水平方向和垂直方向上都平铺
- repeat-x：在水平方向上平铺
- repeat-y：在垂直方向上平铺
- no-repeat：不允许图像在任何方向上平铺
（4）背景位置
可以使用 background-position 属性改变图像的位置，其可选值如下：
- top：默认值，将背景图片定位到上方
- bottom：将背景图片定位到下方
- left：默认值，将背景图片定位到左方
- right：将背景图片定位到右方
- center：将背景图片定位到中间
（5）背景大小
可以使用 background-size 属性改变图像的大小，其可选值如下：
- cover：背景图像完全覆盖背景区域，但是图像的某些部分可能无法显示
- contain：背景图像完全适应内容区域
- 长度
- 百分数值
<!DOCTYPE HTML> <html> <head> <style> body { background-image: url(https://cdn.pixabay.com/photo/2015/06/08/14/52/wave-801752_960_720.jpg); background-repeat: no-repeat; background-position: top left; background-size: cover; } </style> </head> <body> <h3>面朝大海，春暖花开</h3> </body> </html>
2、文本
（1）文本颜色
可以使用 color 属性设置文本颜色，它接受任何合法的颜色值
（2）行间间隔
可以使用 line-height 属性设置行间的距离，其可选值如下：
- normal：默认值，定义标准的行间间距
- 长度：设置固定的行间间距
- 数字：将此数字与当前字体尺寸相乘来确定行间间距
- 百分数值：规定基于当前字体尺寸的百分比行间间距
- inherit：从父元素继承
（3）字间间隔
可以使用 letter-spacing 属性改变字间的间隔，其可选值如下：
- normal：设置标准的字间间距，默认值
- 长度：设置固定的字间间距，接受一个长度值，若为正，则增大字间距离；若为负，则减小字间距离
- inherit：从父元素继承
（4）文本对齐
可以使用 text-align 属性控制元素中的文本对齐方式，其可选值如下：
- left：左对齐，即把文本排列到左边，默认值
- right：右对齐，即把文本排列到右边
- center：居中对齐，即把文本排列到中间
- justify：两端对齐，常用于设置打印格式
- inherit：从父元素继承
（5）处理空白
可以使用 white-space 属性定义处理空白的规则，这里的空白指的是空格和回车，其可选值如下：
- normal：默认值，合并空格，忽视回车，允许自动换行
- nowrap：合并空格，忽略回车，不允许自动换行
- pre：保留空格，保留回车，不允许自动换行
- pre-wrap：保留空格，保留回车，允许自动换行
- pre-line：合并空格，保留回车，允许自动换行
- inherit：从父元素继承
<!DOCTYPE HTML> <html> <head> <style> .title { color: deeppink; text-align: center; letter-spacing: 3px; } .author { color: hotpink; text-align: right; line-height: 28px; white-space: nowrap; } .contain { color: cornflowerblue; text-align: left; line-height: 28px; white-space: pre-line; } </style> </head> <body> <h3 class="title">面朝大海，春暖花开</h3> <p class="author"> —— 海子 </p> <p class="contain"> 从明天起，做一个幸福的人 喂马，劈柴，周游世界 从明天起，关心粮食和蔬菜 我有一所房子，面朝大海，春暖花开 从明天起，和每一个亲人通信 告诉他们我的幸福 那幸福的闪电告诉我的 我将告诉每一个人 给每一条河每一座山取一个温暖的名字 陌生人，我也为你祝福 愿你有一个灿烂的前程 愿你有情人终成眷属 愿你在尘世获得幸福 我只愿面朝大海，春暖花开 </p> </body> </html>
（6）文本阴影
可以使用 text-shadow 属性设置文本阴影效果，其可选值如下：
- h-shadow：必需，水平阴影的位置
- v-shadow：必需，垂直阴影的位置
- blur：可选，模糊距离
- color：可选，阴影颜色
<!DOCTYPE HTML> <html> <head> <style> h1 { text-shadow: 5px 5px 5px #888888; } </style> </head> <body> <h1>你好，世界</h1> </body> </html>
（7）文本修剪
可以使用 text-overflow 属性规定当文本溢出时发生的动作，其可选值如下：
- clip：直接修剪文本
- ellipsis：显示省略符号来代表被修剪的文本
- string：显示给定的字符串来代表被修剪的文本
<!DOCTYPE HTML> <html> <head> <style> div { width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid black; } </style> </head> <body> <div>如果这是一段很长很长的文字，那么就会溢出</div> </body> </html>
3、字体
（1）字体系列
可以使用 font-family 属性指定字体系列，在 CSS 中存在两种字体系列：
- 通用字体系列：serif、sans-serif、monospace、cursive、fantasy
- 特定字体系列：例如 Times、Courier 等等
（2）字体风格
可以使用 font-style 属性设置字体风格，其可选值如下：
- normal：文本正常显示
- italic：文本斜体显示
- oblique：文本倾斜显示
- inherit：从父元素继承
（3）字体加粗
可以使用 font-weight 属性设置字体粗细，其可选值如下：
- normal：默认值，定义标准字符
- bold：定义粗体字符
- bolder：比父元素更粗
- lighter：比父元素更细
- inherit：从父元素继承
- 从 100 到 900 的整百数字
（4）字体大小
可以使用 font-size 属性设置字体大小，其可选值如下：
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller：比父元素更小
- larger：比父元素更大
- 长度
- 百分数值
<!DOCTYPE HTML> <html> <body> <p>正常文本</p> <p style="font-family: cursive">草书</p> <p style="font-style: italic">斜体</p> <p style="font-weight: bold">粗体</p> <p style="font-size: large">大字</p> </body> </html>
4、轮廓
（1）颜色
可以使用 outline-color 属性设置轮廓颜色，它接受任何合法的颜色值
（2）样式
可以使用 outline-style 属性设置轮廓样式，其可选值如下：
- none：无轮廓，默认值
- dotted：点状轮廓
- dashed：虚线轮廓
- solid：实线轮廓
- double：双线轮廓
- inherit：从父元素继承
（3）宽度
可以使用 outline-width 属性设置轮廓宽度，其可选值如下：
- thin：细轮廓
- medium：中等轮廓
- thick：粗轮廓
- 长度：指定固定的轮廓粗细
- inherit：从父元素继承
（4）简写属性
为了方便，我们可以只在 outline 属性中设置所有有关轮廓的属性，它们的排列顺序如下：
- outline-color
- outline-style
- outline-width
<!DOCTYPE HTML> <html> <style> h1 { color: deeppink; text-align: center; outline: cornflowerblue solid thin; } </style> <body> <h1> 面 朝 大 海 ， 春 暖 花 开 </h1> </body> </html>
