html第五章css3美化网页总结,第五章：CSS3美化网页元素知识点：

一：网页文本

1.标签是用来组合HTML文档中的行内元素，他没有固定的格式。

2.字体样式：

font-famliy:设置字体类型   font-size：设置字体大小  font-style：设置字体风格  font-weight：设置字体的粗细

font：在一个声明中设置所有字体属性

4.字体的粗细：normal：默认值，标准字样  bold:粗体字体  bolder:更粗字体 ligter：更细的字体

5.字体属性：p span{font:oblique bold 12px “楷体”;}

二:排版网页文本

color：设置文本颜色 text-align：设置元素水平对齐方式  text-indent：设置首行文本缩进 line-height：设置文本的行高

text-decoration：设置文本装饰

1.文本颜色

(1.rgb 以上R G B三个参数，正整数为0~255；百分比的取值为0%~100%，

(2.rgba 在rgb基础上控制了alpha透明度的参数，其中透明通道值为0~1   h1{colo：rgba(0,0,255,0.5)}

2.水平对齐方式

left:文本排列左边  right：文本排列右边 center：文本排列居中 justify：实现两端文本对齐效果

3.首行和行高

p{line-height：28px；text-indent:2em;}

4.文本装饰(text-decoration)

none:默认值，标准文本 underline：设置文本的下划线  overline：设置文本的上划线  line-through:设置文本的删除线

5.垂直对齐方式

1.p,img{vertical-align：middle;}

6.文本阴影

text-shadow：color x轴移动 (x-offset)y轴移动(y-offset) 模糊半径(blur-radius)；

color：阴影颜色，定义绘制阴影时所使用的颜色，如果不设置这个值，则会使文本的颜色作为阴影的颜色。

x-offset:用来指定阴影部分水平位移量，其值可以是正或负，如果为正在右边，为负在左边。

y-offset：用来指定阴影部分垂直位移量，其值可以是正或负，如果为正在右边，为负在左边。

blur-radius:阴影模糊半径，代表阴影向外模糊的模糊范围。值越大阴影向外模糊的范围越大，阴影的边缘就越模糊。这个值

只能是正值，如果为0，表示不具有模糊效果。

三：设置超链接和列表样式

a:link(单机访问前的超链接样式) a:visited(单机访问后的超链接样式) a:hover(鼠标悬浮其上的超链接样式)

a:active(单机未释放的超链接样式)

列表样式：list-style-type：

none:无标记符号 disc：实心圆(默认类型) circle：空心圆  square：实心正方形  decimal：数字

四：背景样式

div布局页面

背景颜色：(background-color)和背景图像(background-image)两种方式。  特殊值：transparent(透明的)

背景图像引入：background-image:url("图片路径")  背景重复方式：(background-repeat)

1.repeat:沿水平和垂直两个方向平铺。

2.no-repeat:不平铺，及图片只显示一次。

3.repeat-x：只沿水平方向平铺。

4.repeat-y：只沿垂直方向平铺。

背景定位：(background-position)

1.Xpos Ypos :像素值

2.X% Y% ：百分比表示背景位置

3.X,Y方向：水平方向关键值(left,center,right)垂直方向关键值(top: center,bottom：)

背景尺寸：background-size:auto；(默认值，无变化。)

：(改成固定像素点)

background-size:cover；(整个图片放大填充)注意：(居中加background-position:center；)

：contain(可以让背景图片保持本身的宽高比例，将背景图片缩放到宽度或高度正好适应定义的区域)

五：CSS3渐变

linear-gradient(position，color，color)

浏览器：TE 加前缀：-ms-

火狐     ：-moz-

谷歌     ：-webkit-

渐变的方向：to bottom :颜色从顶部到底部。 to left:颜色从右到左。  to right：颜色从左到右。

to top left:右下方到左上方。  to top ringht:颜色从左下方到右上方。

to bottom left:颜色从右上方到左下方。 to bottom right:颜色从左上方到右下方

注意：径向渐变radial-gradient。径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个新的

起点朝所以方向混合。