CSS学习小结

港控/mmm° 2022-06-12 04:24 138阅读 0赞

最近在学习CSS，做个小结，以便以后温故而知新。

一、CSS的出现带来的好处：  
css最大的作用就是消除冗余的样式代码。由于消除了冗余样式代码，带来下面几点极大的好处：  
1、大大减少编码工作量，不必再为每个标签分别设置样式。  
2、样式代码独立，大大提高样式代码的可重用性  
3、实现集中控制、当需要修改代码时，只修改一处即可，从而大大提高代码可维护性。  
4、样式代码变少，代码文件就变小，从而减少传输到客户端的文件容量，节省网络流量、降低服务器压力，提高用户浏览速度。

二、css样式的三种存在方式：  
1、外部样式表，外部样式表通常存储在.CSS文件中。  
2、内部样式表，内部样式表位于<head>标签内部。  
3、内联样式，在html元素的style属性内部。

三、外部样式表的加载优化：  
外部样式表本来是最理想的，它在消除代码冗余、可重用性、可维护性方面达到了最佳的水平。但是应用外部样式表时也存在一个缺点：由于外部样式表存在一个独立的外部文件中，浏览器在加载网页时必须多一次请求，而且这个请求发生在浏览器接收到html文档中的外部样式表存放地址之后。这样会造成延时。个人认为一个改进办法是：不要在html文档中请求加载外部样式表，用动态网页在网页接到请求时把外部样式表“动态嵌入”到html文档中，这样客户端得到的是内部样式表，而在服务器端实际上是外部样式表，可以减少一个请求反应的时间，提高网页加载速度。

四、样式的优先级：  
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。  
 1.浏览器缺省设置  
 2.外部样式表  
 3.内部样式表(位于<head>标签内部)  
 4.内联样式(在HTML元素内部) 注意：如果没有为元素指定样式，元素用浏览器缺省设置时，不同的浏览器的最终表现很可能不一样。所以，为了达到网页在各个浏览器中的一致性，最好不要用到浏览器的缺省设置。  
   
 五、css简单的语法规则：  
 css语法很简单，一个样式表由一条或多条规则组成。每条规则由两部分组成，这两部分是"选择器"和“样式属性名值对”。  
   
 六、选择器(八种)：  
 (一)单一选择器  
 1、元素(标签)选择器  
 2、类选择器  
 3、ID选择器  
 4、属性选择器  
 (二)组合选择器  
 1、选择器分组  
 2、后代选择器  
 3、子元素选择器  
 4、相邻兄弟选择器  
   
七、伪类和伪元素  
伪类和伪元素其实应该叫“伪类选择器”和“伪元素选择器”，它们的出现是为了能方便地选择到普通选择器没法选择到或者很难选择到的特殊对象。  
(一)、伪类伪类：伪类中的类应该是“类选择器”的意思。可以把伪类当做类选择器，只不过这类伪类相对于普通类选择器不同的是：伪类是由系统(CSS规范)预定义的类名，而且只能用在特定的某些元素(标签)中。由于是预定义的,所以必须硬性记住。伪类有如下几个：(1):active (2):focus (3):hover (4):link  (5):visited  (6):first-child  (7):lang (8)::checked  
(二)、伪元素：只有4个：first-letter,:first-line,:before,:after  
(三)、伪类和伪元素的区别：  
     1、伪元素的权重比伪类高，比如一个容器的为元素和伪类都定义了同一属性，但值不一样，那么将采用伪元素的。  
     2、伪类允许在选择器的任何位置，但是伪元素只允许出现在最后一个简单选择器的末尾。  
     3、伪类：伪装的类，页面上有一部分元素可以归为这类。比如:link，可以将页面上所有链接的元素归为这类；伪元素：不能归类，比如:after，不能将页面上所有元素的下一个兄弟节点归为一类，必须指定前置选择器。

备注：有人解释的伪类和伪元素的区别，觉得挺有道理的：  
伪类针对的是某一元素自己的某种“状态”（自身状态）；伪元素则指的是跟选择符所匹配元素相关的“某个元素”；（相关元素）  
比如：: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个)

暂时写到这，以后继续完善......