CSS常用命名规范及写法详解.docx

width:

200px;

border:

10pxsolid#000;

CSS常用命名规范及写法详解第5页共16页

background:

url（images/imgB.jpg）no-repeatlefttop;因为，当应用两个或多个样式时，浏览器所应用的样式根据是属性追加重复最后优先原则

就是说两个或多个或重复的样式名定义，浏览器所应用的样式是按先后顺序的，如果定义了重复

的属性值，以最后定义的为准，如果应用了两个或多个样式名，里面不重复定义的

属性值就追加上去，重复的属性值就以最后一个为准。

这里要注意的是，样式的先后不是根据页

面上应用的名字顺序，而是样式表里的样式顺序。

十、CSS的调用

页面内嵌法:

就是将样式表直接写在页面代码的head区。

类似这样:

--body{background:

white;color:

black;}-->

外部调用法:

将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

"@import"命令方法:

类以下代码,@importurl（css/style01.css）;

本人推荐使用第二种调用方法（外部调用法）

CSS常用命名规范及写法详解第6页共16页

CSS设计网页时的一些常用规范CSS命名规范

一（文件命名规范

全局样式:

global.css;

框架布局:

layout.css;

字体样式:

font.css;

链接样式:

link.css;

打印样式:

print.css;

二（常用类/ID命名规范

页眉:

header

内容:

content

容器:

container

页脚:

footer

版权:

copyright

导航:

menu

主导航:

mainMenu

子导航:

subMenu

标志:

logo

标语:

banner

标题:

title

侧边栏:

sidebar

图标:

Icon

注释:

note

搜索:

search

按钮:

btn

登录:

login

链接:

link

信息框:

manage

……

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。

对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写:

诸如―搜索框‖则应命名为―searchInput‖、―搜索图标‖命名这―searchIcon‖、―搜索按钮‖命名为―searchBtn‖……

CSS书写规范及方法

一.常规书写规范及方法

1.选择DOCTYPE:

XHTML1.0提供了三种DTD声明可供选择:

过渡的（Transitional）:

要求非常宽松的DTD，它允许你继续使用HTML4.01的标识（但是要符合xhtml的写法）。

完整代码如下:

DOCTYPEhtmlPUBLIC―-//W3C//DTDXHTML1.0Transitional//EN‖

――>严格的（Strict）:

要求严格的DTD，你不能使用任何表现层的标识和属性，例如

。

完整代码如下:

DOCTYPEhtmlPUBLIC―-//W3C//DTDXHTML1.0Strict//EN‖――>

CSS常用命名规范及写法详解第7页共16页

框架的（Frameset）:

专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。

完整代码如下:

DOCTYPEhtmlPUBLIC―-//W3C//DTDXHTML1.0Frameset//EN‖

――>理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD（XHTML1.0Transitional）是目前理想选择（包括本站，使用的也是过渡型DTD）。

因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2.指定语言及字符集:

为文档指定语言:

为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言;如:

常用的语言定义:

标准的XML文档语言定义:

xmlversion=‖1.0″encoding=‖utf-8″?

>

针对老版本的浏览器的语言定义:

为提高字符集，建议采用―utf-8‖。

标准的XML文档语言定义:

3.调用样式表:

外部样式表调用:

页面内嵌法:

就是将样式表直接写在页面代码的head区。

如:

–body{background:

white;color:

black;}–>外部调用法:

将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

外部调用法:

将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。

如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

4、选用恰当的元素:

根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。

例如，使用P元素来包含文字段落，而不是为了换行。

如果在创建文档时找不到适当的元素，则可以考虑使用通用的div或者是span;

避免过渡使用div和span。

少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式;

尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视;

5、派生选择器:

可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如:

.mainMenuulli{background:

url（images/bg.gif;）}

6、辅助图片用背影图处理:

这里的‖辅助图片‖是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、CSS常用命名规范及写法详解第8页共16页

提醒的图片。

将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如:

#logo{background:

url（images/logo.jpg）#FEFEFEno-repeatrightbottom;}

7、结构与样式分离:

在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写:

页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。

如:

divid=‖mainMenu‖>

• 首页
• 介绍
• 服务

/*=====主导航=====*/

#mainMenu{

width:

100%;

height:

30px;

background:

url（images/mainMenu_bg.jpg）repeat-x;

}

#mainMenuulli{

float:

left;

line-height:

30px;

margin-right:

1px;

cursor:

pointer;

}

/*=====主导航结束=====*/

9、鼠标手势:

在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为―手形‖时，则将―hand‖换为―pointer‖，即―cursor:

pointer;‖

二（注释书写规范

1、行间注释:

直接写于属性值后面，如:

.search{

border:

1pxsolid#fff;/*定义搜索输入框边框*/

background:

url（../images/icon.gif）no-report#333;/*定义搜索框的背景*/

}

2、整段注释:

分别在开始及结束地方加入注释，如:

/*=====搜索条=====*/

.search{

border:

1pxsolid#fff;

background:

url（../images/icon.gif）no-repeat#333;

}

/*=====搜索条结束=====*/

CSS常用命名规范及写法详解第9页共16页

三（样式属性代码缩写

1、不同类有相同属性及属性值的缩写:

对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。

如:

#mainMenu{

background:

url（../images/bg.gif）;

border:

1pxsolid#333;

width:

100%;

height:

30px;

ove