《精通CSS：Web标准解决方案》

《精通CSS：Web标准解决方案》

一、基础

　　1.1设计代码的结构

　　　　1.1.1标记简史

　　　　　　千禧年之际，混乱的Web设计业迎来了CSS，标记返璞归真，文档形成语义趋势。

　　　　　　①ID和类名

　　　　　　　　@HTML4作为简单的文档标记语言被创建，而不是界面语言，故没有用于内容区域或导航栏等的专有元素；
　　　　　　　　　　HTML5则解决了部分问题，如header、nav、article、section和footer等结构性元素，以及data input和menu元素等新UI特性。
　　　　　　　　@次优的解决方案是使用这些名称作为ID和类名的命名约定，以此迎接HTML5，并为CSS提供有用得“钩子”(hook)。
　　　　　　　　@ID必须唯一，用于标识特定元素或持久的结构性元素。对于同个类名则可以应用于任意多个元素。

　　　　　　②元素命名

　　　　　　　　@给元素命名时，要尽可能保持名称和表现方式无关。
　　　　　　　　　　即根据“它是什么”给其命名(error、mainNav、intro)，而不是根据“它外观如何”(red、topNav、firstPara)。【让代码更有意义】
　　　　　　　　@本书作者自己的命名习惯是：完全小写、多个单词用连字符分隔(如andy-budd)。

　　　　　　③“多类症”(classitis)

　　　　　　　　@由于类的灵活性导致类常被滥用，可以使用重叠(cascade)识别子元素，而不是每个元素都添加类属性。

　　　　　　④div和span

　　　　　　　　@div是有语义的，部分(division)，用于分隔出文档的有意义区域。span用于行内元素的分组或标识。
　　　　　　　　@应避免“多div症”(divitus)，只在没有现有元素能实现区域分隔时，才使用。像主导航列表，无需添加div。

　　　　1.1.2文档类型、DOCTYPE切换 和 浏览器模式

　　　　　　@DTD(文档类型定义)是一组机器可读的规则。解析网页时，浏览器使用这些规则检查网页的有效性并且采用想要的措施。
　　　　　　@浏览器通过分析页面的DOCTYPE了解使用哪个DTD，由此知道要使用HTML的版本。
　　　　　　@浏览器一般不读取DTD文件，而是识别常见的DOCTYPE声明。HTML5就不需要DTD文件的URL。
　　　　　　@DOCTYPE用于区分遗留文档和符合标准的文档，有两种风格：严格(strict)、过渡(transitional)。

　　　　1.1.3有效性验证

　　　　　　①浏览器模式

　　　　　　　　@浏览器厂商为了确保向后兼容性，创建了两种呈现模式：标准模式和混杂模式(quiks mode)。
　　　　　　　　　　两模式的差异最显著的一个例子是盒模型的差异(IE6和Opera)。
　　　　　　　　　　Mozilla和Safari有第三中模式“几乎标准模式”，在表格处理上以标准模式有细微差异。

　　　　　　②DOCTYPE切换

　　　　　　　　@浏览器根据是否存在DOCTYPE以及使用哪种DTD选择呈现方式。
　　　　　　　　@呈现标准模式：XHTML文档包含形式完整的DOCTYPE；
　　　　　　　　　　　　　　　　HTML4.01包含一个DTD的DOCTYPE 或 包含过渡DTD和URI的DOCTYPE。
　　　　　　　　@呈现混杂模式：HTML4.01包含过渡DTD但无URI的DOCTYPE 或 DOCTYPE不存在/形式不正确；
　　　　　　　　　　　　　　　　IE6中，DOCTYPE不在第一行时。

二、指定样式的应用目标

　　2.1常用选择器

　　　　伪类：用于要根据文档结构之外的条件对元素应用样式时。
　　　　　　链接伪类：:link、visited (只能用于锚元素)
　　　　　　动态伪类：:hover、:focus、:active (理论上用于任何元素)
　　　　　　IE6中，:hover和:active只能用于锚链接，忽略:focus 。
　　　　　　IE7中，:hover可用于任何元素，忽略:focus和:active 。

　　2.2通用选择器

　　　　@作用类似通配符，匹配所有可以元素，用星号表示。
　　　　@与其他选择器配合，可用于对某元素的所有后台应用样式。

　　2.3高级选择器

　　　　虽然IE6-不支持，但由于创建CSS时考虑到向后兼容性，故浏览器不理解某选择器时，会忽略整个规则。

　　　　2.3.1子选择器、相邻同胞选择器

　　　　　　@后代选择器选择一个元素的所有后代，子选择器则选择元素的直接后代，即子元素。
　　　　　　@IE7-Bug：若父元素和子元素之间有注释，使用子选择器会出错；若目标元素间有注释，相邻同胞选择器会出错。
　　　　　　@IE6，通过通用选择器模拟子选择器：先在所有后代中应用你希望子元素具有的样式，再使用通用选择器覆盖子元素的后代上的样式。

#nav li { border: 1px dashed #ccc; }
#nav li * { border:none; }

　　　　2.3.2属性选择器

　　　　　　@根据某个属性是否存在 或 属性的值 寻找元素。IE6-不支持。

　　　　2.3.3层叠、特殊性

　　　　　　@CSS通过一个称为层叠(cascade)的过程 解决同个元素多个规则的情况。层叠给没个规则分配一个重要度。
　　　　　　@层叠的重要度次序：①标有!important的用户样式；②标有!important的作者样式；③作者样式；④用户样式；⑤浏览器/用户代理应用的样式。
　　　　　　　　作者样式由网站开发者编写，用户样式为用户通过浏览器自定义的样式。
　　　　　　　　为了满足特殊的可访问性，有!important标志的用户样式规则是最高的。
　　　　　　@其后，再根据选择器的特殊性 决定规则的次序。具有更特殊选择器的规则优先与一般选择器规则。两个选择器特殊性相同时，后定义的规则优先。

　　　　　　①特殊性

　　　　　　　　@计算：给每种选择器分配一个数字值，将规则的每个选择器的值加起来，计算出规则的特殊性。
　　　　　　　　　　为了确保非常特殊的选择器(ID选择器)不被大量的一般选择器(类型选择器)超越，不以10为基数，而是采用一个更高的未指定的基数。
　　　　　　　　@选择器的特殊性分4个成分等级：a、b、c 和 d：
　　　　　　　　　　行内样式，a=1。
　　　　　　　　　　b = ID选择器总数。
　　　　　　　　　　c = 类、伪类 和 属性选择器总数。
　　　　　　　　　　d = 类型选择器 和 伪元素选择器总数。
　　　　　　　　@用style属性编写的规则比其他的规则都特殊。具有ID选择器的比没有ID选择器的规则特殊......
　　　　　　　　@直接应用与元素的任何样式总会覆盖继承而来的样式，因为继承而来的样式的特殊性为空！

　　　　　　②在大型网站中，为避免覆盖特殊样式，应该保持一般样式非常一般，特殊样式尽可能特殊。

　　　　　　③主体标签上添加类或ID

　　　　　　　　@当希望新页面具有特殊的布局时(覆盖一般样式)，可以给主体元素添加一个类名：

body.news {
    /* 特殊样式 */
}

  　　　　2.3.4继承

　　　　　　常与层叠混淆，继承是应用样式的元素的后代 会继承样式的某些属性(如颜色和字号)。

　　2.4规划、组织 和 维护样式表

　　　　2.4.1对文档应用样式

　　　　　　@添加外部样式表的两种方法：链接 和 导入。

链接和导入 外部样式表

<link rel="stylesheet" type="text/css" href="css.css" />
<style type="text/css">
<--
@import url("css.css");
-->
</style>

 　　　　　　@可以在一个样式表中导入另一个样式表。

　　　　　　@导入样式比链接样式慢。同时也受限于同个域中文件的同时下载数量。使用单一CSS文件时，建议分隔代码。

 

 

 

标签:  DOCTYPE,  选择器,  层叠重要度,  选择器特殊性,  语义