Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

CSS設計規範[7]-CSS屬性書寫順序

書寫順序有規律的話,不僅code能簡單一致,而且也能增進維護性,尤其和簡寫搭配之後能更清楚的條列出樣式在做什麼,當以後有需要修改樣式的時候,也不用看半天才找到你要改的樣式。我們的書寫順序是跟簡寫的順序做搭配,知道如何簡寫就知道書寫的順序,例如font和background的書寫順序就是簡寫的書寫順序。

書寫的順序是先以區塊的樣式為優先,再來處理box model、font等等,這就像在建一楝房子一樣,整個結構都先定好了,才開始決定裡面的擺設、裝潢等等。以下列出所有css樣式的順序:

  • 定位樣式 (Position)
    display
    visibility
    position
    top
    right
    bottom
    left
    z-index
    float
    clear
    clip
    overflow
    overflow-x
    overflow-y
  • 清單樣式 (Lists)
    list-style
    list-style-type
    list-style-image
    list-style-position
  • 表格樣式 (Tables)
    table-layout
    caption-side
    border-collapse
    border-spacing
    empty-cells
  • 區塊樣式 (Box Layout)
    width
    max-width
    min-width
    height (若採單行垂直置中技巧時,會把line-height緊跟在height的下面)
    max-height
    min-height
    margin
    margin-top
    margin-right
    margin-bottom
    margin-left
    padding
    padding-top
    padding-right
    padding-bottom
    padding-left
    border
    border-width
    border-style
    border-color
    border-top
    border-top-width
    border-top-style
    border-top-color
    border-right
    border-right-width
    border-right-style
    border-right-color
    border-bottom
    border-bottom-width
    border-bottom-style
    border-bottom-color
    border-left
    border-left-width
    border-left-style
    border-left-color
    outline
    outline-width
    outline-style
    outline-color
    background
    background-color
    background-image
    background-repeat
    background-attachment
    background-position
    background-position-x
    background-position-y
     
  • 文本樣式 (Font and Text)
    color
    font
    font-style
    font-variant
    font-weight
    font-size
    line-height (若採單行垂直置中技巧時,會把line-height緊跟在height的下面)
    font-family
    letter-spacing
    word-spacing
    text-align
    vertical-align
    text-justify
    text-align-last
    text-decoration
    text-indent
    text-transform
    text-shadow
    direction
    writing-mode
    unicode-bidi
    white-space
    word-break
    word-wrap
     
  • 自訂內容 (Generated Content)
    content
    quotes
    counter-reset
    counter-increment

  • 使用者介面 (User Interface)
    cursor
    scrollbar-arrow-color
    scrollbar-base-color
    scrollbar-face-color
    scrollbar-highlight-color
    scrollbar-3dlight-color
    scrollbar-darkshadow-color
    scrollbar-shadow-color
    scrollbar-track-color
    zoom
     
  • 列印樣式 (Printing)
    page-break-before
    page-break-after
    page-break-inside
    windows
    orphans
     
  • 特效樣式 (Special)
    behavior
    filter
    -moz-opacity
    opacity
    -moz-binding

      

 相關參考內容:

 

Leave a Reply

*