[CSS基础学习一]整理简单的统一CSS命名规则

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属性，比如 ,其中的color:red;就是行内样式 *ID选择符：元素的id属性，比如 可以用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;} 在页面代码中，我们可以这样调用: 最后优先原则； 七.导入(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。