css 文字下划线_css书写规范以及顺序

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等)

CSS书写规范

1.CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。2.去掉小数点前的“0”    比如：

background-color:rgba(0,0,0,0.5);==>background-color: rgba(0,0,0,.5);

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。2.不建议使用“_”下划线来命名CSS选择器，为什么呢？  1).输入的时候少按一个shift键；  2).浏览器兼容问题 (比如使用_tips的选择器命名，在IE6是无效的)  3).能良好区分JavaScript变量命名(JS变量命名是用“_”)

不要随意使用Id

id在JS是唯一的，不能多次使用

而使用class类选择器却可以重复使用。另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

CSS命名的一些规范

(一)网页内容类

标题: title 摘要: summary

箭头：arrow商标：label

网站标志：logo转角/圆角：corner

横幅广告：banner子菜单：subMenu

搜索：search搜索框：searchBox

登录：login登录条：loginbar

工具条：toolbar下拉：drop

标签页：tab当前的：current

列表：list滚动：scroll

服务：service提示信息：msg

热点：hot新闻：news

小技巧：tips下载：download

栏目标题：title热点：hot

加入：joinus注册：regsiter

指南：guide友情链接：friendlink

状态：status版权：copyright

按钮：btn合作伙伴：partner

投票：vote左右中：left right center

(二)注释的写法:

/* Footer */

内容区

/* End Footer */

(三)id的命名:

        (1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体布局宽度：wrapper

左右中：left right center

        (2)导航

导航：nav

主导航：mainbav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

        (3)功能

标志：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

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)标题栏样式,使用"类别+功能"的方式命名,如

.barnews { }

.barproduct { }

注意事项:

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

推荐的 CSS 书写顺序

//显示属性

display

list-style

position

float

clear

//自身属性

width

height

margin

padding

border

background

//文本属性

color

font

text-decoration

text-align

vertical-align

white-space

other text

content