在前端设计中,常常运用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
学习了,平时还真没考虑到这些,看来需要学习的还是很多
😎 我也一样