l 本章简介：
我们在浏览网页时，任何一个网页基本都是以文本和图片传达信息的，因此文本和图片是网页设计中不可缺少的元素，也是网页的重要显示形式。
本章学习设置文字的各种效果，和图片的与文字的混排效果，以及超链接的样式，背景图片的设置等等
l 本章单词：
Font-family 字体类型
Font-size 字体大小
Font-weight 字体粗细
Text-align 文本水平对齐
Text-indent 首行文本缩进
Line-height 文本行高
Text-decoration 文本修饰
Text-shadow 文本阴影
Background-color 背景颜色
Background-image 背景图片
Background-position 背景位置
Background-repeat 背景平铺
List-style 列表类型
Inner-gradient 线性渐变
Radial-gradient 径向渐变
l 5．1 编辑网页文本
文字是最重要的组成部分，通过文字可以传递各种信息，接下来将学习设置字体大小，字体类型，文字颜色，字体风格等关于字体的样式
通过CSS样式设置文本段落的对齐方式，文本与图片的对齐方式，以及文字缩进来排版网页
1. 字体的类型
在CSS中字体的类型是通过 font-family属性来控制的。
p{ font-family: Verdana,"楷体";}
上面同时声明了两种字体
多种字体之间要用英文模式下的逗号分隔。
声明字体时，需要把英文字体放在中文字体的前面，不然无法生效。
在开发中，默认的字体是“宋体”，也是计算机默认的字体。
2. 字体的大小
在网页中，通过字体的大小来突出主体是非常常用的方法，CSS是通过 font-size 来控制字体大小的，常用单位是 px （像素）.
p{ font-size: 30px; }
设置字体的单位还有 in , cm ,mm , pt , pc 还有百分比。
最常用的是单位是 px .
3. 字体的风格
使用 font-style 属性设置的字体风格，属性有三个值：
斜体字体样式 italic
p{ font-style: italic;}
倾斜字体样式 oblique
p{ font-style: oblique;}
标准字体样式 normal
p{ font-style: normal;}
4. 字体的粗细
在网页中让某段文字进行字体的加粗来突出显示也是很常用的方法
默认值，标准的字体 normal；
p{ font-weight: normal;}
粗体字体 bold
p{ font-weight: bold;}
更粗的字体 bolder
p{ font-weight: bolder;}
更细的字体 lighter
p{ font-weight: lighter;}
自定义字体，100 ~ 900， 400= normal ， 700 等于 bold。
p{ font-weight:888;}
5. 字体的属性
前面的几种设置都是单独使用的，实际上CSS如果对同一部分设置多种字体属性时，就需要 font 属性来进行声明，即利用font 属性一次设置字体的所有属性，个属性之间用英文空格分开，
但是需要遵循：字体风格 > 字体粗细> 字体大小 > 字体类型 ，这种顺序。
p{ font: oblique bolder 18px "楷体";}
l 5．2 网页排版
在网页当中，排版的网页文本有：
1. 文本颜色color
在HTML页面当中，颜色统一使用RBG 格式。
也就是 红绿蓝 三原色模式。
p{ color: rgb(255,255,255); }
也有 RGBA模式，它在 RGB基础上增加了控制透明度的参数，透明值为0 ~ 1.
0 是完全透明，1 是完成不透明，并且不能是负数。
p{ color: rgba(123,124,124,1.5); }
2． 水平对齐方式
通过 text-align 属性可以设置文本：
左对齐
p{ text-align: left;}
居中对齐
p{ text-align: center;}
右对齐
p{ text-align: right;}
两端对齐
p{ text-align: justify;}
3． 首行缩进
可以通过 line-indent 来设置首行缩进
p{ text-indent: 28px;}
4． 行高
可以通过 line-height 来设置行高
p{ line-height: 28px;}
5． 文本装饰
标准的文本，none
p{ text-decoration: none;}
文本的下划线
p{ text-decoration: underline;}
文本的上划线
p{ text-decoration: overline;}
文本的删除线
p{ text-decoration: line-through;}
6．垂直对齐方式
在 CSS中通过 vertical-align来设置垂直方向的对齐方式
不过只对表格单元格中的对象使用起作用，对于其他的标签目前浏览器还不支持
在实际的运用中，通常使用 vertical-align 来设置文本和图片的居中对齐。
p{ vertical-align: middle;}
7．文本的阴影
Text-shadow 属性有两个作用，即模糊主题和产生阴影。
Text-shadow : color x轴位移 y轴位移 模糊半径
p{ text-shadow: red 10px 10px 2px; }
l 5．3 超链接伪类
作为HTML中常用的标签，超链接的样式有显著的特殊性，当为某文本或图片设置超链接时
，文本或图片标签将继承超链接的默认样式。
文字添加超链接后将默认出现下划线，单击前文本颜色为蓝色，单击后文本颜色为紫色，正在单击的超链接为红色。
这种颜色的不同就是超链接的默认伪类样式。
a:link 单击访问前的超链接样式
a:link{ color: red; }
a:visited 单击访问后的超链接样式
a:visited{ color: red;}
a:hover 鼠标悬浮上的超链接样式
a:hover{ color: red;}
a:active 单击未释放的超链接样式
a:active{ color: red;}
设置伪类的顺序为：a:link > a:visited > a:hover > a:active。
l 5．4 列表样式
在浏览网页时，使用列表组织网页内容时无所不在的。
CSS列表有四个属性来设置列表样式，分别是：
li{ list-style-type: none;} 无标记符号 li{ list-style-type: disc;} 实心圆，默认类型 li{ list-style-type: circle;} 空心圆 li{ list-style-type: square;} 实心正方形 li{ list-style-type: decimal;} 数字
也可以用用简写的方式：
li{ list-style: none;}
l 5．5 背景样式
在浏览网页时能看到各种各样的背景颜色（background）,有页面整体的图像背景，颜色背景，也有部分的图像背景，颜色背景等。
1． 背景颜色
在CSS中，使用background-color属性设置字体，标签，列表等网页元素的背景颜色。
背景颜色的表示方法和 color 表示方法一样，也是用 16进制的方法来表示
它有一个特殊值 transparent 即透明，也是此属性的默认值。
li{ background-color: red;}
2． 背景图像
除了背景的颜色还能设置背景的颜色，还可以使用图像作为某个元素的背景。
CSS中使用 background-imgage属性设置网页元素的背景图像。
div{ background-image: url("image/title.jpg"); }
如果仅设置背景图像的话，默认图像会自动向水平和垂直两个方向重复平铺。
如果想要控制背景图像的平铺方向的话，则使用 background-repeat 属性来控制。
有四个值为实现不同的平铺的方式：
div{ background-repeat: repeat; } 沿水平和垂直两个方向平铺 div{ background-repeat: no-repeat; } 不平铺，背景图像只显示一次 div{ background-repeat: repeat-x; } 只沿水平方向进行平铺 div{ background-repeat: repeat-y; } 只沿垂直方向进行平铺
3． 背景定位
使用 background-position 可以设置背景图像在背景中的位置。
背景图像默认从被修饰的网页元素的左上角开始显示图像。
也可以使此属性设置背景图像出现的位置，让背景出现一定的偏移
可以使用数值、百分比、关键词、三种方式表示水平和垂直方向的偏移量。
div{ background-position: 200px 100px;} div{ background-position: 30% 10%;}
第一个表示水平位置，第二个表示垂直位置
div{ background-position: left center right;} 水平方向 div{ background-position: top center bottom;} 垂直方向
’
背景样式的CSS属性也可以像 font属性进行简写，
使用 background把多种属性综合声明在一起
div{ background: #FF0000 url("img/title.jpg") 205px 20px no-repeat}
l 5．6 背景的尺寸
背景是使用率很高的一个属性，可以显示实现一些特殊的效果。
但是css的提供的 background功能有时无法满足所有需求。
使用background-size 可以直接对背景图片进行控制
使用背景图片时，那个元素必须有高度和宽度，不然背景图片会显示不出来
背景图片在元素中显示是按自己本身的高度和宽度来平铺的，和外面的高宽无关。
1. auto 默认属性，让背景图片保持原样。
div{ background-size: auto; }
2．Cover 填满属性，会充满当前的标签内容。
div{ background-size: cover; }
3．contain 让背景图片保持本身的宽高比例，并将图片缩放到宽度或高度正好适应所定义的背景区域
div{ background-size: contain; }
cover 和 contain 在背景图片没处理好时，都会让图片失真。
只有为默认值 auto 时，背景图片才不会失真。
l 5．7 CSS3 渐变
1. 线性渐变
线性渐变使颜色沿着一条直线过渡：从左到右，从右到左，从上到下等。
第一个属性是方向，第二个和第三个是颜色。
div{ background: linear-gradient(to top,orange,black)}
2． 径向渐变
径向渐变使圆形或或椭圆形渐变，颜色不再是沿着一条直线出发，而是从一个起点像所有的方向混合。
body{ background: radial-gradient(oldlace,darkcyan)}
l 本章总结：
1、使用CSS的字体样式可以设置字体的 大小、类型、风格、粗细等。
2、使用CSS的文本样式可以设置字体的 颜色、对齐方式、首行缩进、行距、文本装饰、文本阴影等。
3、使用CSS的超链接样式可以设置伪类超链接在不同状态下的样式
4、使用CSS的列表属性可以设置列表项的类型
5、使用CSS的的背景属性可以设置页面背景颜色，背景图片，背景尺寸。
6、使用CSS的的渐变效果可以实现背景的多样性。