20170528学习笔记整理

CSS精通(第二章笔记)

1.选择器(selector)：用于从HTML文档中找到应用CSS的元素。

2.selector的种类：类型/后代/类/ID/伪类/通用/子/属性/相邻同胞...

3.最常见的selector:

  ①类型选择器(又称元素/简单选择器)：用于寻找特定类型的元素，如段落、标题元素。

  ②后代选择器：用于寻找特定元素或元素组的后代。

4.ID/类选择器：用于寻找更特定的元素。

5.分析元素之间的差异，避免滥用。

6.伪类：有时候，我们需要根据文档结构之外的其他条件对元素应用样式。

  ①:link和:visited，链接伪类，只能应用于锚元素。

  ②:hover、:focus、:active，动态伪类。

1.link:未访问过的超链接样式。2.visited:访问过的超链接样式。3.hover:鼠标经过某一元素的样式。4.active:元素被激活的样式(click)5.focus:元素获得焦点是的样式(Tab)

7.通用选择器：通配符*{...}

8.高级选择器：

  ①子选择器：只选择元素的直接后代，即子元素。

  ②子选择器在IE7中有个小BUG：如果父元素与子元素之间有HTML注释，就会出问题。

9.①直接应用子选择器②先应用后代选择器，再将其部分应用通用选择器覆盖掉。

10.相邻同胞选择器：可用于定位同一个父元素下某个元素之后的元素。

11.ranking benefit:评级收益

12.除了根据某个属性对元素应用样式之外，还可以根据属性值应用样式。

13.层叠(cascading)重要度次序：

  ①标有!important的用户样式

  ②标有!important的作者样式

  ③作者样式

  ④用户样式

  ⑤浏览器/用户代理应用的样式

14.选择器的特殊性分成4个等级：a,b,c,d

  ①行内样式，a=1

  ②b：ID选择器的数量

  ③c：类/伪类/属性选择器的数量

  ④d：类型/伪元素选择器的数量

<div id="content"><div id="main-content"><h2>Name:</h2><p>yyc</p><div class="news-story"><h2 class="first">Story</h2><p>balala...</p></div></div></div>

#content div#main-content h2{color:gray;}#content #main-content>h2{color:blue;}body #content div[id="main-content"] h2{color:green;}#main-content div.news-story h2{color:orange;}#main-content [class="news-story"] h2{color:yellow;} div#main-content div.news-story h2.first{color:red;}

15.使用类标识页面的类型，使用ID标识特定页面。

16.cascade:有选择性的覆盖。

17.恰当地使用继承可减少代码中选择器的数量和复杂度。

18.使用结构良好的单一CSS的优点？

  增加可读性、易于维护、显著提高下载速度。

  ①多个文件会导致从服务器端发送更多的数据包，这些数据包的数量(而非内容)会影响下载时间。

  ②浏览器只能从一个域同时下载有限数量的文件。

19.

①/*@group general styles(一般性样式)

主体样式/reset样式/anchor/标题/其他元素

----------------------------------------------------------*/

②/*@group helper styles(辅助样式)

表单/通知&错误/一直的条目

----------------------------------------------------------*/

③/*@group page structure(页面结构)

标题、页脚和导航/布局/其他页面结构元素

----------------------------------------------------------*/

④/*@group page components(各个页面)

----------------------------------------------------------*/

⑤/*@group overrides(覆盖)

----------------------------------------------------------*/

20.自我提示：

  ①在样式表的开头添加一个小的颜色查询表。

21.CSS优化器：删除注释和空白，从代码中去除额外的字节。

  *一定要备份带有注释的版本

22.减少文件大小最好的办法：启用服务器端压缩。