《CSS权威指南第三版》第一章的读书笔记

第1章 CSS和文档

1.    Web的衰落

·        非结构化页面的缺点：

o   非结构化页面使得建立内容索引极为困难。不易被搜索引擎搜到。

o   缺乏结构性会降低可访问性。

o   高级页面表现需要某种文档结构。

o   结构化标记更易于维护。

2.    CSS作救星

·        CSS的特点：

o   相比HTML有丰富的样式。

o   CSS规则比HTML更加高效，可以集中在文档的某一个位置。

o   能在多个页面上使用样式。

o   规定了冲突规则：层叠。

o   缩减文件大小：样式表集中存储，语法简洁。

o   HTML正受到XML的冲击，XML使用的样式表很可能遵循CSS而且与之非常相似。

3.    元素

元素是文档结构的基础。CSS2.1中，文档中每个元素都对应一个框/box/盒，其中包含元素的内容。

a.    替换元素和非替换元素：第7章详细讨论

                         i.    替换元素是指用来替换元素内容的部分并非由文档内容直接表示，比如图片。

                        ii.    大部分HTML/XHTML元素都是非替换元素，比如段落、标题、表单元格、列表等。

b.    元素显示角色

                  i.   块级元素

块级元素的元素框默认填充父元素的内容区，旁边不能有其他元素。效果如同元素框之前和之后生成了分隔符。HTML中块元素的例子有p和div。

                  ii.     行内元素

行内元素在文本行内生成元素框，而不打断这行文本。如XHTML中的a元素。

HTML和XHTML中块级元素不能嵌套在行内元素中，但CSS中没有任何嵌套限制。

4.    结合CSS和XHTML

除了摆放页面内容，不要忘记页面应当包含有某种结构含义的信息。

a.    link标记

<link rel="stylesheet"type="text/css" href="sheet1.css" media="all"/>

很少用但合法的标记。用于链接样式表和文档。必须放在head元素中。链接的样式表只能有样式规则，不能有如HTML注释的任何其他语言。

                         i.       属性：本书P.20；http://www.w3school.com.cn/tags/tag_link.asp

                        ii.       候选样式表：只有用户选择候选样式表时才会用于文档表现。如不指定title，将作为永久样式表，始终用于文档显示。

b.    style元素

<style type="text/css">

style标签内标记的样式称为文档样式表或嵌套样式表。用于为HTML文档定义样式信息。一定要使用type属性。

c.    @import指令

@import url(sheet2.css);

与link类似，@import用于指示Web浏览器加载一个外部样式表并使用。@import只能出现在style标签中，且一定出现在样式表开头。@import加载的样式表一定会被使用，不能候选。

警告，IE浏览器不会忽略任何位置的@import。

d.    具体的样式规则

嵌套样式表都形如：

h1{color:maroon;}
body{background:yellow;}

·        向后可访问性

较老的浏览器可能无法识别<style>和</style>标签，而将样式声明识别为正常文本。解决办法是将注释开始标记<!--放在style开始标记之后，注释结束标记-->放在style结束标记之前。这样，较老的浏览器会完全忽略style标记和样式声明，因为注释不会显示出来，而能理解CSS的浏览器将正常读取样式表。

<style type="text/css"><!--
@import url(sheet2.css);
h1{color:maroon;}
--></style>

e.    CSS注释

与C/C++注释非常类似，CSS注释用/*和*/包围；类似于C++，注释可以跨行。

注意，CSS注释不能嵌套。

f.     内联样式

只想为单个元素指定一些样式，而不需要嵌套或外部样式表，就可以使用style属性为head或title外的任何标记设置内联样式。与style容器内的声明类似，但大括号要换成双引号。

<p style="color:marron;background:yellow;">

内联只能放一个声明块，不能放整个样式表，因此不能有@import或包含完整的规则。

内联提供了强大的灵活性，但不方便CSS控制整个文档的集中式样式。不推荐使用。