第6章 CSS样式表基础.ppt.Convertor.doc

第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与CSS2000年底，国际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中的元素XHTML的相应代码为：1）文档结构XHTML的文档结构和HTML是一样的，定义文档开始和结束时使用HTML元素。页面同样分为head和body两部分，其中head部分的内容是不显示在页面上的，head部分还包括 meta 和 title 等元素， 6.2.2 XHTML中的元素2）文本基础元素文本基础元素包括div、p、strong、b、span、br、标题等元素。div：块元素，可以将文档分成不同的部分，可以使用class和id属性进一步控制页面表现。div元素是CSS布局中使用最多的元素。p：块元素，表示段落。strong：内联元素，使文本以粗体显示。b：内联元素，使文本以粗体显示。span：内联元素，用来区分文本中的一个部分。br：使文本换行显示。标题：块元素，用来定义文本中的各种标题。包括列元素h1、h2、h3、h4、h5、h6，其中每个元素对应有默认的字体 6.2.2 XHTML中的元素3）列表元素ul：块元素，定义一个无序列表。li：块元素，定义列表中具体的条目。4）分隔线，图像等修饰元素bgsound：用来添加背景音乐。hr：块元素，用来分隔页面的各个部分。img：内联元素，用来插入图像文件。5）链接元素a：内联元素，用来定义页面中的超级链接。6）表格元素table：定义一个表格。tr：定义表格中的行。td：定义表格中的单元格。7）表单元素form：定义一个表单，同时定义处理表单的服务器等。input：用来定义通常的表单控件。6.2.3 什么是CSS CSS语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行，属于浏览器解释型语言，在标准网页设计中CSS负责网页内容的表现。层叠给每个规则分配一个重要度，作者的样式表被认为是最重要的，其次是用户的样式表，最后是浏览器或用户代理使用的默认样式表。为了让用户有更多的控制能力，可以通过将任何规则指定为!important来提高它的重要度，让它优先于任何规则，甚至优先于作者加上!important标志的规则。因此，层叠采用以下重要次序：标为!important的用户样式-标为!important的作者样式-作者样式-用户样式-浏览器/用户代理应用的样式。 6.2.4 XHTML与CSS实现样式与结构分离“XHTML+CSS”制作的网页，其各要素关系如图所示。6.2.5 CSS布局与表格布局的分析在布局效果一样的情况下，表格布局导致结构与样式杂糅在一起，条理混乱，不易维护，而XHTML+CSS布局则将内容与样式做了分离，代码的重用性较高，很利于维护与修改。正是因为代码的重用性高，所以在大多数合格的网页代码编写中，使用XHTML+CSS布局比单纯使用传统的HTML表格布局要简洁的多。6.3 CSS编写基本模式由于CSS在布局、样式控制方面有着巨大的优势，所以CSS成了美化页面的最佳利器，本节所要介绍的CSS的编写模式，虽然是简单的CSS基础，但对于页面的样式控制来说非常的关键。6.3.1 CSS的插入形式在网页中插入CSS样式表后，要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读取，这里介绍4种在页面中插入样式表的方法：1链入外部样式表链入外部样式表是要先把样式表保存为一个单独的文件，然后在页面中用标记链接到这个文件，注意这个标记必须放到页面的区内，其语法格式如下： 6.3.1 CSS的插入形式2内部样式表内部样式表是通过标记把样式表的内容直接放到HTML页面的区里，这些定义的样式就应用到页面中了，样式表是用标记插入的，其语法格式如下： 6.3.1 CSS的插入形式3导入外部样式表导入外部样式表是指在内部样式表的区域内导入一个外部样式表，导入时需要用import做声明，该声明可放在标记外也可以放在标记内，但根据语法规则，一般都是放在标记内，其语法格式如下： import url（外部样式表文件地址）； 6.3.1 CSS的插入形式4. 内嵌样式内嵌样式是混合在HTML标记里使用的，即在标记里加入style参数。而style参数的内容就是CSS的属性和值，用这种方法，可以很简单的对某个元素单独定义样式。其语法格式如下： 6.3.2 CSS的媒介控制media值说 明all应用于所有的设备screen应用于计算机屏幕print应用于页面的打印及打印预览的状态handheld应用于手持设备（小屏幕、单色及带宽有限制的设备）projection应用于投影演示braille应用于盲文触摸式的反馈设备aural应用于语音合成设备CSS支持媒介列表 6.4 CSS的基本语法CSS是用来进行网页风格设计的，它简化并扩展了HTML中的各种标记，大大提高了HTML开发的效率。在制作网页时采用CSS技术，可以有效的对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制，只要对相应的代码做一些简单的修改，就可改变同一页面的不同部分，或页数不同的网页的外观和格式6.4.1 CSS的基本格式CSS语法的核心包括三部分：选择符，样式属性及属性值。其基本语法如下：选择符 属性1：属性值1； 属性2：属性值2； ； 属性n：属性值n； 6.4.2 CSS的注释语句开发人员可以在CSS中插入注释来说明代码的含义，注释有利于自己别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以“/*” 开头，以“*/”结尾。6.4.3 CSS的选择符CSS中的选择符可以分为5种，分别是：标签选择符、类选择符、id选择符、伪类及伪对象选择符、通配选择符。1.HTML标签选择符标签选择符即使用XHTML中已有的标签作为选择符。如： 其中“p”是HTML标记选择符。6.4.3 CSS的选择符2.类选择符一个选择符能有不同的类，因而允许同一元素有不同样式，用类选择符可以把相同的元素分类定义成不同的样式。在定义类选择符时，在自定义类名称的前面加一个句点标记（.），其格式为：选择符.类别名 属性：值3.id选择符id选择符的定义方法与类选择符大同小异，一个id选择符以“#”开头，只需要把句点改为井号（#）即可， 其语法格式如下：#idstyl