最近在学习CSS,做个小结,以便以后温故而知新。
一、CSS的出现带来的好处:
css最大的作用就是消除冗余的样式代码。由于消除了冗余样式代码,带来下面几点极大的好处:
1、大大减少编码工作量,不必再为每个标签分别设置样式。
2、样式代码独立,大大提高样式代码的可重用性
3、实现集中控制、当需要修改代码时,只修改一处即可,从而大大提高代码可维护性。
4、样式代码变少,代码文件就变小,从而减少传输到客户端的文件容量,节省网络流量、降低服务器压力,提高用户浏览速度。
二、css样式的三种存在方式:
1、外部样式表,外部样式表通常存储在.CSS文件中。
2、内部样式表,内部样式表位于
三、外部样式表的加载优化:
外部样式表本来是最理想的,它在消除代码冗余、可重用性、可维护性方面达到了最佳的水平。但是应用外部样式表时也存在一个缺点:由于外部样式表存在一个独立的外部文件中,浏览器在加载网页时必须多一次请求,而且这个请求发生在浏览器接收到html文档中的外部样式表存放地址之后。这样会造成延时。个人认为一个改进办法是:不要在html文档中请求加载外部样式表,用动态网页在网页接到请求时把外部样式表“动态嵌入”到html文档中,这样客户端得到的是内部样式表,而在服务器端实际上是外部样式表,可以减少一个请求反应的时间,提高网页加载速度。
四、样式的优先级:
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表(位于
备注:有人解释的伪类和伪元素的区别,觉得挺有道理的:
伪类针对的是某一元素自己的某种“状态”(自身状态);伪元素则指的是跟选择符所匹配元素相关的“某个元素”;(相关元素)
比如::link, :visited, :hover, :active, :focus, :blur, :first-child 这些实际上都是指所选择元素本身的某种状态,伪类。
而:first-letter,:first-line,:before,:after实际上是所选择元素下的文本节点(按照xml概念理念,一个标签对应的是一个元素节点element,而其中的文字是一个文本节点textnode)的第一个字符、第一行字符、所有子元素前面添加的匿名节点和所有子元素后面添加的匿名节点。都不是针对元素本身或本身的某种状态,而是针对相关的另一个元素,伪元素。
八、属性分类(15组共120个属性):
高效应用CSS最关键的就是熟悉CSS的各种属性和以及属性值。为了方便记忆,把CSS属性做如下分组,具体属性请参考CSS手册。
1、背景(6个)
2、文本(12个)
3、字体(8个)
4、边框(30个)
5、轮廓(4个)
6、外边距(5个)
7、内边距(5个)
8、列表(5个)
9、内容生成(4个)
10、尺寸(6个)
11、定位(14个)
12、打印(5个)
13、表格(5个)
14、伪类(7个)
15、伪元素(4个)
暂时写到这,以后继续完善......