CSS选择器和相关特性.docVIP

CSS选择器与相关特性 1 XHTML和CSS 1.1 XHTML及编写规则 XHTML是将HTML作为XML进行的一次重新表达。 文档类型定义(Document Type Definition, DTD)说明了解释XHTML的设备应该如何处理这些标签。 每个XHTML网页开始处的DOCTYPE标签，就是用于在标记与DTD之间建立这种关键性的关联。 下面是符合XHTML标准的完整的编码要求： 声明DOCTYPE。DOCTYPE位于页面顶部的开始html标签前面，共有3种DOCTYPE： 严格型(Strict)：所有标记都符合XHTML标准。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtd 过渡型(Transitional)：既有XHTML也包含不推荐使用的HTML。 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/DTD/loose.dtd 框架型(Frameset)：同过渡型，但XHTML中不推荐的框架也有效。 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN /TR/html4/DTD/frameset.dtd 声明XML命名空间： html xmlns=/1999/xhtml lang=en xml:lang=en 声明内容类型。 meta http-equiv=Content-type content=text/html; charset=iso-8859-1 / meta http-equiv=Content-Language content=en-us / 关闭每个标签（无论封闭的还是非封闭的）。 所有标签必须正确嵌套。 行内标签不能包含块级标签。 标签全部小写。 属性必须有值，并且值必须加引号。 在内容中为(lt)和(amp)使用等价的编码符号。 1.2 XHTML模板 见xhtml_templates目录。 1.3 两个XHTML例子 块级元素和行内元素：block_and_inline_elements.html 复杂的结构化XHTML页面：sample_XHTML_markup_ch1.html 1.4 XHTML家族 文档层次类似于家谱或基于页面中XHTML标签嵌套关系的组织结构图： body div id=header img / h3 /h3 /div /body body div img h3 图1. 上段代码的结构图 1.5 CSS的定义 层叠样式表(CSS)中的层叠意味着样式会从文档结构中的一个层次传递到另一个层次，其作用是让浏览器来决定在诸多来源中，为某个标签应用来自哪个来源的样式属性。 所谓样式表，就是一个扩展名为.css的文本文件。样式表的内容就是一组CSS规则的列表。每条规则定义了一个应用到XHTML标记的特定样式，一条规则可以定义段落文本的字体大小、图像周围边框的粗细、标题的位置、背景的颜色等。 2 样式特征 2.1 四种样式应用方式 内联样式（局部样式）： 指通过XHTML的style属性为标签添加的样式。 Demo : inline_style文件夹 嵌入样式（页面样式）： 放在XHTML文档头部中的一组CSS样式。 head titleEmbedded Styles example/title meta http-equiv=Content-type content=text/html; charset=iso-8859-1 / meta http-equiv=Content-Language content=en-us / style type=text/css h1 { font-size: 16px; } p { color:blue; } /style /head 链接样式： 把样式放到一个单独的文档（即样式表）中，然后将它链接到多个页面以便相应的样式具有全局作用范围（整个网站）。 link href=my_style_sheet.css media=screen rel=stylesheet type=text/css / 导入样式 导入样式与链接样式的功能基本相同，仅语法和运作方式上有区别。 采用import方式导入的样式表，在HTML文件初始化时就会被导入到HTML文件内，作为文件的一部分，类似于嵌入样式。而链接样式表则是在HTML的标记需要格式时才以链接的方式引入。 导入样式的写法如下： @import url(sheet1.css); @import u