常用的CSS命名规则
书写顺序
1.位置属性(position, top, right, z-index,display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing,color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
属性
显示属性：display/list-style/position/float/clear...
自身属性（盒模型）：width/height/margin/padding/border
背景：background
行高：line-height
文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content...
其他：cursor/z-index/zoom/overflow
CSS3属性：transform/transition/animation/box-shadow/border-radius
链接样式严格按照顺顺序：a:link->a:visited->a:hover->a:active
常用的命名
<页面>page <包>wrap latout <页头>header(head)
<页尾>footer(foot ft) <内容>content(cont) <菜单>menu <导航>nav
<主体>main <子主体>submain <侧栏>sidebar(side) <标志>logo
<广告>banner <标题>title(tit) popo(pop) <图标>icon <注释>note
<按钮>btn <文本>txti <块>block <窗口>window(win) <顶端>tips
页面结构：
- <容器>--container <头>--header <内容>--content、container
<页面主体>--main <页尾>--footer <导航>--nav <侧栏>--sidebar
<栏目>--column <页面外围控制整体布局宽度>--wrapper
<左右中>--left right center
功能
- <标志>--logo <广告>--banner <登陆>--login <登陆条>--loginbar
<注册>--regsiter <搜索>--search <功能区>--shpo <标题>--title
<加入>--joinus <状态>--status <按钮>--btn <滚动>--scroll
<标签页>--tab <文章列表>--list <提示信息>--msg <当前的>--current
<小技巧>-- tips <图标>--icon <注释>--note <指南>--guild
<服务>--service <热点>--hot <新闻>--news <下载>--download
<投票>--vote <友情链接>--link <版权>--copyright
导航
- <导航>nav <主导航>mainnav <子导航>subnav <顶导航>topnav
< 边导航>sidebar <左导航>leftsidebar <右导航>rightsidebar
<菜单>menu <子菜单>submenu <标题>title <摘要>summary
字体规则
- 为了防止文件合并及编码转换时造成问题，字体使用英文名字：黑体（SimHei）、宋体（SimSun）微软雅黑（Microsoft Yahei。几个单词中间有空格组成的必需加引号）
- 字体粗细采用具体数值，粗体bold写为700，正常normal写为400.
- font-size必须以px或者pt为单位，推荐用px（pt为打印字体大小设置）。
class的命名：
- 颜色：使用颜色的名称或者16进制代码，如：
.red{color:red;}
.f60{color:#f60;}
.ff6600{color:#ff6600;}
- 字体大小，直接使用font+字体大小作为名称，如：
.font2px{font-size:12px;}
.font9pt{font-size:9pt}
- 对齐样式，使用对齐目标的英文名称，如：
.left{float:left}
.bottom{float:bottom}
-
标题栏样式，使用“类别+功能”的方式命名。
-
注意事项：
主要的：master.css
模块 ：module.css
基本公用：base.css
布局，版面：layout.css
主题：themes.css
专栏：columns.css
文字：font.css
表单：forms.css
补丁：mend.css
打印：print.css
10个常用的CSS class
-
class="fixed"
用在包含浮动子元素的容器元素清除浮动： .fixed:after{ content:"..."; display:block; height:0; clear:both; visibility:hidden; } -
class="alt"交替的简称
这个class用在一组样式一样的元素，需要为其中的某几个设定单独的样式，比如一组向左浮动的图片中有一张需要向右浮动，就可以使用这个class。
#content img{ float:left; display:inline; margin-rigth:10px; border:1px solid #ccc; padding:1em 0; background:#fff; }
#content img.alt{ float:right; margin-right:0; margin-left:10px; } -
class="selected" 经常用的，用于处理mouseover活选中元素的效果。
<li class="selected"> <a href="/about">About Us</a> <li> -
class="first",class="last" 浏览器支持first-child和last-child这两个伪类之前，用class="first",class="last" 用的地方很多。
-
class="image"用于包含图片的容器元素。
-
class="inner" 大部分用来制造视觉上的额外效果。用来嵌套在容器里的子容器定义样式，（比如制作双背景图片效果）
-
class="link" 用来嵌套一个a标签，和image类似。
-
class=“one”,class="two",class="three"...
用于需要区别每个元素的列表项，比如用移动背景图片来制作导航的菜单。 -
class=“even”,class="odd" 用来实现隔行换样式，一般用在表格和列表·
<ul> <li class="even">Content</li> <li class="odd">Content</li> <li class="even">Content</li> <li class="odd">Content</li> </ul> -
class="section" 一般用在为指定内容中特定部分添加特定的样式
网友评论