CSS3美化网页

层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
1、字体样式

• font-family

body{font-family: Times,"Times New Roman", "楷体";}
p{font-family:Verdana,"楷体";}

• font-size属性
  单位
  px（像素）
  em、rem、cm、mm、pt、pc

h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}

• font-style属性
  normal、italic和oblique

  
  
  

    
        111111111
    
    
        111111111
    
    
        111111111
    

      .a{
            font-style: normal;
        }
        .b{
            font-style: italic;
        }
        .c{
            font-style: oblique;
        }

• font属性
  字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

  p span{font:oblique bold 12px "楷体";}

2、文本属性

• color属性
  [1] RGB
  十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
  rgb(r,g,b) : 正整数的取值为0～255
  [2] RGBA
  在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

  color:#A983D8;
  color:#EEFF66;
  color:rgb(0,255,255);
  color:rgba(0,0,255,0.5);

• 排版文本段落

  
  
  
• 文本装饰
  text-decoration属性

• 垂直对齐方式
  vertical-align属性：middle、top、bottom

  
  
  
  
  
  
• 文本阴影

text-shadow : color  x-offset  y-offset  blur-radius;
颜色 X轴位移量 Y轴位移量 阴影模糊范围

浏览器兼容性

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

• 背景
  [1] 背景颜色
  background-color 背景颜色值：十六进制方法表示
  [2] 背景图像
  background-image:url(图片路径);
  [3] 背景重复方式
  background-repeat属性
  repeat：沿水平和垂直两个方向平铺
  no-repeat：不平铺，即只显示一次
  repeat-x：只沿水平方向平铺
  repeat-y：只沿垂直方向平铺
  [4] 背景定位
  background-position属性

  
  
  

.title {
    font-size:18px;
    font-weight:bold;
    color:#FFF;
    text-indent:1em;
    line-height:35px;
    background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
/*颜色 图片路径 背景定位 背景不重复显示*/
}

[5] 背景尺寸 background-size

• 渐变
  [1] 线性渐变
  颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
  [2] 径向渐变
  圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

linear-gradient ( position,  color1,  color2,…)
渐变方向 第一种颜色 第二种颜色

*浏览器兼容性

IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-

---

练习

   
 

        

            热播
        
        

            

                
                
神武赵子龙
                
怒，林更新不抱网红抱女神
                
点击次数：242445次
            
            

                
                
旋风十一人
                
胡歌变教练在撩前女友
                
点击次数：242445次
            
            

                
                
太阳的后裔
                
宋慧乔吃嫩草
                
点击次数：242445次
            
            

                
                
山海经之赤影传说
                
娜扎张翰再度联手
                
点击次数：242445次