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

上传人:b****2 文档编号:16889703 上传时间:2023-07-19 格式:DOCX 页数:26 大小:26.55KB
下载 相关 举报
CSS常用命名规范及写法详解.docx_第1页
第1页 / 共26页
CSS常用命名规范及写法详解.docx_第2页
第2页 / 共26页
CSS常用命名规范及写法详解.docx_第3页
第3页 / 共26页
CSS常用命名规范及写法详解.docx_第4页
第4页 / 共26页
CSS常用命名规范及写法详解.docx_第5页
第5页 / 共26页
CSS常用命名规范及写法详解.docx_第6页
第6页 / 共26页
CSS常用命名规范及写法详解.docx_第7页
第7页 / 共26页
CSS常用命名规范及写法详解.docx_第8页
第8页 / 共26页
CSS常用命名规范及写法详解.docx_第9页
第9页 / 共26页
CSS常用命名规范及写法详解.docx_第10页
第10页 / 共26页
CSS常用命名规范及写法详解.docx_第11页
第11页 / 共26页
CSS常用命名规范及写法详解.docx_第12页
第12页 / 共26页
CSS常用命名规范及写法详解.docx_第13页
第13页 / 共26页
CSS常用命名规范及写法详解.docx_第14页
第14页 / 共26页
CSS常用命名规范及写法详解.docx_第15页
第15页 / 共26页
CSS常用命名规范及写法详解.docx_第16页
第16页 / 共26页
CSS常用命名规范及写法详解.docx_第17页
第17页 / 共26页
CSS常用命名规范及写法详解.docx_第18页
第18页 / 共26页
CSS常用命名规范及写法详解.docx_第19页
第19页 / 共26页
CSS常用命名规范及写法详解.docx_第20页
第20页 / 共26页
亲,该文档总共26页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

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

《CSS常用命名规范及写法详解.docx》由会员分享,可在线阅读,更多相关《CSS常用命名规范及写法详解.docx(26页珍藏版)》请在冰点文库上搜索。

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

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

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

CSS常用命名规范及写法详解由于项目中编写文档结构、编写CSS的人员较多,并与程序员协同工作,所以就需要统一开发

规范,根据XHTMl和CSS编织的规范和大多人的习惯,整理了以下针对本项目的一个简单

的开发规范:

一、CSS样式命名规范

建议:

用字母、“_”(下划线)、“-”号、数字组成,必须以字母开头,不能以数字开头。

为了开

发后样式名管理方便,大家请用有意义的单词或缩写组合来命名,让同事一看就明白这样式大概是哪一块的,这样就节省了查找样式的时间,例如:

头部样式用header,头部左边,可以用header_left或headerLeft,还有如果是列结构的可以这

样——box_1of3(三列中的第一列),box_2of3(三列中的第二列)、box_3of3(三列中的第三列),其它的我就不一一举例了,大家按以上规律去命名就好。

常用id的命名:

页头:

header

登录条:

loginbar

标志:

logo

侧栏:

sidebar

广告:

banner

导航:

nav

子导航:

subnav

菜单:

menu

子菜单:

submenu

搜索:

search

滚动:

scroll

页面主体:

main

内容:

content

显示当前所在位置:

breadcrumbs

标签页:

tab

文章列表:

list

提示信息:

msg

小技巧:

tips

栏目标题:

title

加入:

joinus

指南:

guild

服务:

service

热点:

hot

新闻:

news

下载:

download

注册:

regsiter

状态:

status

按钮:

btn

投票:

vote

合作伙伴:

partner

友情链接:

friendlink

页脚:

footer

版权:

copyright

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

(1)页面结构

容器:

container页头:

header内容:

content/container

页面主体:

main

页尾:

footer

导航:

nav

侧栏:

sidebar栏目:

column页面外围控制整体布局宽度:

wrapper

左右中:

leftrightcenter

(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

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

新闻:

news

下载:

download

投票:

vote

合作伙伴:

partner

友情链接:

link

版权:

copyright

css文件命名:

主要的:

master.css

模块:

module.css

基本共用:

base.css

布局,版面:

layout.css

主题:

themes.css

专栏:

columns.css

文字:

font.css

表单:

forms.css

补丁:

mend.css

打印:

print.css

二、id和class的使用及区别

我们知道在样式表定义一个样式的时候,可以定义id也可以定义class,例如:

ID方法:

#test{color:

#333333},在页面中调用内容

CLASS方法:

.test{color:

#333333},在页面中调用内容

id一个页面只可以使用一次,class可以多次引用。

我在页面中用了多个相同id在浏览中显示也正常,id和class好象没什么区别,似乎多个相同id对页面也有什么影响嘛~

但是当你需要用JavaScript或其他脚本通过id来控制这个Box,那就会出现错误。

且页面存在多个相同的ID不能通过W3的校验。

id是一个标签,用于区分不同的结构和内容,就象你的名字,如果一个屋子有2个人同名,就会出现混淆;

class是一个样式,可以套在任何结构和内容上,就象一件衣服;

概念上说就是不一样的:

id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

也就是说建议大家在写XHML+CSS时如果是维一的结构定位的就用id,否则就用class吧(这样让出非结构定位的div块的id让程序员自己定义使用)

web标准希望大家用严格的习惯来写代码。

三、使用css缩写

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。

常用的css缩写的主要规则:

颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:

#000000可以缩写为#000;#336699可以缩写为#369;

盒模型尺寸

1、通常有下面四种书写方法:

property:

value1;表示所有边都是一个值value1;

property:

value1value2;表示top和bottom的值是value1,right和left的值是value2property:

value1value2value3;表示top的值是value1,right和left的值是value2,bottom的值是value3

property:

value1value2value3value4;四个值依次表示top,right,bottom,leftCSS常用命名规范及写法详解第3页共16页

方便的记忆方法是顺时针,上右下左。

具体应用在margin和padding的例子如下:

margin:

1px02px5px;

边框(border)

2、边框的属性如下:

border-width:

1px;

border-style:

solid;(solid代表直线)

border-color:

#000;

可以缩写为一句:

border:

1pxsolid#000;

语法是border:

widthstylecolor;

3、背景(Backgrounds)

背景的属性如下:

background-color:

#f00;

background-image:

url(background.gif);(图片地址)

background-repeat:

no-repeat;(重复反复)

background-attachment:

fixed;(附件:

固定的)

background-position:

00;(背景位置)

可以缩写为一句:

background:

#f00url(background.gif)no-repeatfixed00;

语法是background:

colorimagerepeatattachmentposition;

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

color:

transparent

image:

none

repeat:

repeat

attachment:

scroll

position:

0%0%

4、字体(fonts)

字体的属性如下:

font-style:

italic;

font-variant:

small-caps;

font-weight:

bold;

font-size:

1em;

line-height:

140%;

font-family:

"LucidaGrande",sans-serif;可以缩写为一句:

font:

italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;

注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

5、列表(lists)

取消默认的圆点和序号可以这样写list-style:

none;list的属性如下:

list-style-type:

square;

list-style-position:

inside;

list-style-image:

url(image.gif);可以缩写为一句:

list-style:

squareinsideurl(image.gif);

四、明确定义单位,除非值为0

忘记定义尺寸的单位是CSS新手普遍的错误。

在HTML中你可以只写width=100,但是在CSS中,你必须给一个准确的单位,比如:

width:

100pxwidth:

100em。

只有两个例外情况可以不定义单位:

行高和0值。

除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。

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

五、区分大小写

当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。

为了避免这种错误,我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。

六、取消class和id前的元素限定

当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,class可以在页面中多次使用。

你限定某个元素毫无意义。

例如:

div#id1{}可以写成#id1{}

七、默认值

通常padding和margin的默认值为0,background-color的默认值是transparent。

但是在不同的浏览器默认值可能不同。

为避免冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样:

*{

padding:

0;

margin:

0

}

或者是针对某元素来定义:

body,ul,li,div,span{

padding:

0;

margin:

0

}

八、CSS的优先级

内联样式(inlinestyle)>ID选择符>类选择符(class),伪类(pseudo-class)和属性(attribute)选择符>类别(type),伪对象(pseudo-element)

解释:

*内联样式(inlinestyle):

元素的style属性,比如

red;">

,其中的color:

red;就是内联样式

*ID选择符:

元素的id属性,比如

可以用ID选择符#content*类选择符:

比如

,可以使用类选择符.box

*伪类(pseudo-class):

最常见的是锚(a)伪类,比如a:

link,a:

visited.*属性选择符(attributeselectors):

比如div[class=demo],含有class为demo的div元素*类别选择器(typeselector):

HTML标签选择,比如div.demo,div元素下含有class为demo的元素

*伪对象选择器(pseudo-elementselector):

比如div:

first-letter,div元素下的第一个单词。

九、多重CSS样式定义,属性追加重复最后优先原则

一个标签可以同时定义多个class,也可以是同一个class中重复定义属性。

例如:

我们先定义两个样式

.one{width:

200px;background:

url(images/imgA.jpg)no-repeatlefttop;}

.two{border:

10pxsolid#000;background:

url(images/imgB.jpg)no-repeatlefttop;}

在页面代码中,我们可以这样调用:

这样最终的显示效果是这个div样式是什么呢,,重复的是以哪一个为准呢,,应用到的样式如下:

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

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 医药卫生 > 基础医学

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2