CSS3的chapter3

CSS的常用样式分为几大类:

1. 字体样式（font，color, text-decoration ,text-shadow）
2. 元素样式（width，height，margin，padding，opacity,盒子模型）
3. 边框样式（border ， border-radius ， box-shadow）
4. 段落样式( line-height , text-align , text-indent , letter-spacing )
5. 背景样式( background , background-size )
6. 列表样式（ list-style）
7. 变形样式 （transform）
8. 过渡动画 （transition）
9. 自定义动画（animate）

　　字体样式：

• • 字体名称——font-family

    设置文字名称，可以使用多个名称，或者使用逗号
    分隔，浏览器则按照先后顺序依次使用可用字体。

    p { font-family:‘宋体‘，‘黑体‘, ‘Arial’ }

  • 字体大小——font-size

    p { font-size:14px;}    

  • 字体加粗——font-weight

    p { font-weight:bold ||normal || bolder || lighter || length;}

  • 字体斜体——font-style

    p { font-style: italic || oblique || normal; } 

  • 字体缩写

    p{
        font-style:italic;
        font-weight:bold;
        font-size:14px;
        line-height:22px;
        font-family:宋体;
    }
    
    p { font:italic bold 14px/22px 宋体}

  • 字体颜色——color

    p{color:#FF0000 || rgba(255,0,0,.5) || red || rgb(255,0,0);}

  • 文本装饰线条——text-decoration

    p{
      text-decoration : none || underline || blink || overline || line-  through
    }

  • 文字阴影——text-shadow
    

    h-shadow	必需。水平阴影的位置。允许负值。
    v-shadow	必需。垂直阴影的位置。允许负值。
    blur	可选。模糊的距离。
    color	可选。阴影的颜色。

    h1{
        text-shadow: 2px 2px #ff0000;
    }

  • 嵌入字体——@font-face

    @font-face {
        font-family : 自定义字体名称;
        src : url(字体文件在服务器上的相对或绝对路径)  format(字体类型);
    }

　　元素样式：

• • 宽度和高度——width,height

    p {
         width:300px;
         height:200px;
    }

  • 外边距——margin
    

    margin-top	设置上边的外边距
    margin-bottom	设置下边的外边距
    margin-left	设置左边的外边距
    margin-right	设置右边的外边距

    div {      margin:0 auto;　　 margin:2px 2px 2px 2px;     magin:2px 5px 3px;    magin:2px;}

  • 内边距——padding
    

    padding-top	设置上边的内边距
    padding-bottom	设置下边的内边距
    padding-left	设置左边的内边距
    padding-right	设置右边的内边距

    div {
        padding:0 auto;
    　  padding:2px 2px 2px 2px;
        padding:2px 5px 3px;
        padding:2px;
    }

  • 透明度——opacity
    number值为 0.0-1.0 之间的小数

    div{ opacity:.5; }                           

  • 盒子模型
    盒子模型就是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。
    元素最终所占的宽度=左边框宽 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽
    元素最终所占的高度=上边框宽 + 上内边距 + 内容高度 + 下内边距 + 下边框宽
    

　　边框样式：

• • 边框线——border-style

    div
    {　　border-style : none | hidden | dotted | dashed | solid | double   | groove | ridge | inset  | outset
    }

  • 边框宽度——border-width

    div{
        order-width : medium | thin | thick | length
    }

  • 边框颜色——border-color

    div{
         border-color:red;
    }

  • 缩写

    div {
        width:300px;
        height:100px;
        border-style:solid;
        border-width:1px;
        border-color:#FF0000;
    }
    div {
        width:300px;
        height:100px;
        border:1px solid #FF0000;
    }

  • 圆角效果——border-radius

    div{
            border-radius:50%
            border-radius:10px;
            border-radius: 5px 4px 3px 2px;
    }

  • 边框图片——border-image

    div {
         border: 10px solid gray;
         border-image: url(test.png) 10px;
    }