放弃可视化编辑器写CSS 如果有看上篇的例子的CSS时,你可能会问,我在DW中要怎样做才能有像下面这样的CSS呢? .test1,.test2 {color:Purple !important;color:blue;} 手写,在DW也有代码区,而且是有智能提示的,等于半手动写,本人一直用TopStyle,除了对中文的支持不是很好外,各方面都不错。在学C#的那段时间,发现VS.NET写CSS也很不错,就是有点大。 为什么不能用可视化编辑器写CSS呢?理由很简单,手写CSS可以写很多可视化编辑器写不出的样式,刚开始手写可能会不大习惯,可是配合智能提示,写熟了是不会比可视化编辑器点的慢。 想学好CSS就要学会接受各种浏览器的虐待(当然做某些特定只要针对只有IE用户的网站例外),在接受浏览器的虐待的第一步是放弃可视化编辑器。如果不能放弃,后面的很多东西你就只能看看。 各种类型的选择符 为什么要出现不同的选择符呢?个人认为是主是模块化跟重用性。 下面的Element表示元素。 通配选择符 * 像很多语言一样 * 代表所有,一般开始我会在一个CSS的开始时做下面这样的定义:这样定义是把所有的元素的margin跟padding定义为0。例子 * {margin:0; padding:0;} * 也是可以像下面这样用的:把div元素下的所有元素定义。 div * {color:#94439F; } 这样定义时要小心应用,像下面这样的定义是用乘的。例子 ul * {font-size:120%; } 所以大家在用通配选择符出现百分比的定义时要小心。 类型选择符 Element 这个是大家最最常用的吧,说Element可能大家不会知道,看下面的。例子 p {color:blue;} 当然有时 HTML 也搞搞特别的,自定义元素是其中的一种,例子 rotui\:aoao {color:#123456;} 包含选择符 也有人叫派生选择符 Element1 Element2 像刚才的显著 div * 就是,当然还可以像下面这样。例子 p strong {color:blue;} 子对象选择符 Element > Element 这个跟包含选择符有什么不同呢?他只对他的子一级元素有效(IE6还不支持)。例子 p > span { color:red;} 相邻选择器 Element + Element 只对相邻的元素,也就是下一个元素的定义(IE6还不支持)。例子 p + p { border:1px red solid;} ID选择符 #IDName Element#IDName 直接定义HTML的ID名。例子 #csser { border :1px #000 solid;} 类选择符 .className Element.className 这两个有什么不同呢,前一个是定义所有class="className"。例子 .rotui { border:1px #000 solid;} 属性选择符 Element[attr] Element[attr=value] Element[attr~=value] Element[attr|=value] Element[attr] 选择具有attr属性的E1 例子 input[value] {border:1px #000 solid;} Element[attr=value]选择具有attr属性且属性值等于value的元素 例子 input[type=password] {border:1px red solid;} Element[attr~=value]选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于value的Element。这里的value不能包含空格 例子 input[value~="aoao"] {color:red;} Element[attr|=value] 选择具有attr属性且属性值为一用连字符(-)分隔的字词列表,必须是以value开始的元素。 例子 input[value|="rotui"] {color:blue;} PS:以上的IE浏览器看不到. 选择符分组 Element1,Element2 将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。不只只是元素,上面所说的八类选择符跟下面的都可以应用 。例子 th,td {color::1px red solid;} 伪类选择符 Element:link Element:visited Element:hover Element:active Element:focus Element:first-child Element:lang 当然还有定义打印的:first :left :right,这里只介绍屏幕上的。例子:link,:visited,:hover,:active 这四类是常见到的,因为IE的 a 元素支持他。 例子:focus 对象在成为输入焦点(该对象的onfocus事件发生)时出现(IE不支持)。例子 input:focus {color:blue;} :first-child 包含选择符里面的第一个元素的定义。例子div p:first-child {background-color :#ccc;} :lang() 对已指明语言的元素进行定义。例子p:lang(en) {color :Blue;} 伪对象 Element:first-letter Element:first-line Element:before Element:after :first-letter 首字定义,很好理解,就是第一个字。例子 .letter:first-letter {font-size :300%;} :first-line 首行定义,第一行会有效果,换行符( )也可以分割第一行。例子 .letter:first-line {color:red;} :before和:after 在元素之前(before)跟之后(after)配合 content属性添加内容。例子 em:before {content:"我来自CSS";} em:after {content:"我也是CSS里出来的";} 选择符的优先权 那样多个选择符,我怎知道哪个优先权高呢?上一篇只讲到 important 提高优先权,现在再说说选择符的优先权,old9兄的blog已经有了一篇讲到,这里引用一下,也好偷下懒首先就是CSS规则的specificity(特殊性),CSS2.1有一套关于specificity的计算方式,用一个四位的数字串(CSS2是三位)来表示,最终specificity越高的规则越特殊,在优先级判定时也就越有优势。关于specificity的具体计算在各种情况下的数字加成有如下一般规则: 每个ID选择符(#someid),加 0,1,0,0。 每个class选择符(.someclass)、每个属性选择符(形如[attr=”"]等)、每个伪类(形如:hover等)加0,0,1,0 每个元素或伪元素(:firstchild)等,加0,0,0,1 其他选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。 举一些例子吧: h1 {color: red;} /* 只有一个普通元素加成,结果是 0,0,0,1 */ body h1 {color: green;} /* 两个普通元素加成,结果是 0,0,0,2 */ ——后者胜出 h2.grape {color: purple;} /* 一个普通元素、一个class选择符加成,结果是 0,0,1,1*/ h2 {color: silver;} /*一个普通元素,结果是 0,0,0,1 */ ——前者胜出 html > body table tr[id=”totals”] td ul > li {color: maroon;} /* 7个普通元素、一个属性选择符、两个其他选择符,结果是0,0,1,7 */ li#answer {color: navy;} /* 一个ID选择符,一个普通选择符,结果是0,1,0,1 */ ——后者胜出 除了specificity还有一些其他规则 文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如 blah 的样式,而外部定义指经由或 |