有效的管理CSS样式的CSS模块化思想

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。
Specificity 具体的计算规则：
1.元素的 style 样式属性，加 1,0,0,0。
2.每个 ID 选择符（#id），加 0,1,0,0。
3.每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。
4.每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。
5.其他选择符（例全局选择符 *，子选择符 >），加 0,0,0,0。
最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。除了 Specificity 还有一些其他规则：
6.!important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。
7.如果优先权一样，则按源码中“后来者居上”的原则。
8.由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例全局选择符 * ）。
范例分析：

h1 {color: red;}
/* 只有一个普通元素加成，结果是 0,0,0,1 */

body h1 {color: green;}
/* 两个普通元素加成，结果是 0,0,0,2 */
/*0,0,0,1 小于 0,0,0,2 ，后者胜出*/

h2.grape [...]

阅读全文 »|=TOP=

Posted by 火恋の神父 on 12月 11th, 2008 :: Filed under 技术交流
Tags :: css

用 CSS 突出显示不同类型的链接，区分网站内链和外链

最近把博客指向外部的链接全部启用新窗口打开了，觉得不可能要求大家都像我一样习惯用右键选择新窗口打开！！但又觉得不是很符合“国际标准”，呵呵，大家可能发现像 Google 等网站都是默认在本窗口打开链接的，而 W3C 也将target=”_blank” 排除在了标准之外，据说这样更符合易用性、友好性的用户体验。想想也是，不经过用户同意，没有明确提示就打开一个新窗口的确有点不礼貌。
于是，我们就给用户一个提示，让外部链接看起来不一样，让用户选择是离开当前站点，还是新窗口或新的标签页中打开这个链接。今天，就介绍一下如何用 CSS 实现突出显示不同类型的链接，但这里并没有实现自动让外部链接新窗口打开，因为这不是 CSS 的能力范围之内，但也算是 CSS 应用的一个技巧吧！
这种例子像维基百科就是一个很好的例子，在外部链接旁边加一个小图标，而且对于离站链接的图标已经出现了一种约定：一个框加一个箭头。
实现这种效果最容易的方法是在所有外部链接上加一个类，然后将图标作为背景图像应用。
[quote]
.external{
background: url(images/externalLink.gif) no-repeat right top;
padding-right:10px
}[/quote]
如上面的示例中，给链接设置少量的右填充，从而给图标留出空间，然后将图标作为背景图像应用于右上角。尽管这个方法是有效的，但必须手工地在每个外部链接上添加类，有办法让 CSS 判断链接是否是外部链接吗？确实有办法，我们可以用属性选择器。
CSS3 扩展了属性选择器的功能，提供了子字符串匹配属性选择器，这些选择器允许通过对属性值的一部分和指定的文本进行匹配来寻找元素。
这种技术的工作方式是使用 [att^=val] 属性选择器寻找以文本 http: 开头的所有链接：
[quote]
a[href^="http:"]{
background: url(images/externalLink.gif) no-repeat right top;
padding-right:10px;
}[/quote]
这应该会突出显示所有的外部链接，但也会选中使用绝对 URL 而不是相对 URL 的内部链接，为了避免这个问题，需要重新设置指向自己站点的所有链接。
[quote]
a[href^="http://yoursite.com"],a[href^="http://www.yoursite.com"]{
background-image:none;
padding-right:0;
}[/quote]
大多数符合标准的浏览器都支持这种技术，而老式浏览器（比如 IE6 和更低版本）会忽略它。
当然，我们还可以扩展这种技术，如对邮件也进行突出显示。
[quote]
a[href^="mailto:"]{
background: url(images/email.png) no-repeat right top;
padding-right:10px;
}[/quote]
我们还可以用 CSS 选择器来区分一些下载链接，如一个 PDF 或 Word 文档。这要使用 [att$=val] 属性选择器，它寻找以特定值结尾的属性：
[quote]
a[href$=".pdf"]{
background: url(images/pdfLink.png) no-repeat right top;
padding-right:10px;
}
a[href$=".doc"]{
background: url(images/pdfLink.png) no-repeat right [...]

阅读全文 »|=TOP=

Posted by 火恋の神父 on 12月 5th, 2008 :: Filed under 技术交流
Tags :: css, google, 下载, 图标, 工作, 技巧, 用户体验, 空间, 链接

十个技巧助你解决CSS兼容问题

一、针对firefox ie6 ie7的css样式
　　现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：
#abc { color: #333; } /* Moz */
* html #abc { color: #666; } /* IE6 */
*+html #abc { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
二、CSS布局中的居中问题
　　主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
　　说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
　　但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
　　需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
三、盒模型
#box{
;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
>//for ff
;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}
四、浮动ie6产生的双倍距离
#box{ float:left; ; margin:0 0 0 [...]

阅读全文 »|=TOP=

Posted by 火恋の神父 on 11月 17th, 2008 :: Filed under 技术交流
Tags :: css, DIV, Javascript, 代码, 技巧, 解决, 设计, 链接

CSS浏览器兼容问题其他解决方案

从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名.
CSS技巧
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如：相应的css为 #IamFloat{ float:left; margin:5px; /*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 [...]

阅读全文 »|=TOP=

Posted by 火恋の神父 on 10月 27th, 2008 :: Filed under 技术交流
Tags :: css, DIV, Javascript, XHTML, 代码, 技巧, 方案, 解决, 设计, 链接

经典的Css技巧

使用 line-height 垂直居中
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
清除容器浮动
#main {
overflow:hidden;
}
之前《不要忘记清除DIV浮动》也提到过这样的问题，更多信息可以看这里。
不让链接折行
a {
white-space:nowrap;
}
上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。
始终让 Firefox 显示滚动条
html {
overflow:-moz-scrollbars-vertical;
}
更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持，也可以使用
body, html {
min-height:101%;
}
使块元素水平居中
margin:0 auto;
其实就是
margin-left: auto;
margin-right: auto;
这个技巧基本上所有的 CSS 教科书都会有说明，别忘记给它加上个宽度。Exploer 下也可以使用
body{
text-align: center;
}
然后定义内层容器
text-align: left;
恢复。
隐藏 Exploer textarea 的滚动条
textarea {
overflow:auto;
}
Exploer 默认情况下 textarea 会有垂直滚动条（不要问我为什么）。
设置打印分页
h2 [...]

阅读全文 »|=TOP=

Posted by 火恋の神父 on 08月 26th, 2008 :: Filed under 技术交流
Tags :: css, DIV, UI, 技巧, 经典, 链接

css代码的简写

css缩写的语法，对新手有一定帮助,老鸟就不用看了.
1.1： 0px不需要单位，直接:margin:0
1.2：盒模型的缩写，语法是margin:上右下左;.甚至可以简写成margin:上 (右左) 下,当然右左的值应该是一样的
1.3：css属性的最后一项”;”号省略。（不建议 ^_^）
1.4：字体宽度normal用400代替,bold用700代替。
1.5：16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#0044DD可以缩写为#04D;
1.6：border边框的缩写，语法是border:width style color,类似boder:1px solid red;
1.7：背景background的缩写,语法是color image repeat attachment position.类似:background:#f00 url(background.gif) no-repeat fixed 0 0( 为什么我从不写fixed呢?)
1.8：字体的缩写,类似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最简单font:12px “SimSun”.
1.9：list的属性缩写,语法list-style:square inside url(image.gif) ,不过一般咱们都不用.
1.0：想凑10条, 还真难.就把删除无用换行符和空格算一个吧

阅读全文 »|=TOP=

Posted by 火恋の神父 on 08月 20th, 2008 :: Filed under 技术交流
Tags :: css, 代码, 色彩