《第6章 CSS样式表基础.ppt》由会员分享，可在线阅读，更多相关《第6章 CSS样式表基础.ppt（26页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第6章章 CSS样式表基础样式表基础lWeb标准的基本组成标准的基本组成lXHTML的基本知识的基本知识lCSS编写基本模式编写基本模式lCSS的基本语法的基本语法本章主要内容：本章主要内容：网页设计制作基础与上机指导HTML+CSS+JavaScript 清华大学出版社6.1 Web标准标准Web标准不是某一个标准，而是一系列标准的集合，用户只有在了解了其概念之后，网页制作才能做到有的放矢，在全局上把握各种技术。6.1.1 Web标准的基本组成标准的基本组成Web标准是很多网站表现层技术标准的集合，由著名的W3C组织制定。所谓表现层技术，即网页前台技术，包括HTML、XHTML、CSS、J
2、avaScript等。有了统一的标准，才能保持技术的稳定发展，使网页表现技术层能在任何设备中正常浏览。网页主要由三部分组成，即结构（Structure）、表现（Presentation）和行为（Behavior），因此对应的语言标准也分3方面：（1）结构标准语言：主要包括XHTML和XML。（2）表现标准语言：主要包括CSS。（3）行为标准：主要包括对象模型及ECMAScript。6.1.2 建立建立Web标准的目的与好处标准的目的与好处传统的网页布局（使用table进行布局）已经有很长的历史和比较成熟的技术规范了。但是仍然存在一些缺点。由于页面的内容和修饰没有分离，导致修改的困难，由于页面代
3、码的语义不明确，导致数据利用的困难。而使用CSS进行网页布局，分离了结构和表现，上述的问题也就迎刃而解了。1.1.建立建立WebWeb标准的目的标准的目的建立Web标准的目的是解决网站中由于浏览器升级、网站代码冗余、臃肿等带来的问题。2.2.使用使用WebWeb标准的好处标准的好处使用Web标准最大的好处就是大大缩减了页面代码，提高了浏览速度，缩减了宽待成本。由于结构清晰，能使网页更容易被搜索引擎搜索到。6.1.3 Web标准与浏览器的兼容性标准与浏览器的兼容性W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。然而这对开发者来说，是好事
4、，也是坏事。说它是好事，是因为浏览器厂商为了取得更多的市场份额，会促使各浏览器更符合W3C标准，而得到更好的兼容性，并且不同浏览器的扩展功能对W3C标准也是个推进；说它是坏事，是因为多个浏览器同时存在，这些浏览器在处理一个相同的页面时，表现有时会有差异。这种差异可能很小，甚至不会被注意到；也可能很大，甚至造成在某个浏览器下无法正常浏览。一般把引起这些差异的问题统称为“浏览器兼容性问题”。从浏览器内核的角度来看，浏览器兼容性问题可分为以下3类：（1）渲染相关：和样式相关的问题，即体现在布局效果上的问题。（2）脚本相关：和脚本相关的问题，包括JavaScript和DOM等方面的问题。对于某些浏览器
5、的功能方面的特性，也属于这一类。（3）其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。6.1.3 Web标准与浏览器的兼容性标准与浏览器的兼容性6.2 XHTML与与CSS2000年底，国际W3C组织公布发行了XHTML 1.0版本，这是一种在HTML 4.0基础上优化和改进的新语言，目的是基于XML应用。XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。由于HTML结构混乱，条理不清晰，样式与结构没有分离，所以符合Web标准的网页结构推荐使用XHTML。XHTML是HTML的升级版，侧重点在于对网页的结构设计，其语法严谨，
6、有语义，而且页面的样式部分即表现部分由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可助设计者去掉表现层代码的恶习，帮助设计者养成标记校验来测
7、试页面工作的习惯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：内联
8、元素，使文本以粗体显示。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：定义表格中的
9、行。td：定义表格中的单元格。7）表单元素form：定义一个表单，同时定义处理表单的服务器等。input：用来定义通常的表单控件。6.2.3 什么是什么是CSS CSS语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行，属于浏览器解释型语言，在标准网页设计中CSS负责网页内容的表现。层叠给每个规则分配一个重要度，作者的样式表被认为是最重要的，其次是用户的样式表，最后是浏览器或用户代理使用的默认样式表。为了让用户有更多的控制能力，可以通过将任何规则指定为!important来提高它的重要度，让它优先于任何规则，甚至优先于作者加上!important标志的规则。因此，层叠采用以下重要次序：
10、标为!important的用户样式-标为!important的作者样式-作者样式-用户样式-浏览器/用户代理应用的样式。6.2.4 XHTML与与CSS实现样式与结实现样式与结构分离构分离“XHTML+CSS”制作的网页，其各要素关系如图所示。CSSXHTML信息数据Web页面6.2.5 CSS布局与表格布局的分析布局与表格布局的分析在布局效果一样的情况下，表格布局导致结构与样式杂糅在一起，条理混乱，不易维护，而XHTML+CSS布局则将内容与样式做了分离，代码的重用性较高，很利于维护与修改。正是因为代码的重用性高，所以在大多数合格的网页代码编写中，使用XHTML+CSS布局比单纯使用传统的H
11、TML表格布局要简洁的多。6.3 CSS编写基本模式编写基本模式由于CSS在布局、样式控制方面有着巨大的优势，所以CSS成了美化页面的最佳利器，本节所要介绍的CSS的编写模式，虽然是简单的CSS基础，但对于页面的样式控制来说非常的关键。6.3.1 CSS的插入形式的插入形式在网页中插入CSS样式表后，要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读取，这里介绍4种在页面中插入样式表的方法：1 1链入外部样式表链入外部样式表链入外部样式表是要先把样式表保存为一个单独的文件，然后在页面中用标记链接到这个文件，注意这个标记必须放到页面的区内，其语法格式如下：
12、6.3.1 CSS的插入形式的插入形式2 2内部样式表内部样式表内部样式表是通过标记把样式表的内容直接放到HTML页面的区里，这些定义的样式就应用到页面中了，样式表是用标记插入的，其语法格式如下：6.3.1 CSS的插入形式的插入形式3 3导入外部样式表导入外部样式表导入外部样式表是指在内部样式表的区域内导入一个外部样式表，导入时需要用import做声明，该声明可放在标记外也可以放在标记内，但根据语法规则，一般都是放在标记内，其语法格式如下：import url（外部样式表文件地址）；6.3.1 CSS的插入形式的插入形式4.4.内嵌样式内嵌样式内嵌样式是混合在HTML标记里使用的，即在标记里
13、加入style参数。而style参数的内容就是CSS的属性和值，用这种方法，可以很简单的对某个元素单独定义样式。其语法格式如下：6.3.2 CSS的媒介控制的媒介控制mediamedia值值说说 明明allall应应用于所有的用于所有的设备设备screenscreen应应用于用于计计算机屏幕算机屏幕printprint应应用于用于页页面的打印及打印面的打印及打印预览预览的状的状态态handheldhandheld应应用于手持用于手持设备设备（小屏幕、（小屏幕、单单色及色及带宽带宽有限制的有限制的设备设备）projectionprojection应应用于投影演示用于投影演示braillebrai
14、lle应应用于盲文触摸式的反用于盲文触摸式的反馈设备馈设备auralaural应应用于用于语语音合成音合成设备设备 CSS支持媒介列表 6.4 CSS的基本语法的基本语法CSS是用来进行网页风格设计的，它简化并扩展了HTML中的各种标记，大大提高了HTML开发的效率。在制作网页时采用CSS技术，可以有效的对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制，只要对相应的代码做一些简单的修改，就可改变同一页面的不同部分，或页数不同的网页的外观和格式6.4.1 CSS的基本格式的基本格式CSS语法的核心包括三部分：选择符，样式属性及属性值。其基本语法如下：选择符 属性1：属性值1；属性2：属
15、性值2；属性n：属性值n；6.4.2 CSS的注释语句的注释语句开发人员可以在CSS中插入注释来说明代码的含义，注释有利于自己别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以“/*”开头，以“*/”结尾。6.4.3 CSS的选择符的选择符CSS中的选择符可以分为5种，分别是：标签选择符、类选择符、id选择符、伪类及伪对象选择符、通配选择符。1.HTML1.HTML标签选择符标签选择符标签选择符即使用XHTML中已有的标签作为选择符。如：其中“p”是HTML标记选择符。6.4.3 CSS的选择符的选择符2.2.类选择符类选择符一个选择符能有不同的类，因而允许同一元
16、素有不同样式，用类选择符可以把相同的元素分类定义成不同的样式。在定义类选择符时，在自定义类名称的前面加一个句点标记（.），其格式为：选择符.类别名 属性：值3.id3.id选择符选择符id选择符的定义方法与类选择符大同小异，一个id选择符以“#”开头，只需要把句点改为井号（#）即可，其语法格式如下：#idstyle font-family:Arial,Helvetica,sans-serif;color:blue;6.4.3 CSS的选择符的选择符4.4.伪类和伪元素选择符伪类和伪元素选择符伪类和伪元素选择符是一组CSS预定义好的类和对象，不需要进行id和class属性的声明，能自动地被支持CSS的浏览器所识别。1）伪类:伪类的基本格式为：选择符:伪类 属性:值 2）伪元素:伪元素指元素的一部分，如段落的第一个字母。伪元素的基本格式为：选择符.类:伪元素 属性:值