CSS的常用樣式分為幾大類:

字體樣式（font，color, text-decoration ,text-shadow）

元素樣式（width，height，margin，padding，opacity,盒子模型）

邊框樣式（border ， border-radius ， box-shadow）

段落樣式( line-height , text-align , text-indent , letter-spacing )

背景樣式( background , background-size )

列表樣式（ list-style）

變形樣式 （transform）

過渡動畫 （transition）

自定義動畫（animate）

?

　　字體樣式：

• • 字體名稱——font-family
    

    設(shè)置文字名稱，可以使用多個名稱，或者使用逗號
    分隔，瀏覽器則按照先后順序依次使用可用字體。

    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(字體文件在服務(wù)器上的相對或絕對路徑) format(字體類型); }

    ?

?

　　元素樣式：

• • 寬度和高度——width,height
    p {width:300px;height:200px; }

  • 外邊距——margin

    margin-top	?設(shè)置上邊的外邊距?
    margin-bottom?	?設(shè)置下邊的外邊距
    margin-left?	?設(shè)置左邊的外邊距
    margin-right?	?設(shè)置右邊的外邊距

    div {
    margin:0 auto;
    　　 margin:2px 2px 2px 2px;
    magin:2px 5px 3px;
    magin:2px;
    }
  • 內(nèi)邊距——padding
    

    padding-top	?設(shè)置上邊的內(nèi)邊距?
    padding-bottom?	?設(shè)置下邊的內(nèi)邊距
    padding-left?	?設(shè)置左邊的內(nèi)邊距
    padding-right?	?設(shè)置右邊的內(nèi)邊距

    
    div { padding:0 auto;padding:2px 2px 2px 2px;padding:2px 5px 3px;padding:2px; }
  • 透明度——opacity
    number值為 0.0-1.0 之間的小數(shù)
    div{ opacity:.5; }
  • 盒子模型
    盒子模型就是指CSS布局中的每一個元素，在瀏覽器的解釋中，都被當作一個盒狀物。
    元素最終所占的寬度=左邊框?qū)?+ 左內(nèi)邊距 + 內(nèi)容寬度 + 右內(nèi)邊距 + 右邊框?qū)?br />元素最終所占的高度=上邊框?qū)?+ 上內(nèi)邊距 + 內(nèi)容高度 + 下內(nèi)邊距 + 下邊框?qū)?br />

　　邊框樣式：

• • 邊框線——border-style
    div {
    　　border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset }
  • 邊框?qū)挾取猙order-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; }

?

　　　　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/jiangwenjie/p/5760224.html

總結(jié)

以上是生活随笔為你收集整理的CSS3的chapter3的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。