CSS书写顺序
*{
/*显示属性*/
display
position
float
clear
cursor
…
/*盒模型*/
margin
padding
width
height
/*排版*/
vertical-align
white-space
text-decoration
text-align
…
/*文字*/
color
font
content
/*边框背景 为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁,放在最后查看起来方便,哈哈。*/
border
background
}
下表顺序为从上到下,从左到右:
========================
display || visibility
list-style : list-style-type || list-style-position || list-style-image
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 : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position
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
line-height
white-space
vertical-align
cursor
CSS命名规则:
一.文件命名规范
全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;
主要的 master.css
专栏 columns.css
主题 themes.css
主要的 master.css
模块 module.css
基本共用 base.css
表单 forms.css
补丁 mend.css
二.页面结构
容 器: container
页 头:header
内 容:content
页面主体:main
页 尾:footer
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
三.导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu
子菜单:submenu
摘要: summary
四.功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
Container div
#container
容器
Layout
#layout
布局
Header or banner div
#head, #header
页头部分
Footer div
#foot, #footer
页脚部分
Navigation list
#nav
主导航
Sub-navigation list
#subNav
二级导航
Menu
#menu
菜单
Sub Menu
#submenu
子菜单
Left or right side columns
#sidebar_a, #sidebar_b
左边栏或右边栏
Main div
#main
页面主体
Tag
#tag
标签
Message
#msg #message
提示信息
Tips
#tips
小技巧
Vote
#vote
投票
Friend Link
#friendlink
友情连接
Title
#title
标题
Summary
#summary
摘要
Search input
#searchInput
搜索输入框
Search output
#search_output
搜索输出和搜索结果相似
Search
#search
搜索
Search bar
#searchBar
搜索条
Search results
#search_results
搜索结果
Copyright information
#copyright
版权信息
brand
#branding
商标
branding-logo
#logo
LOGO
Site information
#siteinfo
网站信息
Copyright information etc.
#siteinfoLegal
法律声明
Designer or other credits
#siteinfoCredits
信誉
Join us
#joinus
加入我们
Partnership opportunities
#partner
合作伙伴
Services
#service
服务
Regsiter
#regsiter
注册
Arrow
arr/arrow
箭头
Little
#little
标题
Website map
#sitemap
网站地图
List
#list
列表
Home page
#homepage
首页
Sub page
subpage
二级页面子页面
Toolbar
#tool, #toolbar
工具条
Next pulls
#drop
下拉
Next pulls menu
#dorpmenu
下拉菜单
Status
#status
状态
Container div
#container
容器
Header or banner div
#header
页头部分
Main or global navigation div
#mainNav
主导航
Menu
#menu
菜单
Sub Menu
#submenu
子菜单
Left or right side columns
#sidebarA, #sidebarB
左边栏或右边栏
Main div
#main
页面主体
Content div
#content
内容部分
The main content area
#contentMain
主要内容区域
Footer div
#footer
页脚部分
Tag
#tag
标签
Message
#msg #message
提示信息
Tips
#tips
小技巧
Vote
#vote
投票
Friend Link
#friendlink
友情连接
Title
#title
标题
Summary
#summary
摘要
Sub-navigation list
#subNav
二级导航
Search input
#searchInput
搜索输入框
Search output
#searchOutput
搜索输出和搜索结果相似
Search
#search
搜索
Search results
#searchResults
搜索结果
Copyright information
#copyright
版权信息
brand
#branding
商标
branding-logo
#brandingLogo
LOGO
Site information
#siteinfo
网站信息
Copyright information etc.
#siteinfoLegal
法律声明
Designer or other credits
#siteinfoCredits
信誉
Join us
#joinus
加入我们