CSS学习笔记(三) 样式声明
在这篇文章中你能看到有关于 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>
【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】
