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; }

 

　　　　　

 

CSS3的chapter3