CSS读书笔记(一)

作者: 来源: 更新时间:2013-03-26 11:22:07 点击:

这是开通blog后的第一篇随笔,争取养成勤于记录的好习惯,进入正文,精通CSS 高级Web标准解决方案(第二版)自认为是一本非常不错的css教程,借同事的已经读过几遍,每一遍都会有新的收获。

1.子选择器、相邻同胞选择器

  IE7以及更高版本的IE,FF,Chrome等浏览器都支持这两个选择器。

  子选择器:IE6可以通过后代选择器进行模仿,例:

    #nav>li{/*li样式*/}

    IE6:#nav li{/*li样式*/ } #nav li *{/*重写样式*/}

  相邻同胞选择器:

    h2 + p{

      /*为h2相邻的P元素应用样式。*/

    }

  在IE7中这两个选择器会有bug,如果父元素和子元素之间有HTML注释,就会出问题。

2.伪类

  :link和:visited称为链接伪类,只能应用于锚元素。:hover、:active和:focus称为动态伪类,理论上可以用于任何元素。大多数浏览器都支持这个功能。但是,IE6只注意应用于锚链接的:active和:hover选择器,完全忽略:focus。IE7在任何元素上都支持:hover,但是忽略:active和:focus。

3.属性选择器

  包括IE7的现代浏览器都支持属性选择器。然而,由于IE6不支持属性选择器,可以利用这一点对IE6应用于另外的样式。

  #header{

    /*For IE6*/

  }

  [id="header"]{

    /*For other browser*/  

  }

4.字号继承问题

  如果将主体的字号的值设置之后,页面所有的内容应该是会继承的,但是在IE 和 Netscape在继承表格中的字号方面有问题。解决办法:必须指定表格应该继承字号,或者表格上单独设置字号。

5.IE6的非标准盒模型

  在IE6中width属性不是内容的宽度,而是内容、内边距以及边框宽度的总和。(CSS3中的box-sizing属性可以定义要使用哪种盒模型,但是除了一些非常特殊的场合很少使用这个属性)

6.z-index属性只有在设置了绝对定位的元素才会生效。

7.background-position的用法。

  background-position:left center;

  background-position:100px 100px;

  background-position:20% 20%;(这里的20%是指将图像上距离左上角20%的点定位到父元素上距离左上角20%的位置)

  最好不要将像素或百分比等单位与关键字混合使用。