第6章CSS样式表基础Convertor.docVIP

第6章 CSS样式表基础 Web标准的基本组成 XHTML的基本知识 CSS编写基本模式 CSS的基本语法 本章主要内容： 《网页设计制作基础与上机指导——HTML+CSS+JavaScript》 清华大学出版社 6.1 Web标准 Web标准不是某一个标准，而是一系列标准的集合，用户只有在了解了其概念之后，网页制作才能做到有的放矢，在全局上把握各种技术。 6.1.1 Web标准的基本组成 Web标准是很多网站表现层技术标准的集合，由著名的W3C组织制定。所谓表现层技术，即网页前台技术，包括HTML、XHTML、CSS、JavaScript等。有了统一的标准，才能保持技术的稳定发展，使网页表现技术层能在任何设备中正常浏览。 网页主要由三部分组成，即结构（Structure）、表现（Presentation）和行为（Behavior），因此对应的语言标准也分3方面： （1）结构标准语言：主要包括XHTML和XML。 （2）表现标准语言：主要包括CSS。 （3）行为标准：主要包括对象模型及ECMAScript。 6.1.2 建立Web标准的目的与好处 传统的网页布局（使用table进行布局）已经有很长的历史和比较成熟的技术规范了。但是仍然存在一些缺点。由于页面的内容和修饰没有分离，导致修改的困难，由于页面代码的语义不明确，导致数据利用的困难。而使用CSS进行网页布局，分离了结构和表现，上述的问题也就迎刃而解了。 1. 建立Web标准的目的 建立Web标准的目的是解决网站中由于浏览器升级、网站代码冗余、臃肿等带来的问题。 2. 使用Web标准的好处 使用Web标准最大的好处就是大大缩减了页面代码，提高了浏览速度，缩减了宽待成本。由于结构清晰，能使网页更容易被搜索引擎搜索到。 6.1.3 Web标准与浏览器的兼容性 W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。然而这对开发者来说，是好事，也是坏事。说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W3C标准，而得到更好的兼容性，并且不同浏览器的扩展功能对W3C标准也是个推进；说它是坏事，是因为多个浏览器同时存在，这些浏览器在处理一个相同的页面时，表现有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。一般把引起这些差异的问题统称为“浏览器兼容性问题”。 从浏览器内核的角度来看，浏览器兼容性问题可分为以下3类： （1）渲染相关：和样式相关的问题，即体现在布局效果上的问题。 （2）脚本相关：和脚本相关的问题，包括JavaScript和DOM等方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。 （3）其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。 6.1.3 Web标准与浏览器的兼容性 6.2 XHTML与CSS 2000年底，国际W3C组织公布发行了XHTML 1.0版本，这是一种在HTML 4.0基础上优化和改进的新语言，目的是基于XML应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。由于HTML结构混乱，条理不清晰，样式与结构没有分离，所以符合Web标准的网页结构推荐使用XHTML。 XHTML是HTML的升级版，侧重点在于对网页的结构设计，其语法严谨，有语义，而且页面的样式部分即表现部分由CSS负责。 6.2.1 XHTML的基本知识 6.2.1 XHTML的基本知识 与HTML相比XHTML主要有以下特点： （1）XHTML解决了HTML语言所存在的严重制约其发展的问题。 （2）XML是Web发展的趋势，所以人们急切的希望加入XML的潮流中。 （3）使用XHTML的另一个优势是它非常严密。 （4）XHTML能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。 （5）XHTML是Web标准家族的一部分，能很好在无线设备等其它用户代理上。 （6）在网站设计方面，XHTML可助设计者去掉表现层代码的恶习，帮助设计者养成标记校验来测试页面工作的习惯 6.2.2 XHTML中的元素 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtml XHTML的相应代码为： 1）文档结构 XHTML的文档结构和HTML是一样的，定义文档开始和结束时使用HTML元素。页面同样分为head和body两部分，其中head部分的内容是不显示在页面上的，head部分还包括 me