NECcss规范_html/css_WEB-ITnose

1

2

3

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

/* 重置 */

div,p,ul,ol,li{margin:0;padding:0;}

/* 默认 */

strong,em{font-style:normal;font-weight:bold;}

/* 统一调用背景图 */

.m-logo a,.m-nav a,.m-nav em{background:url(images/sprite.png) no-repeat 9999px 9999px;}

/* 统一清除浮动 */

.g-bdc:after,.m-dimg ul:after,.u-tab:after{display:block;visibility:hidden;clear:both;height:0;overflow:hidden;content:'.';}

.g-bdc,.m-dimg ul,.u-tab{zoom:1;}

/* 布局 */

.g-sd{float:left;width:300px;}

/* 模块 */

.m-logo{width:200px;height:50px;}

/* 元件 */

.u-btn{height:20px;border:1px solid #333;}

/* 功能 */

.f-tac{text-align:center;}

/* 皮肤 */

.s-fc,a.s-fc:hover{color:#fff;}

1

2

3

4

5

6

7

8

/* 这里的.itm和.cnt只在.m-list中有效 */

.m-list{margin:0;padding:0;}

.m-list .itm{margin:1px;padding:1px;}

.m-list .cnt{margin-left:100px;}

/* 这里的.cnt和.num只在.m-page中有效 */

.m-page{height:20px;}

.m-page .cnt{text-align:center;}

.m-page .num{border:1px solid #ddd;}

1

2

3

4

5

6

/* 反对：表现化的或没有语义的命名 */

.m-abc .green2{}

.g-left2{}

/* 推荐：使用有语义的简短的命名 */

.m-list .wrap2{}

.g-side2{}

1

2

3

4

5

6

7

8

9

10

/* 两个元件共性的样式 */

.u-tip1,.u-tip2{}

.u-tip1 .itm,.u-tip2 .itm{}

/* 在分别是两个元件各自的样式 */

/* tip1 */

.u-tip1{}

.u-tip1 .itm{}

/* tip2 */

.u-tip2{}

.u-tip2 .itm{}

1

2

3

4

5

6

7

8

9

10

11

/* 单行定义一个选择器 */

.m-list li,.m-list h3{width:100px;padding:10px;border:1px solid #ddd;}

/* 这是一个有嵌套定义的选择器 */

@media all and (max-width:600px){

.m-class1 .itm{height:17px;line-height:17px;font-size:12px;}

.m-class2 .itm{width:100px;overflow:hidden;}

}

@-webkit-keyframes showitm{

0%{height:0;opacity:0;}

100%{height:100px;opacity:1;}

}

1

.m-box{margin:0 10px;background-position:50% 0;}

1

2

.m-box{background:url(bg.png);}

.m-box:after{content:'.';}

1

.m-box{color:#f00;background:rgba(0,0,0,0.5);}

→

显示属性

自身属性

文本属性和其他修饰

display

width

font

visibility

height

text-align

position

margin

text-decoration

float

padding

vertical-align

clear

border

white-space

list-style

overflow

color

top

min-width

background

1

.m-box{position:relative;width:600px;margin:0 auto 10px;text-align:center;color:#000;}

1

2

/* 这里的height和line-height有关联性 */

.m-box{position:relative;height:20px;line-height:20px;padding:5px;color:#000;}

1

.m-box{-webkit-box-shadow:0 0 0 #000;-moz-box-shadow:0 0 0 #000;box-shadow:0 0 0 #000;}

1

2

3

4

5

6

7

8

9

/* 块状注释文字

* 块状注释文字

* 块状注释文字

*/

.m-list{width:500px;}

.m-list li{height:20px;line-height:20px;/* 这里是对line-height的一个注释 */overflow:hidden;}

.m-list li a{color:#333;}

/* 单行注释文字 */

.m-list li em{color:#666;}

1

2

/* IE7会显示灰色#888，IE6会显示白色#fff，其他浏览器显示黑色#000 */

.m-list{color:#000;*color:#888;_color:#fff;}

1

2

3

4

5

6

7

8

9

10

11

12

13

/* 从大到小 */

.m-list p{margin:0;padding:0;}

.m-list p.part{margin:1px;padding:1px;}

/* 从低到高 */

.m-logo a{color:#f00;}

.m-logo a:hover{color:#fff;}

/* 从先到后 */

.g-hd{height:60px;}

.g-bd{height:60px;}

.g-ft{height:60px;}

/* 从父到子 */

.m-list{width:300px;}

.m-list .itm{float:left;}

选择器

等级(a,b,c,d)

style=””

1,0,0,0

#wrapper #content {}

0,2,0,0

#content .dateposted {}

0,1,1,0

div#content {}

0,1,0,1

#content p {}

0,1,0,1

#content {}

0,1,0,0

p.comment .dateposted {}

0,0,2,1

div.comment p {}

0,0,1,2

.comment p {}

0,0,1,1

p.comment {}

0,0,1,1

.comment {}

0,0,1,0

div p {}

0,0,0,2

p {}

0,0,0,1

1

2

3

4

5

6

7

/* 比如我们用下面这个样式来让某个定宽的容器水平居中，我们要的只是left和right，

* 而top和bottom不是这个样式要关心的（如果设置了反倒会影响其他样式在这个容器上的使用），

* 所以这时我们就不需要缩写

*/

.f-mgha{margin-left:auto;margin-right:auto;}

/* 比如下面这个模块的样式设置，我们确实需要设置padding的所有项，于是我们就可以采用缩写 */

.m-link{padding:6px 12px;}

1

2

3

4

/* expression */

.class{width:expression(this.width>100?'100px':'auto');}

/* filter */

.class{filter:alpha(opacity=50);}

1

2

3

4

5

6

7

8

9

10

/* 以下对布局类选择器统一做了清除浮动的操作 */

.g-hd:after,.g-bd:after,.g-ft:after{ display : block ; visibility : hidden ; clear : both ; height : 0; content : "." ;}

.g-hd,.g-bd,.g-ft{ zoom : 1; }

/* 通常background总是会占用很多字节，所以一般情况下，我们都会这样统一调用 */

.m-logo,.m- help ,.m-list li,.u-tab li,.u-tab li a{ background : url (../images/sprite.png) no-repeat 9999px 9999px ;}

.m-logo{ background-position :0 0; }

/* 以下是某个元件的写法，因为确实很多元素是联动的或相关的，所以采用了组合写法，可以方便理解和修改 */

.u-tab li,.u-tab li a{ display : inline ; float : left ; height : 30px ; line-height : 30px ;}

.u-tab li{ margin :0 3px ;}

.u-tab li a{ padding :0 6px ;}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

/* 这是某个模块 */

.m-nav{}/* 模块容器 */

.m-nav li,.m-nav a{}/* 先共性 优化组合 */

.m-nav li{}/* 后个性 语义化标签选择器 */

.m-nav a{}/* 后个性中的共性 按结构顺序 */

.m-nav a.a1{}/* 后个性中的个性 */

.m-nav a.a2{}/* 后个性中的个性 */

.m-nav .z-crt a{}/* 交互状态变化 */

.m-nav .z-crt a.a1{}

.m-nav .z-crt a.a2{}

.m-nav .btn{}/* 典型后代选择器 */

.m-nav .btn-1{}/* 典型后代选择器扩展 */

.m-nav .btn-dis{}/* 典型后代选择器扩展（状态） */

.m-nav .btn.z-dis{}/* 作用同上，请二选一（如果可以不兼容IE6时使用） */

.m-nav .m-sch{}/* 控制内部其他模块位置 */

.m-nav .u-sel{}/* 控制内部其他元件位置 */

.m-nav-1{}/* 模块扩展 */

.m-nav-1 li{}

.m-nav-dis{}/* 模块扩展（状态） */

.m-nav.z-dis{}/* 作用同上，请二选一（如果可以不兼容IE6时使用） */

布局（.g-）

语义

命名

简写

文档

doc

doc

头部

head

hd

主体

body

bd

尾部

foot

ft

主栏

main

mn

主栏子容器

mainc

mnc

侧栏

side

sd

侧栏子容器

sidec

sdc

盒容器

wrap/box

wrap/box

模块（.m-）、元件（.u-）

语义

命名

简写

导航

nav

nav

子导航

subnav

snav

面包屑

crumb

crm

菜单

menu

menu

选项卡

tab

tab

标题区

head/title

hd/tt

内容区

body/content

bd/ct

列表

list

lst

表格

table

tb

表单

form

fm

热点

hot

hot

排行

top

top

登录

login

log

标志

logo

logo

广告

advertise

ad

搜索

search

sch

幻灯

slide

sld

提示

tips

tips

帮助

help

help

新闻

news

news

下载

download

dld

注册

regist

reg

投票

vote

vote

版权

copyright

cprt

结果

result

rst

标题

title

tt

按钮

button

btn

输入

input

ipt

功能（.f-）

语义

命名

简写

浮动清除

clearboth

cb

向左浮动

floatleft

fl

向右浮动

floatright

fr

内联块级

inlineblock

ib

文本居中

textaligncenter

tac

文本居右

textalignright

tar

文本居左

textalignleft

tal

垂直居中

verticalalignmiddle

vam

溢出隐藏

overflowhidden

oh

完全消失

displaynone

dn

字体大小

fontsize

fs

字体粗细

fontweight

fw

皮肤（.s-）

语义

命名

简写

字体颜色

fontcolor

fc

背景

background

bg

背景颜色

backgroundcolor

bgc

背景图片

backgroundimage

bgi

背景定位

backgroundposition

bgp

边框颜色

bordercolor

bdc

状态（.z-）

语义

命名

简写

选中

selected

sel

当前

current

crt

显示

show

show

隐藏

hide

hide

打开

open

open

关闭

close

close

出错

error

err

不可用

disabled

dis