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

  
  

    <span class="a">
        111111111
    </span>
    <span class="b">
        111111111
    </span>
    <span class="c">
        111111111
    </span>

      .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-

---

练习

   <!-- html -->
 <div>
        <h3>
            热播
        </h3>
        <ul>
            <li>
                <img src="image/img1.png" alt="">
                <h4>神武赵子龙</h4>
                <p>怒，林更新不抱网红抱女神</p>
                <p>点击次数：242445次</p>
            </li>
            <li>
                <img src="image/img2.png" alt="">
                <h4>旋风十一人</h4>
                <p>胡歌变教练在撩前女友</p>
                <p>点击次数：242445次</p>
            </li>
            <li>
                <img src="image/img3.png" alt="">
                <h4>太阳的后裔</h4>
                <p>宋慧乔吃嫩草</p>
                <p>点击次数：242445次</p>
            </li>
            <li>
                <img src="image/img4.png" alt="">
                <h4>山海经之赤影传说</h4>
                <p>娜扎张翰再度联手</p>
                <p>点击次数：242445次</p>
            </li>
        </ul>
    </div>

<style>
        /* css */
        * {
            padding: 0;
            margin: 0 auto;
        }

        body div {
            /* border: 1px solid red; */
            padding: 0;
            margin: 0 auto;
            width: 1000px;
        }

        div ul {
            list-style: none;
            padding-top: 10px;
            margin: 0 auto;
        }

        li {
            /* border: green 1px solid; */
            display: inline-block;
            padding: 5px;
            border-radius: 15px;
        }

        div ul li:hover {
            border-color: #dfdfdf;
            border-radius: 10px;
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2);
            background-color: #fff;
        }

        li img {
            border-radius: 15px 15px 0px 0px;
        }

        li h4:nth-of-type(1) {
            /* border: green 1px solid; */
            padding-top: 10px;
            margin: 0 auto;
            font-size: 16px;
            color: gray;
        }

        li p:nth-of-type(1) {
            margin: 0 auto;
            /* border: green 1px solid; */
            padding-top: 5px;
            color: #640000;
            font-size: 14px;
        }

        li p:nth-of-type(2) {
            margin: 0 auto;
            /* border: green 1px solid; */
            padding-top: 5px;
            font-size: 12px;
            color: blue;
        }
    </style>