【1】代码结构、指定样式——《精通CSS‘》
一、基础
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文件时,建议分隔代码。