我的 CSS 合乎规格，但绘出的版面有误
如果想让大部分的浏览器都能正确绘制标准 HTML/CSS 页面，便须于 HTML 档案中放上完整的正确 DOCTYPE。
新近浏览器都有两种布局模式：
· Quirks 模式：也称为兼容模式，让旧网页能依照以前旧浏览器的方式显现。
· 标准模式：浏览器将依循 W3C 规范决定网页的显示方式。
以 Gecko 为核心的浏览器都有第三种近乎标准模式，其中只有一些些不合规范的地方。
如果你宣告的 DTD 不合标准或过期了，那么浏览器就会进入 Quirks 模式。
以下是常用的 DTD 列表，可以让浏览器进入标准或近乎标准模式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
id 与 class 之间的差别
HTML 元素都可有 id 及 class 属性。id 属性是让你为元素命名的，整个页面中的元素名称也不应有重复；class 属性则可将元素归为某特定类别，通常也会有很多元素属于同一种类别 (意即 class 属性值相同。) CSS 可以让你以 id 或 class 来决定某元素的样式。
如果你想指定某特定单一元素的样式，则应使用 id。
若有很多个元素皆有相同样式，则可使用 class。
这方面的信息亦可参考 CSS 选取符。
恢复某特性的默认值
CSS2 并不提供任何指定某特性默认值的方法，所以要恢复某特性默认值的唯一方法就是重新指定此值。此外你自己得知道默认值是什么，因为 CSS 也没有所谓 default 的关键词。
所以，以选取符撰写样式时须特别注意 (例如以标签名称 p 作为选取符)，或许可以用更明确的选取符 (例如 ID 或 class)。以标签名称作选取符兹事体大，一旦使用便将影响整个网页，而且没有自动恢复默认值的方法。
此外，由于 CSS 具串联特性，指定选取符时通常越明确越好，以免把不相干的元素都牵扯进来。
相依样式
CSS 并不支持「以另一个样式规则为基准」的样式设定法。 (参考 Eric Meyer 所写、关于 CSS 工作小组的说明。) 不过，你可以为某单一元素套上多重样式，制作出类似效果。
套用多重类别
你可以在 HTML 元素的 class 属性里以空格符分隔填上多个样式类别名称，便能同时套用多重类别。
<style type="text/css">
.firstclass { background: black; color: white; }
.secondclass { font-weight: bold; }
</style>
<div class="firstclass secondclass">
... content ...
... content ...
... content ...
</div>
无用样式
即使样式规则已经正确设定完毕，还是可能为浏览器所忽略，此时通常是经过语法及优先权法则判断后的正常现象。
以下是导致样式被略过的常见情形：
· HTML 元素层次问题
· 样式规则重新定义
· 特性的简写法
· 使用 * 选取符
· CSS 明确性
你可以使用 DOM 观察器 的 CSS Style Rules 来检查上述问题。
HTML 元素层次问题
此时 CSS 样式套用与否与元素的层次大有相关，请留意：套用到子元素的样式必定会盖过母元素的样式，跟明确性或 CSS 规则的优先权无关。
#section { font-weight: bold; }
.redtext { font-weight: normal; color: red; }
<div id="section">
粗体、
<span class="redtext">正常红字、</span>
又见粗体
</div>
样式规则重新定义
在 CSS 样式表单中，先后次序非常重要。如果你定义了某规则后又重新定义一次，则晚定义的才算数。
#section { font-weight: bold; }
.redtext { color: red; }
/* 其他规则 */
/* 其他规则 */
/* 其他规则 */
.redtext { color: green; }
<div id="section">
粗体、
<span class="redtext">正常红字？</span>
又见粗体
</div>
特性的简写法
使用简写法来定义样式简明扼要，是个不错的方法。你也可以用简写法设定某组特性中的部分特性值，但须留意其他没写到的部分会自动采用默认值。这表示之前的规则中为某单一特性定义的值可能失效。
#section { font-size: 12px; font-family: Verdana; font-weight: bold; }
.redtext { font: 14px Arial; color: red; }
<div id="section">
采用 Verdana 粗体的 12px 字样；
<span class="redtext">采用 Arial 正常字体的 14px 红字；</span>
还是采用 Verdana 粗体的 12px 字样。
</div>
#section {
font-weight: bold;
font: 12px Verdana; /* 有了这行，font-weight 又回到预设的 normal 了 */
}
使用 * 选取符
* 选取符表示任何元素皆符合，但使用上应多加小心。
body * { font-weight: normal; }
#section { font: 12px Verdana; }
.boldtext { font-weight: bold; }
.redtext { color: red; }
<div id="section">
正常、
<span class="boldtext">
<span class="redtext">正常红字、</span>
</span>
又见正常。
</div>
CSS 明确性
如果某元素会套用好几条规则，则相冲突的特性就要靠规则的明确性来分高下。行内样式（放在 HTML 各卷标的 style 属性中）优先权最高，其次是以 id 做选取符的规则，再其次是以class 套用的类别，最后则是单纯以元素名称当选取符的规则。
div { color: black; }
#orange { color: orange; }
.green { color: green; }
<div id="orange" class="green" style="color: red;">是红的！</div>
|
上一篇
下一篇
All Rights Reserved