网页设计：CSS样式表格应用.ppt

《网页设计：CSS样式表格应用.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第四章CSS样式表应用主讲：钟杰卓0本章内容概述CSS简介1CSS语法基础2CSS布局基础3CSS布局实例4CSS滤镜应用514.1CSS简介CSS的全称是CascadingStyleSheet，通常称为“层叠样式表”。是网页设计不可缺少的工具之一。CSS是一组样式，样式的属性在HTML元素中一次出现，并显示在浏览器中。样式可以定义在HTML文档的标记里，也可以放在外部附加文档中，一个样式表文档可以用于多个页面，甚至是整个站点，因此具有更好的易用性和扩展性。CSS可以减少开发和维护HTML文档所

2、用的时间。增加了Web站点中文档间的灵活性。24.2CSS语法基础完成了网页框架的构建，下一步就应该使用CSS来布局和修饰了。使用CSS的方法可以简单概括为：选择符：表示要定义样式的对象，可以是元素本身，也可以是一类元素或指定名称的元素。选择属性：制定选择符所具有的属性，它是CSS的核心。CSS2一共定义了150多个属性，其中大部分属性是用于任何选择符。定义属性值：数值表示（25px）、百分比表式（20%）、范围表示（top、right）Selector{property:value;prope

3、rty:value;}body{color:#333;background-color:#eee;}34.2CSS语法基础CSS选择符类型选择器：类型选择符就是网页元素本身，定义时直接使用元素名称，如定义段落样式，可以选择p元素，即把p作为选择符。在HTML和XHTML中，所有的元素都可以作为类型选择符来进行定义：定义了类型选择符，所定义的属性会影响引用这个样式的所有该元素的显示效果。使用恰当会非常省力，但如果考虑不周，贸然定义会给网页设计增加无穷烦恼。html{/*<定义网页结构总体样式>*/

4、color:#f60;font-size:14px;}Body{/*<定义页面属性>*/Margin-left:0px;Margin-top:0px;}Td{/*<定义表元属性>*/Font-family:”宋体”,”黑体”;}44.2CSS语法基础id选择符：CSS中的id是作为网页中元素的“身份证”来使用的。因此它是唯一的，不同元素的id值不能重复。使用id选择器能够扩展HTML和XHTML元素的显示效果。为每个元素的具体对象定义不同的样式，方便了用户更加精细地控制页面。当使用id选择符时，

5、应先为元素定义一个id属性：在样式表中，需要使用#号进行标识：#lefttable{color:#f60;font-size:14px;border:1pt#999solid;}……54.2CSS语法基础class选择符：class是一个集合名次，意味着在一个文档中可以为不同类型的元素定义相同的类名。是先把具有相同样式的元素统一为一类。使用class选择符可以实现代码简化的目的，节约了了CSS代码的编写，增强了代码的可读性。当使用clas

6、s选择符时，首先应为每个元素定义class属性：在样式表中，需要使用.号进行标识：.red{color:#ff0000;}64.2CSS语法基础群选择符：群选择符不是一种选择符的类型，而是一种选择符的使用方法。当多个对象定义了相同的样式时，可以把它们分成一组，以便简化代码读写，选择符分组，可以用逗号把同组内不同对象分割：派生选择符：可以使用派生选择器给一个元素里的子元素定义样式，例如，给li下面的子元素a定

7、义文字大小和颜色的样式：.dh1a{font-size:12px;color:#333333;}p,td,li{font-size:12px;}74.2CSS语法基础伪类：CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a:activea:link{/*定义超级链接的默认样式*/font-size:12px;color:#c00;text-decoration:none;}a:visited{/*定义访问过的链接样式*/font-size:12px;

8、color:#c00;text-decoration:none;}a:hover{/*定义鼠标经过的链接样式*/font-size:12px;color:#f30;text-decoration:underline;}a:active{/*定义鼠标按下的链接样式*/font-size:12px;color:#c00;text-decoration:none;}84.2CSS语法基础在网页中添加CSS的方法CSS样式可以以多种方式灵活地应用到设计的页面中，选择方法根据设计的不同要求来指定。行内样式