CSS常用命名规范及写法详解.docx
- 文档编号:28987543
- 上传时间:2023-07-20
- 格式:DOCX
- 页数:26
- 大小:26.55KB
CSS常用命名规范及写法详解.docx
《CSS常用命名规范及写法详解.docx》由会员分享,可在线阅读,更多相关《CSS常用命名规范及写法详解.docx(26页珍藏版)》请在冰豆网上搜索。
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},在页面中调用 .test{color: #333333},在页面中调用 我在页面中用了多个相同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;"> red;就是内联样式 *ID选择符: 元素的id属性,比如
比如
*伪类(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区用类似以下代码调用。 类以下代码, 本人推荐使用第二种调用方法(外部调用法) 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.指定语言及字符集: 为文档指定语言: 常用的语言定义: 标准的XML文档语言定义: xmlversion=‖1.0″encoding=‖utf-8″? > 针对老版本的浏览器的语言定义: 为提高字符集,建议采用―utf-8‖。 标准的XML文档语言定义: 3.调用样式表: 外部样式表调用: 页面内嵌法: 就是将样式表直接写在页面代码的head区。 如: –body{background: white;color: black;}–>外部调用法: 将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。 外部调用法: 将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。 如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。 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