CSS样式表基础pptConvertor

1、仅供个人参考第 6 章 CSS 样式表基础Web 标准的基本组成XHTML的基本知识CSS 编写基本模式CSS 的基本语法本章主要内容：网页设计制作基础与上机指导HTML+CSS+JavaScript 清华大学出版社6.1Web 标准Web 标准不是某一个标准，而是一系列标准的集合，用户只有在了解了其概念之后，网页制作才能做到有的放矢，在全局上把握各种技术。6.1.1Web 标准的基本组成Web 标准是很多网站表现层技术标准的集合，由著名的W3C 组织制定。所谓表现层技术，即网页前台技术，包括 HTML 、XHTML 、 CSS、JavaScript 等。有了统一的标准，才能保持技术的稳定发展

2、，使网页表现技术层能在任何设备中正常浏览。网页主要由三部分组成，即结构（Structure）、表现（ Presentation）和行为（ Behavior ），因此对应的语言标准也分3 方面：（1）结构标准语言：主要包括XHTML和 XML 。（ 2）表现标准语言：主要包括CSS。（ 3）行为标准：主要包括对象模型及ECMAScript 。6.1.2 建立 Web 标准的目的与好处传统的网页布局（使用table 进行布局）已经有很长的历史和比较成熟的技术规范了。但是仍然存在一些缺点。由于页面的内容和修饰没有分离，导致修改的困难，由于页面代码的语义不明确，导致数据利用的困难。而使用 CSS 进行

3、网页布局，分离了结构和表现，上述的问题也就迎刃而解了。1. 建立 Web 标准的目的建立 Web 标准的目的是解决网站中由于浏览器升级、网站代码冗余、臃肿等带来的问题。2. 使用 Web 标准的好处使用 Web 标准最大的好处就是大大缩减了页面代码，提高了浏览速度，缩减了宽待成本。由于结构清晰，能使网页更容易被搜索引擎搜索到。6.1.3Web 标准与浏览器的兼容性W3C 对标准的推进，Firefox ， Chrome， Safari， Opera 的出现，结束了IE 雄霸天下的日子。然而这对开发者来说，是好事，也是坏事。说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W

4、3C 标准，而得到更好的兼容性，并且不同浏览器的扩展功能对 W3C 标准也是个推进；说它是坏事，是因为多个浏览器同时存在，这些浏览器在处理一个相同的页面时，表现有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大， 甚至造成在某个浏览器下无法正常浏览。一般把引起这些差异的问题统称为“浏览器兼容性问题” 。从浏览器内核的角度来看，浏览器兼容性问题可分为以下3 类：（ 1）渲染相关：和样式相关的问题，即体现在布局效果上的问题。（ 2）脚本相关： 和脚本相关的问题， 包括 JavaScript 和 DOM 等方面的问题。 对于某些浏览器的功能方面的特性，也属于这一类。（ 3）其他类别：除以上

5、两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。6.1.3Web 标准与浏览器的兼容性不得用于商业用途仅供个人参考6.2XHTML与 CSS2000年底，国际 W3C 组织公布发行了 XHTML1.0 版本，这是一种在HTML 4.0 基础上优化和改进的新语言，目的是基于XML 应用。 XHTML是一种增强了的HTML ，它的可扩展性和灵活性将适应未来网络应用更多的需求。由于HTML 结构混乱，条理不清晰，样式与结构没有分离，所以符合Web 标准的网页结构推荐使用XHTML 。XHTML 是 HTML 的升级版，侧重点在于对网页的结构设计，其语法严谨，有语义，而且页面的样式

6、部分即表现部分由CSS 负责。6.2.1XHTML的基本知识6.2.1XHTML的基本知识与 HTML 相比 XHTML主要有以下特点：（1） XHTML解决了 HTML 语言所存在的严重制约其发展的问题。（2） XML 是 Web 发展的趋势，所以人们急切的希望加入XML 的潮流中。（ 3）使用 XHTML 的另一个优势是它非常严密。（ 4） XHTML 能与其它基于 XML 的标记语言、应用程序及协议进行良好的交互工作。（ 5） XHTML 是 Web 标准家族的一部分，能很好在无线设备等其它用户代理上。（ 6）在网站设计方面， XHTML 可助设计者去掉表现层代码的恶习，帮助设计者养成标

7、记校验来测试页面工作的习惯6.2.2XHTML中的元素XHTML的相应代码为：1）文档结构XHTML的文档结构和HTML 是一样的，定义文档开始和结束时使用HTML元素。页面同样分为 head 和 body 两部分，其中head 部分的内容是不显示在页面上的，head 部分还包括meta 和 title 等元素，6.2.2XHTML中的元素2）文本基础元素文本基础元素包括div 、 p、 strong、b、 span、 br、标题等元素。div ：块元素，可以将文档分成不同的部分，可以使用class 和 id 属性进一步控制页面表现。div 元素是 CSS 布局中使用最多的元素。p：块元素，表

8、示段落。strong：内联元素，使文本以粗体显示。b：内联元素，使文本以粗体显示。span：内联元素，用来区分文本中的一个部分。br：使文本换行显示。标题：块元素，用来定义文本中的各种标题。包括列元素h1、 h2、 h3、 h4、 h5、 h6，其中每个元素对应有默认的字体6.2.2XHTML中的元素3）列表元素ul：块元素，定义一个无序列表。li ：块元素，定义列表中具体的条目。4）分隔线，图像等修饰元素bgsound：用来添加背景音乐。hr：块元素，用来分隔页面的各个部分。不得用于商业用途仅供个人参考img ：内联元素，用来插入图像文件。5）链接元素a：内联元素，用来定义页面中的超级链接。

9、6）表格元素table：定义一个表格。tr：定义表格中的行。td：定义表格中的单元格。7）表单元素form ：定义一个表单，同时定义处理表单的服务器等。input ：用来定义通常的表单控件。6.2.3什么是 CSSCSS 语言是一种标记语言，它不需要编译， 可以直接由浏览器解释执行，属于浏览器解释型语言，在标准网页设计中CSS 负责网页内容的表现。层叠给每个规则分配一个重要度，作者的样式表被认为是最重要的，其次是用户的样式表，最后是浏览器或用户代理使用的默认样式表。为了让用户有更多的控制能力，可以通过将任何规则指定为 !important 来提高它的重要度，让它优先于任何规则，甚至优先于作者加

10、上!important 标志的规则。因此，层叠采用以下重要次序：标为 !important 的用户样式 - 标为 !important 的作者样式 -作者样式 -用户样式 -浏览器 /用户代理应用的样式。6.2.4XHTML与 CSS 实现样式与结构分离“XHTML+CSS ”制作的网页，其各要素关系如图所示。6.2.5CSS 布局与表格布局的分析在布局效果一样的情况下，表格布局导致结构与样式杂糅在一起，条理混乱，不易维护，而XHTML+CSS布局则将内容与样式做了分离，代码的重用性较高，很利于维护与修改。正是因为代码的重用性高，所以在大多数合格的网页代码编写中，使用XHTML+CSS布局比单

11、纯使用传统的HTML 表格布局要简洁的多。6.3CSS 编写基本模式由于 CSS 在布局、样式控制方面有着巨大的优势，所以CSS 成了美化页面的最佳利器，本节所要介绍的 CSS 的编写模式，虽然是简单的 CSS 基础，但对于页面的样式控制来说非常的关键。6.3.1CSS 的插入形式在网页中插入CSS 样式表后，要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读取，这里介绍4 种在页面中插入样式表的方法：1链入外部样式表链入外部样式表是要先把样式表保存为一个单独的文件，然后在页面中用 标记链接到这个文件，注意这个 标记必须放到页面的区内，其语法格式如下：6

12、.3.1CSS 的插入形式2内部样式表内部样式表是通过 标记把样式表的内容直接放到HTML页面的 区里，这些定不得用于商业用途仅供个人参考义的样式就应用到页面中了，样式表是用 标记插入的，其语法格式如下： 6.3.1CSS 的插入形式3导入外部样式表导入外部样式表是指在内部样式表的 区域内导入一个外部样式表，导入时需要用 import 做声明，该声明可放在 标记外也可以放在 标记内，但根据语法规则，一般都是放在 标记内，其语法格式如下：importurl（外部样式表文件地址）；6.3.1CSS 的插入形式4. 内嵌样式内嵌样式是混合在 HTML 标记里使用的，即在 标记里加入 style 参数

13、。而 style 参数的内容就是 CSS 的属性和值，用这种方法，可以很简单的对某个元素单独定义样式。其语法格式如下：6.3.2CSS 的媒介控制media 值说明all应用于所有的设备screen应用于计算机屏幕print应用于页面的打印及打印预览的状态不得用于商业用途仅供个人参考handheld应用于手持设备（小屏幕、单色及带宽有限制的设备）projection应用于投影演示braille应用于盲文触摸式的反馈设备aural应用于语音合成设备CSS 支持媒介列表6.4CSS 的基本语法CSS 是用来进行网页风格设计的，它简化并扩展了HTML 中的各种标记， 大大提高了HTML开发的效率。在

14、制作网页时采用CSS 技术，可以有效的对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制， 只要对相应的代码做一些简单的修改， 就可改变同一页面的不同部分，或页数不同的网页的外观和格式6.4.1CSS 的基本格式CSS 语法的核心包括三部分：选择符，样式属性及属性值。其基本语法如下：选择符 属性 1：属性值1；属性 2：属性值2； ；属性 n：属性值n；6.4.2CSS 的注释语句开发人员可以在 CSS 中插入注释来说明代码的含义，注释有利于自己别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS 注释以“ /* ” 开头，以“ */ ”结尾。6.4.3CSS 的

15、选择符CSS 中的选择符可以分为5 种，分别是：标签选择符、类选择符、id 选择符、伪类及伪对象选择符、通配选择符。1.HTML标签选择符标签选择符即使用XHTML中已有的标签作为选择符。如：其中“ p”是 HTML 标记选择符。6.4.3CSS 的选择符2.类选择符一个选择符能有不同的类，因而允许同一元素有不同样式，用类选择符可以把相同的元素分类定义成不同的样式。在定义类选择符时，在自定义类名称的前面加一个句点标记（.），其格式为：选择符 .类别名 属性：值 不得用于商业用途仅供个人参考3.id 选择符id 选择符的定义方法与类选择符大同小异，一个id 选择符以“ #”开头，只需要把句点改为

16、井号（ #）即可，其语法格式如下：#idstyle font-family: Arial, Helvetica, sans-serif;color: blue;6.4.3CSS 的选择符4.伪类和伪元素选择符伪类和伪元素选择符是一组 CSS 预定义好的类和对象，不需要进行 id 和 class 属性的声明，能自动地被支持 CSS 的浏览器所识别。1）伪类 : 伪类的基本格式为：选择符 :伪类 属性: 值 2）伪元素 :伪元素指元素的一部分，如段落的第一个字母。伪元素的基本格式为：选择符 .类: 伪元素属性: 值 不得用于商业用途仅供个人参考仅供个人用于学习、研究；不得用于商业用途。For person