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

第四章 CSS样式表应用 主讲：钟杰卓 本章内容概述 4.1 CSS简介 CSS的全称是Cascading Style Sheet，通常称为“层叠样式表”。是网页设计不可缺少的工具之一。 CSS是一组样式，样式的属性在HTML元素中一次出现，并显示在浏览器中。样式可以定义在HTML文档的标记里，也可以放在外部附加文档中，一个样式表文档可以用于多个页面，甚至是整个站点，因此具有更好的易用性和扩展性。 CSS可以减少开发和维护HTML文档所用的时间。增加了Web站点中文档间的灵活性。 4.2 CSS语法基础 完成了网页框架的构建，下一步就应该使用CSS来布局和修饰了。使用CSS的方法可以简单概括为： 选择符：表示要定义样式的对象，可以是元素本身，也可以是一类元素或指定名称的元素。 选择属性：制定选择符所具有的属性，它是CSS的核心。CSS 2一共定义了150多个属性，其中大部分属性是用于任何选择符。 定义属性值：数值表示（25px）、百分比表式（20%）、范围表示（top、right） 4.2 CSS语法基础 CSS选择符 类型选择器： 类型选择符就是网页元素本身，定义时直接使用元素名称，如定义段落样式，可以选择p元素，即把p作为选择符。在HTML和XHTML中，所有的元素都可以作为类型选择符来进行定义： 定义了类型选择符，所定义的属性会影响引用这个样式的所有该元素的显示效果。使用恰当会非常省力，但如果考虑不周，贸然定义会给网页设计增加无穷烦恼。 4.2 CSS语法基础 id选择符： CSS中的id是作为网页中元素的“身份证”来使用的。因此它是唯一的，不同元素的id值不能重复。使用id选择器能够扩展HTML和XHTML元素的显示效果。为每个元素的具体对象定义不同的样式，方便了用户更加精细地控制页面。 当使用id选择符时，应先为元素定义一个id属性： 在样式表中，需要使用 # 号进行标识： 4.2 CSS语法基础 class选择符： class是一个集合名次，意味着在一个文档中可以为不同类型的元素定义相同的类名。是先把具有相同样式的元素统一为一类。使用class选择符可以实现代码简化的目的，节约了了CSS代码的编写，增强了代码的可读性。 当使用class选择符时，首先应为每个元素定义class属性： 在样式表中，需要使用 . 号进行标识： 4.2 CSS语法基础 群选择符： 群选择符不是一种选择符的类型，而是一种选择符的使用方法。当多个对象定义了相同的样式时，可以把它们分成一组，以便简化代码读写，选择符分组，可以用逗号把同组内不同对象分割： 派生选择符： 可以使用派生选择器给一个元素里的子元素定义样式，例如，给li下面的子元素a定义文字大小和颜色的样式： 4.2 CSS语法基础 伪类： CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active 4.2 CSS语法基础 在网页中添加CSS的方法 CSS样式可以以多种方式灵活地应用到设计的页面中，选择方法根据设计的不同要求来指定。 行内样式表： 指将CSS样式混合在HTML标签里使用，行内样式由HTML元素的style属性支持，只需要将CSS代码用分号隔开，书写在style=“”之中既可。 此做法是先了CSS对元素的精确控制，但是没有很好地将表现与内容分离，所以不推荐这样的用法。 4.2 CSS语法基础 内部样式表： 内部样式表也将CSS样式编写到页面中，不同的是，内部样式可以将样式统一放置在一个固定的位置。这种CSS样式控制的内容一般位于HTML文件的头部，即head/head标签内，并以style开始，以/style结束。 4.2 CSS语法基础 链接外部样式表： 链接外部样式表是CSS应用的首选形式，将CSS样式代码单独编写在一个独立文件中，由页面进行调用，多个网页可以同时使用一个样式表文件。 Style.css文件内容： 4.2 CSS语法基础 CSS字体属性： 文字的属性主要有字体样式、字体大小、字体加粗等。 4.2 CSS语法基础 CSS文本属性： 文本属性指整段文本的样式。包括单词间隔、字符间隔、文本缩进、行高等 4.2 CSS语法基础 CSS背景属性： 4.2 CSS语法基础 CSS边框属性： 4.3 CSS布局基础 表现和结构相分离 1.内容 内容就是页面实际要传达的真正信息，