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 {
         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 { 
        300px; 
        height:100px; 
        border-style:solid; 
        border-1px; 
        border-color:#FF0000; 
    }
    div {
        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; 
    }