手记

【css权威指南】学习笔记——css和文档

1.元素

在css中,元素(element)通常有两种形式:替换和非替换。

替换元素(replaced element)是指用来替换元素内容的部分并非由文档内容直接表示。如img元素,它由文档本身之外的一个图像文件来替换。 input元素与之类似。
非替换元素(nonreplaced element),其内容由用户代理(通常是一个浏览器)在元素本身生成的框中显示。段落、标题、表单元格、列表和XHTML中的几乎所有元素都是非替换元素。
除了替换元素和非替换元素,css2.1还使用另外两种基本元素类型:块级(block-level)元素和行内(inline-level)元素。
块级元素生成一个元素框,(默认地)它会填充其父元素的内容区,旁边不能有其他元素,如p和div。替换元素可以是块级元素,不过通常都不是。列表项是块级元素的一个特例。
行内元素在一个文本行内生成元素框,而不会打断这行文本。行内元素最好的例子就是XHTML中的a元素。strong和em也属于行内元素。

2.link标记

为了成功加载一个外部样式表(external style sheet),link必须放在head元素中,但不能放在其他元素内部(如title)。例如:<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />。rel代表“关系”(relation),在这里,关系为stylesheet。type总是设置为text/css。这个值描述了使用link标记加载的数据的类型。href属性的值是样式表的url,可以是绝对url,也可以是相对url。media属性值为all,说明这个样式表要应用于所有表现媒体。css2为这个属性定义了很多可取值。all:用于所有表现媒体;aural:用于语音合成器、屏幕阅读器和文档的其他声音表现;braille:用Braille设备表现文档时使用;embossed:用Braille打印设备打印时使用;handheld:用于手持设备,如个人数字助理或支持web的蜂窝电话;print:为视力正常的用户打印文档时使用,另外还会在显示文档的“打印预览”时使用;projection:用于投影媒体,如发表演讲时显示幻灯片的数字投影仪;screen:在屏幕媒体(如桌面计算机监视器)中表现文档时使用;tty:在固定间距环境(如电传打字机)中显示文档时使用;tv:在电视上显示文档时使用。以上大部分媒体类型在当前的web浏览器中并不支持。其中3个得到最广泛支持的类型是all、screen和print。
还可以定义候选样式表(alternate style sheet)。将rel属性的值设置为alternate stylesheet,就可以定义候选样式表,只有用户选择这个样式表时才会用于文档表现。如果浏览器能使用候选样式表,它会使用link元素的title属性值生成一个候选样式列表。还可以为候选样式表制定同样的title值,把它们分组在一起。

3.@import指令

与link类似,@import用于指示web浏览器加载一个外部样式表,并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。@import出现在style容器中,并且要放在其他css规则之前,否则将根本不起作用。与link一样,可以限制所导入的样式表应用于一种或多种媒体。如@import url(sheet2.css) all; @import url(blueworld.css) screen; @import url(zany.css) projrction,print;

由于一些较老浏览器会忽略其无法识别<style>和</style>, 解决向后可访问性的办法:将声明包含在一个注释标记中。例如:
<style type="text/css"><!--
@import url(sheet2.css);
h1 {color:maroon;}
body {background:yellow;}
--></style>
这样一来,较老的浏览器不仅会将style标记完全忽略,还会忽略声明,因为HTML注释不会显示出来。与此同时,能理解css的浏览器仍能正常地读取样式表。

css权威指南第1章的学习笔记,从中收获了很多。对于以前模棱两可的知识点,有了较为系统全面的认识。千里之行始于足下,明天继续第2章选择器的学习。

16人推荐
随时随地看视频
慕课网APP

热门评论

非常感谢

我觉得现在ie浏览器很多都不用考虑了

感谢分享

查看全部评论