《层叠样式表CSS》PPT课件

《《层叠样式表CSS》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日

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

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

4、CSS和XSLT可以利用XSLT将XML文档中的数据进行筛选然后利用CSS将其以某种格式显示在浏览器上。例6.2在XSLT样式表中设置样式我们也可以直接在XSLT样式表中设置元素样式，从而控制XML文件输出的外观。但是这种方法并不好，当需要修改样式时，需要修改每一处设置。CSS的语法细节本节内容：CSS基础语法CSS高级语法CSS派生选择器CSSid选择器CSSclass选择器如何创建CSSCSS背景CSS文本CSS字体CSS边框CSS边距CSS填充CSS列表CSS尺寸CSS分类CSS定位CSS伪

5、类CSS伪元素CSS媒介类型CSS总结CSS基础语法CSS语法由三部分构成：选择器、属性和值：selector{property:value}选择器(selector)通常是你希望定义的XML元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：body{color:blue}上面这行代码的作用是将body元素内的文字颜色定义为蓝色。在上述例子中，body是选择器，而包括在花括号

6、内的的部分是声明。声明依次由两部分构成：属性和值，color为属性，blue为值。CSS基础语法-值的不同写法和单位值的不同写法和单位除了英文单词red，我们还可以使用十六进制的颜色值#ff0000：p{color:#ff0000;}为了节约字节，我们可以使用CSS的缩写形式：p{color:#f00;}我们还可以通过两种方法是用RGB值：p{color:rgb(255,0,0);}p{color:rgb(100%,0%,0%);}请注意，当使用RGB百分比时，即使当值为0时也要写百分比符号。但是

7、在其他的情况下就不需要这么做了。比如说，当尺寸为0像素时，0之后不需要使用px单位。CSS基础语法-记得写引号记得写引号提示：如果值为若干单词，则要给值加引号：p{font-family:"sansserif";}CSS基础语法-多重声明多重声明：提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当

8、你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样：p{text-align:center;color:red;}你应该在每行描述只写一个属性，以使得样式定义的可读性更强，就像这样：p{text-align:center;color:black;font-family:arial;}CSS基础语法-空格和大小写敏感空格和大小写敏感大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：body{color:#000;ba