CSS3--美化网页元素-字体-超链接-div-背景

1.使用CSS样式美化网页文本的意义
（1）有效的传递页面信息
（2）使用CSS样式美化过的页面文本，使页面漂亮、美观、吸引用户
（3）可以很好地突出页面的主题内容，使用户第一眼可以看到页面的主要内容
（4）具有良好的用户体验
编辑文本的标签<span>
用来组合HTML文档中的行内元素的，没有固定的格式表示，只有对应它应用CSS样式时，才会产生视觉上的变化。

字体样式
（1）常见的字体属性：
①font-family：设置字体类型，可同时设置多种字体类型，用英文模式的逗号隔开，每一种都用双引号引起来
注：中英文一起设置时英文要在中文前面
②font-size：设置字体大小，常用单位px（像素），其他单位：in、cm、mm、pt、pc、有时也用百分比。
③font-style：设置字体的风格，有三个值：normal、italic（斜体）、oblique（倾斜）。
④font-weight：设置字体的粗细，有五个值：normal（默认值）、bold（加粗）、bolder（更粗）、lighter（更细）、100…（具体的数值）
⑤font：在一个声明中设置所有字体的属性，各属性之间用空格分开，属性顺序为字体风格字体粗细字体大小字体类型
排版网页文本

常用文本属性、含义及用法：
（1）color：文本颜色，
①（rgb）十六进制：“#FFFFFF”表示白色，“#000000”表示黑色，“#FF0000”表示红色。当两两相同时可缩写为三位
②（rgba）在rgb基础上添加控制alpha透明度的参数，值为0~1，0为完全透明，1为完全不透明，透明度不能为负数。
（2）text-align：文本水平对齐方式，左对齐（left）、居中对齐（center）、右对齐（right）、两端对齐（justify）
（3）text-indent：设置首行文本缩进，单位em或px，中文网页通常设置为2em。这里的缩进单位em是相对单位，其表示的长度相当于本行中字符的倍数，会根据实际大小自适应。
（4）text-height：文本的行高，单位px，也可以是字体的倍数
（5）text-decoration：文本的装饰，四个值：
①none：没有装饰
②underline：设置下划线
③overline：设置上划线
④line-through：设置删除线
（6）vertical-align：垂直对齐，
①middle：设置文本与图片的居中对齐
②top
③bottom
（7）text-shadow：文字阴影，两个作用：产生阴影和模糊主体
语法：text-shadow：color x轴位移（x-offset） y轴位移（y-offset） 模糊半径（blur-radius）
四个参数：
①color：可以是十六进制、rgb、rgba
②x-offset：水平位移量，可为正值（在右边）或负值（在左边）
③y-offset：垂直位移量，可为正值（在底部）或负值（在顶部）
④blur-radius：代表阴影向外模糊的模糊范围，值越大阴影向外模糊的范围就越大，阴影的边缘就越模糊。只能为正值，为0时不具有模糊效果。 可以使用text-shadow属性来给文本制定多个阴影，并且针对每个阴影使用不同的颜色。

2.设置超链接和列表样式
超链接伪类（序号即CSS中的设置顺序）
（1）a:link 单击访问前的超链接样式
（2）a:visited 单击访问后的超链接样式
（3）a:hover 鼠标悬浮其上的超链接样式
（4）a:active 单击未释放的超链接样式
列表样式 四个属性
（1）list-style-type：设置列表项标记的类型
（2）list-style：简写形式，表示在一个声明中设置所有列表的属性，按照typepositionimage的顺序设置
（3）list-style-image：使用图像来替换列表项的标记
（4）list-style-position：设置在何处放置列表项的标记

3.背景样式
认识<div>标签
在使用div标签布局页面时，可以嵌套div，同时可以嵌套列表、段落等各种网页元素。
背景属性
包括背景颜色（background-color）和背景图像（background-image）。
（1）背景颜色使用十六进制。有一个特殊值——transparent（透明度）是默认值
（2）背景图像通常与背景重复（background-repeat）和背景定位（background-position）一起使用
①背景图片：background-image：url（图片路径），特殊值none即不显示背景图片，默认自动向水平和垂直方向重复平铺
②背景重复方式：background-repeat有四个值实现不同的平铺方式
A:repeat：沿水平和垂直两个方向平铺，常用于小图片平铺某个页面的背景或某一块内容的背景
B:no-repeat：不平铺，即背景图像只显示一次，通常用于小图标的显示或只需要显示一次的背景图像
C:repeat-x：只沿水平方向平铺，常用于导航背景、标题背景
D:repeat-y：只沿垂直方向平铺，制作页面中不常用
③背景定位：background-position设置图像在背景中的位置，默认从被修饰的网页元素左上角开始显示图像，也可以使用background-position属性设置背景图像出现的位置，即背景出现的偏移量。

（3）背景background是简写形式
背景尺寸
CSS3中新添加的background-size属性
使用背景图片的注意事项：使用背景图片的那个元素必须有宽和高；背景图片是按照自身的宽和高平铺的，与外面包裹它的元素的宽和高无关。
（1）auto：使用背景图片保持原样，是默认值。不会使图片失真
（2）percentage：用百分比表示，相对于元素宽度设置的
（3）cover：填充整个div，放大后的背景图片显示的不是正中间，需要使用background-position：center设置。搭配使用通常用来设置满屏背景效果，缺点是需要制作一张够大的背景图片，否则在较大分辨率的浏览器中会导致图片失真。
（4）contain：可以让背景图片保持本身的宽高比例，将背景图片缩放到宽度或高度正好适应所定义背景的区域。在某些情况下无法让背景图片填充整个容器的大小，背景图片没处理好会失真。

CSS3渐变
（1）浏览器对CSS3渐变的兼容性

（2）CSS3线性渐变：沿着一条直线过渡，从左到右，从右到左，从上到下等。指定一个方向、起始颜色、结束颜色。
语法：linear-gradient（position，color1，color2，…）
（3）径向渐变（radial-gradient）是圆形或椭圆形渐变，颜色不沿着一条直线变化，而是从一个起点朝所有方向混合。

CSS3内容总结：版权归属：ZhangMengJia