《层叠样式表CSS》PPT课件.ppt

《《层叠样式表CSS》PPT课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第六章层叠样式表CSS本章内容CSS简介CSS和XML和HTML/XHTML的结合在XML文件上直接应用CSS在XML上使用CSS和XSLT在XSLT样式表中设置样式CSS的语法细节CSS简介CSS指层叠样式表（CascadingStyleSheets），它并不是一种程序设计语言，而只是一种用于网页排版的标记语言。CSS在应用中不断走向成熟，现在CSS有两个不同层次的标准：CSS1和CSS2。CSS1（CSSLevel1）是CSS的第一层标准，正式发布于1996年12月17日，1999年1月11日进行了修改。它提供了简单的样式表机制。CSS2

2、（CSSLevel2）在1998年5月12日被正式作为标准发布。CSS2基于CSS1，包含了CSS1所有的特色和功能。CSS2支持多媒体样式表，使得我们能够根据不同的输出设备为文档制定不同的表现样式，如可视化的浏览器、语音设备、打印机、盲文设备、手持设备等。它还可以实现内容定位、可下载字体、表格布局和自动记数等功能。CSS和XML和HTML/XHTML的结合样式表定义HTML元素如何被显示，诸如HTML3.2的样式中的字体标签和颜色属性通常被保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页

3、面布局的外观。由于允许同时控制多重页面的样式和布局，CSS可以称得上WEB设计领域的一个突破。作为网站开发者，你可以为每个HTML元素定义样式，并将之应用于你希望的任意多的页面。为了进行全局变换，只需简单地改变样式，然后网站中的所有元素均会被自动地升级。对于XML文档来说具有同样的作用。在XML文件上直接应用CSS这种方法的缺点是将在浏览器上显示XML文档的所有数据，编程者没有选择权。例6.1在XML上使用CSS和XSLT可以利用XSLT将XML文档中的数据进行筛选然后利用CSS将其以某种格式显示在浏览器上。例6.2在XSLT样式表中设置样式

4、我们也可以直接在XSLT样式表中设置元素样式，从而控制XML文件输出的外观。但是这种方法并不好，当需要修改样式时，需要修改每一处设置。CSS的语法细节本节内容：CSS基础语法CSS高级语法CSS派生选择器CSSid选择器CSSclass选择器如何创建CSSCSS背景CSS文本CSS字体CSS边框CSS边距CSS填充CSS列表CSS尺寸CSS分类CSS定位CSS伪类CSS伪元素CSS媒介类型CSS总结CSS基础语法CSS语法由三部分构成：选择器、属性和值：selector{property:value}选择器(selector)通常是你希望定义

5、的XML元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：body{color:blue}上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子中，body是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color为属性，blue为值。CSS基础语法-值的不同写法和单位值的不同写法和单位除了英文单词red，我们还可以使用十六进制的颜色值#ff0000：p{color:#ff0000

6、;}为了节约字节，我们可以使用CSS的缩写形式：p{color:#f00;}我们还可以通过两种方法是用RGB值：p{color:rgb(255,0,0);}p{color:rgb(100%,0%,0%);}请注意，当使用RGB百分比时，即使当值为0时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为0像素时，0之后不需要使用px单位。CSS基础语法-记得写引号记得写引号提示：如果值为若干单词，则要给值加引号：p{font-family:"sansserif";}CSS基础语法-多重声明多重声明：提示：如果要定义不止一个声明

7、，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样：p{text-align:center;color:red;}你应该在每行描述只写一个属性，以使得样式定义的可读性更强，就像这样：p{text-align:center;color:black;font-family:arial;}CSS基础语法-空格和大

8、小写敏感空格和大小写敏感大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：body{color:#000;ba