CSS文件及样式命名
一、CSS文件及样式命名
1、CSS文件命名规范
全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;
2、CSS样式命名规范
本人建议:用字母、_号工、-号、数字组成,必须 以字母开头,不能为纯数字。为了开发后样式名管理方便 ,大家请用有意义的单词或缩写组合来命名,让同事一看就明白这样式大概是哪一块的,这样就勤俭了查找样式的光阴,例如:
头部样式用header,头部左边,可以用header_left或header_l,还有如果是列结构 的可以这样——box _1of3 (三列中的第一列),box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列),其它的我就不一一举例了,大家按以上规律去命名就好。
下面列出一些常用的命名单词方便 大家应用:(以后大家工作历程中慢慢把自己积累 的单词都共享出来,那大家的命就会更加统一了,就不会有一义多词的情况 了。)
容 器:container/box
头 部:header
主 导 航:mainNav
子 导 航:subNav
顶 导 航:topNav
网站标记:logo
大 广 告:banner
页面中部:mainBody
底 部:footer
菜 单:menu
菜单内容:menuContent
子 菜 单:subMenu
子菜单内容:subMenuContent
搜 索:search
搜索要害字:keyword
搜索领域:range
标签文字:tagTitle
标签内容:tagContent
当前标签:tagCurrent/currentTag
标 题:title
内 容:content
列 表:list
当前地位:currentPath
侧 边 栏:sidebar
图 标:icon
注 释:note
登 录:login
注 册:register
列 定 义:column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)
二、id和class的应用及差别
我们知道在样式表定义一个样式的时候,可以定义id也可以定义class,例如:
ID法子 :#test{color:#333333},在页面中调用<div id="test">内容<div>
CLASS法子 :.test{color:#333333},在页面中调用<div class=subnavitem>Item 1</a></li>>
<li class=subnavitemselected> <a href="http://www.jb51.net/article1/#" class=subnavitemselected> Item 1</a> </li>
<li class=subnavitem> <a href="http://www.jb51.net/article1/#" class=subnavitem> Item 1</a> </li>
</ul>
</div>
这段代码的CSS定义是:
div#subnav ul { }
div#subnav ul li.subnavitem { }
div#subnav ul li.subnavitem a.subnavitem { }
div#subnav ul li.subnavitemselected { }
div#subnav ul li.subnavitemselected a.subnavitemselected { }
你可以用下面的法子 替代上面的代码
<ul id=”subnav”>
<li> <a href="http://www.jb51.net/article1/#>" Item 1</a> </li>
<li class=sel> <a href="http://www.jb51.net/article1/#>" Item 1</a> </li>
<li> <a href="http://www.jb51.net/article1/#>" Item 1</a> </li>
</ul>
样式定义是:
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
用子选择器可以使你的代码和CSS更加简洁 、更加容易涉猎。
如果一个容器里有多个同样的元素,而且这些元素样式都不一样,请避免用这个法子 ,建以采纳不同的class如:
<ul class=”one”><li></li></ul>
<ul class=”tow”><li></li></ul>
十二、不需要 给背景图片路径加引号
为了勤俭字节,我建议不要给背景图片路径加引号,因为引号不是必须 的。例如:
background-image:url(“images
margin:0 auto;
}
但是IE5/Win不能正确 显示这个定义,我们采纳一个非常有用的技术来解决:用text-align属性。就象这样:
body {
text-align:center;
}
#wrap {
width:760px;
margin:0 auto;
text-align:left;
}
第一个body的text-align:center; 规矩定义IE5/Win中body的所有元素居中(其他涉猎器只是将文字居中) ,第二个text-align:left;是将#warp中的文字居左。
十七.导入(Import)和潜藏 CSS
因为老版本涉猎器不支撑 CSS,一个通常的做法是应用 @import技术来把CSS潜藏 起来。例如:
@import url(main.css);
然而,这个法子 对IE4不起作用,这让我很是头疼了一阵子。后来我用这样的写法:
@import main.css;
这样就可以在IE4中也潜藏 CSS了,呵呵,还勤俭了5个字节呢。想领会 @import语法的详细阐明,可以看这里《centricle’s css filter chart》
十八、CSS hack
有些时候,你需要 对IE涉猎器的bug定义一些特别 的规矩,这里有太多的CSS技术 (hacks),我只应用其中的两种法子 ,不管微软在即将发布 的IE7 beta版里是否更好的支撑 CSS,这两种法子 都是最安全的。
1.注释的法子
(a)在IE中潜藏 一个CSS定义,你可以应用子选择器(child selector):
html>body p {
?
}
(b)下面这个写法只有IE涉猎器可以了解(对其他涉猎器都潜藏 )
* html p {
?
}
(c)还有些时候,你盼望 IE/Win有效而IE/Mac潜藏 ,你可以应用反斜线技术:
?
* html p {
declarations
}
?
(d)下面这个写法只有IE7涉猎器可以了解(对其他涉猎器都潜藏 )
*+ html p {
?
}
2.条件注释(conditional comments)的法子
另外一种法子 ,我觉得比CSS Hacks更加经得起考验就是采纳微软的私有属性条件注释(conditional comments)。用这个法子 你可以给IE单独定义一些样式,而不影响主样式表的定义。就象这样:
<!--[if IE]>
<link rel=stylesheet type=text/css href="http://www.jb51.net/style/ie.css" />
<![endif]-->
还有更多的CSS hack大家可以通过网上找找,但是有很多hack都是不符合w3c标准 的,本人根据 以上的hack写了一个能区分IE6、IE7、FF的样式,而且可以符合w3c标准 ,代码如下:
.classname {width:90px!important;width:100px;}
*+html .classname {width:95px!important;}
这样写后在IE6下宽是100px,IE7下是95px,火狐下是90px。
十九.调试技术:层有多大?
当调试CSS产生差错,你就要象排版工人,逐行分析 CSS代码。我通常在出问题的层上定义一个背景色彩,这样就能很明显 看到层盘踞多大空间。有些人建议用border,一般情况 也是可以的,但问题是,有时候border 会增加元素的尺寸,border-top和boeder-bottom会毁坏纵向margin的值,所以应用 background更加安全些。
另外一个经常出问题的属性是outline。outline看起来象boeder,但不会影响元素的尺寸或者地位。只有少数涉猎器支撑 outline属性,我所知道的只有Safari、OmniWeb、和Opera。
二十、CSS代码书写样式
在写CSS代码的时候,对于缩进、断行、空格,每个人有每个人的书写习惯。在经过不断实践后,我抉择采纳下面这样的书写样式:
.classname {
width:100px;
}
当应用联合 定义时,我通常将每个选择器单独写一行,这样方便 在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格,每个定义也单独写一行,分号直接在属性值后,不要加空格。
我习惯在每个属性值后面都加分号,虽然规矩上容许最后一个属性值后面可以不写分号,但是如果你要加新样式时容易忘怀补上分号而产生 差错,所以还是都加对比好。
最后,关闭的大括号}单独写一行。空格和换行有助与涉猎
?