第五课 CSS美化网页元素

为什么用CSS

1、有效的传递页面信息

2、使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户

3、可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容

4、具有良好的用户体验

编辑网页文本

<span>标签的作用：能让某几个文字或者某个词语凸显出来

字体样式（font）的书写

 

                                style             weight            size              family

字体属性顺序是：字体风格——字体粗细——字体大小——字体类型

排版网页文本

 

text-align水平对其方式

text-indent文本缩进

line-height文本行高

text-decoration文本装饰

 

vertical-align垂直对齐方式：middle top bottom

text-shadow文本阴影 阴影颜色 x轴位移量 y轴位移量 阴影模糊半径

text-shadow：              color           x               y            blur-radius;

 

使用css的超链接样式设置伪类超链接在不同状态下的样式

列表样式：list-style

li{list-style:none}去除列表前面小黑点

 

背景样式：背景属性和背景尺寸

背景属性background:颜色+图片+重复方式+定位(color+url+repeat+position)

背景图片background-color

背景图像background-image:url(图片路径)

背景定位background-position

背景重复方式background-repeat

背景尺寸background-size

 

css3渐变

使用线性渐变制作网页渐变效果：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

了解径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合