CSS美化网页元素

一、学习目标

会使用CSS设置字体样式和文本样式

会使用CSS设置超链接样式

会使用CSS设置列表样式

会使用CSS设置背景样式

会使用CSS设置渐变效果

二、<span>标签

作用：能让某几个文字或者某个词语凸显出来

例：

<p>享受<span class="show">“一站式”</span>教育服务</p>

<p>在鸥鹏兰博，有一群人默默支持你成就

      <span id="dream">IT梦想</span></p>

<p class="bird">选择<span>鸥鹏兰博</span>，成就你的梦想</p>

三、字体样式

font-family（设置字体类型）：body{font-family: Times,"Times New Roman", "楷体";}

font-size（设置字体大小）：span{font-size:12pt;}，h3{font-size:2em;}，h2{font-size:16px;}，strong{font-size:13pc;}（一般是用em）

font-style（设置字体风格）：normal（正常（一般是正体））、italic（斜体）和oblique（正体）

font-weight（设置字体的粗细）：normal（正常大小，一般是400），bold（粗体字体），bolder（更粗的字体），lighter（更细的字体）

font（在一个声明中设置所有的字体属性）：字体属性的顺序（字体风格 -> 字体粗细 -> 字体大小  -> 字体类型）p span{font:oblique bold 12px "楷体";}

四：文本样式

color（设置文本颜色）：color:#EEFF66;color:rgb(0,255,255)（前两位表示红色分量，中间两位表示绿色分量，后面两位表示蓝色分量；rgb格式下是正整数的取值0~255）;color:rgba(0,0,255,0.5);（最后一个可以增加alpha透明度的参数0~1）

text-align（设置元素水平对齐方式）：left（文本排列在左边，默认），right（文本排列在右边），center（文本排列到中间），justify（实现两端对齐文本效果）

text-indent（设置首行文本的缩进）：像语文作文的一样的开头空两格

line-height（设置文本的行高）：文本中间的距离

text-decoration（设置文本的装饰）：none（定义的标准文本），underline（下划线），overline（上划线），line-through（中间划线）

文本阴影：text-shadow : color（阴影部分的颜色）  x-offset（向左偏移量）  y-offset（向下偏移量）  blur-radius（模糊半径：类似于模糊度）;

五、超链接伪类

伪类样式：标签名:伪类名{声明;}

例如：

a:hover {

  color:#B46210;

  text-decoration:underline;

}

a：link（未单击时）

a：visited（单击访问后）

a：hover（鼠标悬浮时）

a：active（鼠标单击未释放时）

设置伪类的顺序：a:link->a:visited->a:hover->a:active

六、列表样式

list-style-type：

none（无标记符号）：可以去除列表前面的小黑点

disc（实心圆，默认类型）

circle（空心圆）

square（实心正方形）

decimal（数字）

list-style-image

七：网页背景

背景颜色：background-color

背景图像：background-image：url（图片的路径）

背景重复方式：background-repeat属性

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

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

背景定位：background-position属性

Xpos（水平位置） Ypos（垂直位置）

X% Y%（使用百分比表示背景的位置）

X、Y方向关键字：水平（left、center、right），垂直（top、center、bottom）

八：渐变

IE浏览器是Trident内核，加前缀：-ms-

Chrome浏览器是Webkit内核，加前缀：-webkit-

例如：-webkit-linear-gradient ( position,  color1,  color2,…)

Safari浏览器是Webkit内核，加前缀：-webkit-

Opera浏览器是Blink内核，加前缀：-o-

Firefox浏览器是Mozilla内核，加前缀：-moz-

语法：linear-gradient ( position,  color1,  color2,…)

九：总结

       网页的美化主要是网页背景加文本、文字样式的一些变化来实现网页美化的差别。CSS美化网页元素主要是要学会编辑网页文本：文本样式的书写，排版网页文本，使用CSS的超链接样式设置伪类超链接在不同状态下的样式，列表的样式，背景样式（属性和尺寸），CSS3渐变。