博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS读书笔记(一)
阅读量:6536 次
发布时间:2019-06-24

本文共 1171 字,大约阅读时间需要 3 分钟。

这是开通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%的位置)

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

转载于:https://www.cnblogs.com/laren/archive/2013/03/24/css_notes.html

你可能感兴趣的文章
Python版本切换和Pip安装
查看>>
SilverLigth学习笔记--控制 Silverlight控件样式(转)
查看>>
poj3262
查看>>
第四十天笔记
查看>>
4、动态代理
查看>>
Loj #6073.「2017 山东一轮集训 Day5」距离
查看>>
我的TCP/IP学习笔记
查看>>
shell--字符串的截取变量子串串
查看>>
Cas_个人理解
查看>>
UISearchController
查看>>
轮毂电机光电增量编码器的ABZ信号详解
查看>>
TextBox Template
查看>>
Linux MySQL 储存中文失败简单解决办法
查看>>
洛谷——P1330 封锁阳光大学
查看>>
css选择器
查看>>
zabbix-agent配置文件说明
查看>>
linux系统配置之bash shell的配置(centos)
查看>>
linux C 9*9
查看>>
hdu 1695: GCD 【莫比乌斯反演】
查看>>
python的string操作总结
查看>>