第8章(X)HTML与CSS概述

第8章 X HTML与CSS概述 通过前面的学习 我们已经理解了HTML的核心原理 实际上使用HTML非常简单 其核心思想就是需要设置什么样式 就使用相应的HTML标记或者属性 在前文中 初步地分析了由于历史原因和HTML自身的局限性 所带来的一些问题 为了解决这些问题 HTML逐步地发展到了XHTML 而XHTML也更加便于和CSS相配合 本章将着重介绍HTML XHTML和CSS三者之间的关系 重点是理解使用CSS的核心目的 8 1HTML与XHTML 8 1 1追根溯源从HTML到XHTML 大致经历了以下版本 HTML2 0 1995年11月发布 HTML3 2 1996年1月14日发布 HTML7 0 1997年12月18日发布 HTML7 01 微小改进 1999年12月24日发布 XHTML1 0 2000年1月发布 后又经过修订于2002年8月1日重新发布 XHTML1 1 2001年5月31日发布 XHTML2 0 正在制订中 8 1 2DOCTYPE的含义与选择 DOCTYPE是documenttype 文档类型 的简写 在 eb设计中用来说明你用的XHTML或者HTML是什么版本 要建立符合标准的网页 DOCTYPE声明是必不可少的关键组成部分 除非你的XHTML确定了一个正确的DOCTYPE 否则你的标识和CSS都不会生效 XHTML1 0提供了三种DTD声明可供选择 过渡的 Transitional 要求非常宽松的DTD 它允许你继续使用HTML4 01的标识 但是要符合xhtml的写法 完整代码如下 严格的 Strict 要求严格的DTD 你不能使用任何表现层的标识和属性 例如 完整代码如下 框架的 Frameset 专门针对框架页面设计使用的DTD 如果你的页面中包含有框架 需要采用这种DTD 完整代码如下 DOCTYPE声明好以后 接下来的代码是 通常我们HTML4 0的代码只是 这里的 xmlns 是什么呢 这个 xmlns 是XHTMLnamespace的缩写 叫做 名字空间 声明 名字空间是什么作用呢 由于xml允许你自己定义自己的标识 你定义的标识和其他人定义的标识有可能相同 但表示不同的意义 当文件交换或者共享的时候就容易产生错误 为了避免这种错误发生 XML采用名字空间声明 允许你通过一个网址指向来识别你的标识 8 1 3XHTML与HTML的重要区别 1 在XHTML中标记名称必须小写2 在XHTML中属性名称必须小写3 在XHTML中标记必须严格嵌套4 在XHTML中标记必须封闭5 在XHTML中即使是空元素的标记也必须封闭 6 在XHTML中属性值用双引号括起来7 在XHTML中属性值必须使用完整形式 8 2 X HTML与CSS 8 2 1CSS标准CSS就是一种叫做样式表 stylesheet 的技术 也有人称之为层叠样式表 CascadingStyleSheet 制作网页时采用CSS技术 可以有效地对页面的布局 字体 颜色 背景和其他效果实现更加精确的控制 只要对相应的代码做一些简单的修改 就可以改变整个页面的风格 CSS样式表的特点如下 1 将显示格式和文档结构分离HTML语言定义文档的结构和各要素的功能 而层叠样式表将定义格式的部分和定义结构的部分分离 能够对页面的布局进行灵活的控制 2 对HTML语言处理样式的最好补充HTML语言对页面布局上的控制很有限 如精确定位 行间距或者字间距等 CSS样式表可以控制页面中的每一个元素 从而实现精确定位 CSS样式表控制页面布局的能力逐步增强 3 体积更小加快网页下载速度样式表是简单的文本 文本不需要图像 不需要执行程序 不需要插件 这样层叠样式表就可以减少图像用量 减少表格标签及其他加大HTML体积的代码 从而减小文件尺寸加快网页的下载速度 4 实现动态更新 减少工作量定义样式表 可以将站点上的所有网页指向一个独立的CSS样式表文件 只要修改CSS样式表文件的内容 整个站点相关文件的文本就会随之更新 减轻了工作负担 5 支持CSS的浏览器增多样式表的代码有很好的兼容性 只要是识别串接样式表的浏览器就可以应用CSS样式表 当用户丢失了某个插件时不会发成中断 使用老版本的浏览器代码不会出现乱码的情况 8 2 2传统HTML的缺点 例 08 01 html其实传统HTML的缺陷远不止上例中所反映的这一个方面 相比CSS为基础的页面设计方法 其所体现出的劣势主要有以下几点 1 维护困难 为了修改某个特殊标记 如上例中的标记 的格式 需要花费很多的时间 尤其对于整个网站而言 后期修改和维护的成本很高 2 标记不足 HTML本身的标记很少 很多标记都是为网页内容服务的 而对于美工样式的标记 如文字间距 段落缩进等标记在HTML中很难找到 3 网页过 胖 由于没有统一对各种风格样式进行控制 因此HTML的页面往往体积过大 占用网络带宽 4 定位困难 在整体布局页面时 HTML对于各个模块的位置调整显得捉襟见肘 过多的其他标记同样也导致页面的复杂和后期维护的困难 8 2 3CSS的引入例 08 02 html8 2 4如何编辑CSS 图8 4Dreamweaver的代码模式 图8 5Dreamweaver语法提示 图8 6调色板 8 2 5浏览器与CSS 图8 7IE浏览器和Firefox浏览器的标志 图8 8IE与Firefox的效果区别 8 3构造CSS规则 在具体使用CSS之前 请看一个生活中的例子 通常我们描述一个人可以为这个人列一张表 张飞 身高 185cm 体重 105kg 性别 男 性格 暴躁 民族 汉族 2级标题 字体 宋体 大小 15像素 颜色 红色 装饰 下划线 h2 font family 宋体 font size 15px color red text decoration underline CSS的思想就是首先指定对什么 对象 进行设置 然后指定对该对象的哪个方面的 属性 进行设置 最后给出该设置的 值 因此 概括来说 CSS就是由3个基本部分组成的 对象 属性 和 值 8 4基本CSS选择器 在CSS的3个组成部分中 对象 是很重要的 它指定了对哪些网页元素进行设置 因此 它有一个专门的名称 选择器 selector 样式定义的格式 定义CSS的语句形式如下 selector property value property value SELECTOR 选择符 当多个对象具有相同的样式定义时 多个对象之间可以用逗号分隔 例如 tr th font 12px margin 20px font color 336699 这里要注意 样式列表中的注释应写在 之间 8 4 1标记选择器 图8 9CSS标记选择器 标记选择器就是HTML的标记符 例如P BODY A等 如果用CSS定义了他们 那么在整个网页中 该标识的属性都应用定义中的设置 HTML选择符的定义方法如下 tag property value 例如 设置表格的单元格内的文字大小为9pt 颜色为蓝色的CSS代码如下 td font size 9pt color blue CSS可以在一条语句中定义多个选择符 例如 将段落文本和单元格内的文字设置为蓝色的CSS代码如下 td p color blue 8 4 2类别选择器 图8 10类别选择器 Class选择符可以分为两种 一种是相关的classselector 它只与一种HTML标记有关系 它的语法格式如下 Tag Classname property value 例如 让一部分而不是全部H1的颜色是红色 可以使用以下代码 H1 redone color red 吉林省明日科技有限责任公司ThisisH1 第二种是独立Class选择符 它可以被任何HTML标记所应用 它的语法格式如下 Classname property value 例如 可以将样式blueone应用于H2和P中的代码如下 blueone color bule 有雨的日子不知是无意还是天意 有你的日子总有雨 显然Class选择符应用起来会方便得多 例 08 04例 08 05例 08 06 8 4 3ID选择器 图8 14ID选择器 ID选择符其实与独立的Class选择符的功能一样 而他们的区别在于语法和用法不同 它的语法格式如下 IDname property value ID选择符的用法是在HTML标记中应用ID属性引用CSS样式 例如 redone color red 红色热情黑色神秘由于以上代码中的 红色热情 使用ID标识引用redone样式 所以文字 红色热情 是红色的 而文字 黑色神秘 则仍采用默认颜色 PROPERTY 就是那些将要被修改的属性 例如color VALUE PROPERTY的值 比如color的属性值可以是red 例 08 07 嵌入样式表 8 5在HTML中使用CSS的方法 用标记将样式表嵌入在HTML文件的头部 标记的属性type指明样式的类别 除了CSS样式表外 还有Netscape浏览器使用的JSS JavaScriptStyleSheets Java脚本样式表 样式表 其样式类别为text javascript type的默认值为text css 标记内定义的前后加上注释符的作用是使不支持CSS的浏览器忽略样式表的定义 嵌入样式表的作用范围是在本HTML文件内 例 08 09 1 内嵌式 链接外部样式表 如果多个HTML文件要共享样式表 可以将样式表定义为一个独立的CSS样式文件 HTML文件在头部用标记链接到CSS样式文件 例如 在HEAD标记里用标记链接CSS样式文件 代码如下 例 08 10 css08 10 html 2 链接式 引入外部的样式表 这种方式是在HTML文件的头部标记之间 用CSS样式表的 import声明引入外部样式表 格式如下 importURL 外部样式文件名 例如 应用 import声明引入外部样式表 代码如下 importURL style1 css importURL 3 导入式 内嵌样式 4 行内式 这种方式是在HTML标记中 将定义的样式规则作为标记style属性的属性值 样式定义的作用范围仅限于此标记范围之内 一个内嵌样式的应用如下 要在一个HTML文件中使用内联样式 必须在该文件的头部对整个文件进行单独的样式表语言声明 声明如下 内嵌样式主要应用于样式仅适用于单个页面元素的情况 它将样式和要展示的内容混在一起 自然会失去一些样式表的优点 所以建议这种方式应尽量少用 例 08 08 CSS样式的优先级 各种方式的优先级 当对同一段文本应用多个层叠样式表样式时 文本中的元素将遵循样式表的作用优先顺序依次调用样式 样式表的作用优先顺序遵循以下原则 1 同一个内部 行内式 内嵌式 导入式 2 其他样式按其在HTML文件中出现或者被引用的顺序 遵循就近原则 靠近文本越近的优先级越高 3 选择符的作用优先顺序为 上下文选择符 类选择符 ID选择符 优先级依次降低 4 未在任何文件中定义的样式 将遵循浏览器的默认样式 CSS样式的优先级 依照以上原则对下面的示例进行分析 代码中针对标记定义了3个样式表 标记包含3个标记 第1个标记根据原则1 2条 套用的样式值为 color 6699FF font size 16px text align center 样式表定义的类选择器p class1 只有class属性为class1的标记才使用 第2个标记套用的样式值为 color green font size 12px text align center 第3个标记中不含有class和style属性 套用的样式值为 color red font size 16px text align center 程序代码如下 p color red font s