CSS书写顺序

在前端设计中,常常运用xhtml+css进行网页布局,实现了表现与结构的分离。CSS根据作用不同可分为”显示属性”、”自身属性”和”文本属性”,由于CSS是按照自上而下的顺序加载的,所以设计蜂巢建议书写顺序:”显示属性”=>”自身属性”=>”文本属性”。

以下是Mozilla建议的CSS书写顺序:

显示属性

  • display || visibility
  • position
  • top || right || bottom || left
  • z-index
  • clear
  • float

自身属性

  • width
  • max-width || min-width
  • height
  • max-height || min-height
  • overflow || clip
  • margin : margin-top || margin-right || margin-bottom || margin-left
  • padding : padding-top || padding-right || padding-bottom || padding-left
  • outline
  • border
  • border-radius
  • background : background-color || background-image || background-repeat || background-attachment || background-position
  • box-shadow

文本属性

  • color
  • font : font-style || font-variant || font-weight || font-size || line-height || font-family
  • font : caption | icon | menu | message-box | small-caption | status-bar
  • text-overflow
  • text-align
  • text-indent
  • text-shadow
  • letter-spacing
  • white-space
  • vertical-align
  • cursor

“CSS书写顺序”的2个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注