您现在的位置是：首页 > cms教程 > Ecshop商城教程Ecshop商城教程

整理简单的统一CSS命名规则

何望2023-12-21Ecshop商城教程已有人查阅

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

一、CSS文件及样式命名
1、CSS文件命名规范
全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；
2、CSS样式命名规范
容器：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方法：#iytang{color:#333333}，在页面中调用<div id="iytang">内容<div>
CLASS方法：.iytang{color:#333333}，在页面中调用<div class="ityang">内容<div>
id一个页面只可以使用一次，class可以多次引用。
我在页面中用了多个相同id在IE中显示也正常，id和class好象没什么区别，用多个相同id有什么影响吗？
页面存在多个相同的ID影响就是不能通过W3的校验，JS用到多个ID就会错误！
三.使用css缩写
1、margin:1em 0 2em 0.5em; 分别是外边距上、右、下、左；
2、边框：border:1px solid #000;，是border-width:1px;border-style:solid;border-color:#000;的缩写；
3、背景：background:#f00 url(background.gif) no-repeat fixed 0 0;
4、字体：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
5、列表：取消默认的圆点和序号可以这样写list-style:none;
四、区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
五、CSS的优先级
行内样式(inline style) > ID选择符 > 样式(class),伪类(pseudo-class)和属 (attribute)选择符 > 类别(type)，伪对象(pseudo-element)
解释:
*内联样式(inline style)：元素的style属，比如 <div style="color:red;"></div> ,其中的color:red;就是行内样式
*ID选择符：元素的id属，比如 <div id="content"></div> 可以用ID选择符#content
*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.
*属选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素
*类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo的元素
*伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的个单词。
六.多重CSS样式定义，属追加重复最后优先原则
一个标签可以同时定义多个class，也可以是同一个class中重复定义属。例如：
我们先定义两个样式
.one{width:200px;}
.two{border:10px solid #000;}
在页面代码中，我们可以这样调用:
<div class=one two></div>最后优先原则；
七.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：
@import url(main.css);
然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：
@import main.css;
这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》
八、CSS hack
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单独定义一些样式，而不影响主样式表的定义。就象这样：

还有更多的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。