网页设计CSS样式表应用ppt课件

1、Web Design第四章 CSS款式表运用主讲：钟杰卓主讲：钟杰卓CSS样式表应用样式表应用本章内容概述本章内容概述CSS简介简介1CSS语法根底语法根底2CSS规划根底规划根底3CSS规划实例规划实例4CSS滤镜运用滤镜运用5CSS样式表应用样式表应用4.1 CSS简介简介vCSS的全称是Cascading Style Sheet，通常称为“层叠款式表。是网页设计不可短少的工具之一。v CSS是一组款式，款式的属性在HTML元素中一次出现，并显示在阅读器中。款式可以定义在HTML文档的标志里，也可以放在外部附加文档中，一个款式表文档可以用于多个页面，甚至是整个站点，因此具有更好的易用性和扩

2、展性。v CSS可以减少开发和维护HTML文档所用的时间。添加了Web站点中文档间的灵敏性。CSS样式表应用样式表应用4.2 CSS语法根底语法根底v完成了网页框架的构建，下一步就应该运用CSS来规划和修饰了。运用CSS的方法可以简单概括为：v选择符：表示要定义款式的对象，可以是元素本身，也可以是一类元素或指定称号的元素。v选择属性：制定选择符所具有的属性，它是CSS的中心。CSS 2一共定义了150多个属性，其中大部分属性是用于任何选择符。v定义属性值：数值表示25px、百分比表式20%、范围表示top、right Selector property:value; property:valu

3、e;body color:#333; background-color:#eee;CSS样式表应用样式表应用4.2 CSS语法根底语法根底vCSS选择符选择符v类型选择器：类型选择器：v 类型选择符就是网页元素本身，定义时直接运类型选择符就是网页元素本身，定义时直接运用元素称号，如定义段落款式，可以选择用元素称号，如定义段落款式，可以选择p元素，元素，即把即把p作为选择符。在作为选择符。在HTML和和XHTML中，一切中，一切的元素都可以作为类型选择符来进展定义：的元素都可以作为类型选择符来进展定义：v v v 定义了类型选择符，所定义的属性会影响援用定义了类型选择符，所定义的属性会影响援用这

4、个款式的一切该元素的显示效果。运用恰当会这个款式的一切该元素的显示效果。运用恰当会非常省力，但假设思索不周，贸然定义会给网页非常省力，但假设思索不周，贸然定义会给网页设计添加无穷烦恼。设计添加无穷烦恼。html /*/color : #f60 ;font-size:14px ; Body /*/Margin-left:0px; Margin-top:0px;Td /*/Font-family:宋体宋体,黑体黑体;CSS样式表应用样式表应用4.2 CSS语法根底语法根底nid选择符：选择符：n CSS中的中的id是作为网页中元素的是作为网页中元素的“身份证来运用的。身份证来运用的。因此它是独一的

5、，不同元素的因此它是独一的，不同元素的id值不能反复。运用值不能反复。运用id选择器可以扩展选择器可以扩展HTML和和XHTML元素的显示效果。元素的显示效果。为每个元素的详细对象定义不同的款式，方便了用户为每个元素的详细对象定义不同的款式，方便了用户更加精细地控制页面。更加精细地控制页面。n 当运用当运用id选择符时，应先为元素定义一个选择符时，应先为元素定义一个id属性：属性：n n 在款式表中，需求运用在款式表中，需求运用 # 号进展标识：号进展标识：#lefttable color : #f60 ;font-size:14px ; border:1pt #999 solid; CSS样

6、式表应用样式表应用4.2 CSS语法根底语法根底nclass选择符：选择符：n class是一个集合名次，意味着在一个文档中可以为是一个集合名次，意味着在一个文档中可以为不同类型的元素定义一样的类名。是先把具有一样款不同类型的元素定义一样的类名。是先把具有一样款式的元素一致为一类。运用式的元素一致为一类。运用class选择符可以实现代码选择符可以实现代码简化的目的，节约了了简化的目的，节约了了CSS代码的编写，加强了代码代码的编写，加强了代码的可读性。的可读性。n 当运用当运用class选择符时，首先应为每个元素定义选择符时，首先应为每个元素定义class属性：属性：n n n 在款式表中，需

7、求运用在款式表中，需求运用 . 号进展标识：号进展标识：.red color : #ff0000; CSS样式表应用样式表应用4.2 CSS语法根底语法根底n群选择符：群选择符：n 群选择符不是一种选择符的类型，而是一种选择符群选择符不是一种选择符的类型，而是一种选择符的运用方法。当多个对象定义了一样的款式时，可以的运用方法。当多个对象定义了一样的款式时，可以把它们分成一组，以便简化代码读写，选择符分组，把它们分成一组，以便简化代码读写，选择符分组，可以用逗号把同组内不同对象分割：可以用逗号把同组内不同对象分割：n n n派生选择符：派生选择符：n 可以运用派生选择器给一个元素里的子元素定义款

8、可以运用派生选择器给一个元素里的子元素定义款式，例如，给式，例如，给li下面的子元素下面的子元素a定义文字大小和颜色的定义文字大小和颜色的款式：款式：.dh1 a font-size:12px; color:#333333; p, td, li font-size:12px; CSS样式表应用样式表应用4.2 CSS语法根底语法根底n伪类：伪类：n CSS中用四个伪类来定义链接的款式，分别是：中用四个伪类来定义链接的款式，分别是：a:link、a:visited、a:hover和和a : activen n a:link /* 定义超级链接的默许款式定义超级链接的默许款式 */ font-si

9、ze:12px; color:#c00; text-decoration:none; a:visited /* 定义访问过的链接款式定义访问过的链接款式 */ font-size:12px; color:#c00; text-decoration:none; a:hover /* 定义鼠标经过的链接款式定义鼠标经过的链接款式 */ font-size:12px; color:#f30; text-decoration:underline; a:active /* 定义鼠标按下的链接款式定义鼠标按下的链接款式 */ font-size:12px; color:#c00; text-decorat

10、ion:none; CSS样式表应用样式表应用4.2 CSS语法根底语法根底v在网页中添加在网页中添加CSS的方法的方法v CSS款式可以以多种方式灵敏地运用到设计的款式可以以多种方式灵敏地运用到设计的页面中，选择方法根据设计的不同要求来指定。页面中，选择方法根据设计的不同要求来指定。v行内款式表：行内款式表：v 指将指将CSS款式混合在款式混合在HTML标签里运用，行内标签里运用，行内款式由款式由HTML元素的元素的style属性支持，只需求将属性支持，只需求将CSS代码用分号隔开，书写在代码用分号隔开，书写在style=“之中既可。之中既可。v v 此做法是先了此做法是先了CSS对元素的准

11、确控制，但是没对元素的准确控制，但是没有很好地将表现与内容分别，所以不引荐这样的有很好地将表现与内容分别，所以不引荐这样的用法。用法。CSS样式表应用样式表应用4.2 CSS语法根底语法根底n内部款式表：n 内部款式表也将CSS款式编写到页面中，不同的是，内部款式可以将款式一致放置在一个固定的位置。这种CSS款式控制的内容普通位于HTML文件的头部，即标签内，并以开场，以终了。 CSS样式表应用样式表应用4.2 CSS语法根底语法根底n链接外部款式表：n 链接外部款式表是CSS运用的首选方式，将CSS款式代码单独编写在一个独立文件中，由页面进展调用，多个网页可以同时运用一个款式表文件。n nS

12、tyle.css文件内容： BodyBackground-color:#eeeeee;Margin-left:0px;Margin-top:0px; Td Font-size:12px; CSS样式表应用样式表应用4.2 CSS语法根底语法根底vCSS字体属性：字体属性：v 文字的属性主要有字体款式、字体大小、字体文字的属性主要有字体款式、字体大小、字体加粗等。加粗等。属属 性性属性描述属性描述属性值属性值font-family字体设置。可设置多种字体字体设置。可设置多种字体font-family:”字体字体1”，”字体字体2”font-size设置文字的大小。设置文字的大小。font-siz

13、e:14px;font-style设置字体是否为斜体设置字体是否为斜体font-style:normal | italic | obliquefont-weight设置字体的粗细设置字体的粗细font-weight:normal | bold | bolder | lighter | 100-900font-variant将小写英文字母转变为大写将小写英文字母转变为大写font-variant:normal | small-capsfont-decoration对文本进行修饰，如设置下对文本进行修饰，如设置下划线、删除线划线、删除线font-decoration:underline(添加下划线

14、添加下划线) | overline(上划线上划线) | line-through(删除删除线线) | blink(闪烁文字效果闪烁文字效果)CSS样式表应用样式表应用4.2 CSS语法根底语法根底vCSS文本属性：文本属性：v 文本属性指整段文本的款式。包括单词间隔、文本属性指整段文本的款式。包括单词间隔、字符间隔、文本缩进、行高等字符间隔、文本缩进、行高等属属 性性属性描述属性描述属性值属性值word-spacing设置英文单词间的距离设置英文单词间的距离word-spacing : 15pxletter-spacing设置字母之间的间隔数设置字母之间的间隔数letter-spacing :

15、 14px;text-align设置文本的水平对齐方式设置文本的水平对齐方式Left | right | center | justifyvertical-align设置段落的垂直对齐方式设置段落的垂直对齐方式baseline | sub | super | top | text-top | middle | text-bottomtext-indent设置段落的首行缩进及距离设置段落的首行缩进及距离text-indent:24px;line-height设置文本的行高设置文本的行高line-height:20px | 1.5em | 160%white-space页面文本空格的处理方式页面文

16、本空格的处理方式white-space:pre | nowraptext-transform转换英文字母的大小写转换英文字母的大小写lowercase | uppercase | capitalizeCSS样式表应用样式表应用4.2 CSS语法根底语法根底vCSS背景属性：背景属性：属属 性性属性描述属性描述属性值属性值background-color以固定的颜色作为背景色以固定的颜色作为背景色background-color: #eee ;background-image设置元素的背景图片设置元素的背景图片background-image:url(images/bg.jpg)backgrou

17、nd-repeat设置背景图片的重复方式设置背景图片的重复方式no-repeat | repeat | repeat-x | repeat-ybackground-position设置背景图片位置设置背景图片位置0% % 0% % | 50% % 0%|10%|100% % 0%|%|0% % 50% % top left | top center | left center background-attachment拉动滚动时条背景图是随拉动滚动时条背景图是随对象滚动还是固定不动。对象滚动还是固定不动。scroll | fixedCSS样式表应用样式表应用4.2 CSS语法根底语法根底vCS

18、S边框属性：边框属性：属属 性性属性描述属性描述属性值属性值border-style边框样式：无、实线、虚线边框样式：无、实线、虚线Dotted | dashed | solid | double | groove | ridge | inset | outsetborder-width设置元素边框的宽度设置元素边框的宽度border-width:1pxborder-color设置边框的颜色设置边框的颜色border-color:#333CSS样式表应用样式表应用4.3 CSS规划根底规划根底v表现和构造相分别表现和构造相分别v1.内容内容 v 内容就是页面实践要传达的真正信息，包含数内容就是

19、页面实践要传达的真正信息，包含数据、文档或者图片等。留意这里强调的据、文档或者图片等。留意这里强调的“真正，真正，是指纯粹的数据信息本身。比如一个不包含辅助是指纯粹的数据信息本身。比如一个不包含辅助的信息的信息,比如导航菜单、装饰性图片等。比如导航菜单、装饰性图片等。v2.构造构造(Structure) v 可以看到上面的文本信息本身曾经完好。但是可以看到上面的文本信息本身曾经完好。但是混乱一团，难以阅读和了解，我们必需给它格式混乱一团，难以阅读和了解，我们必需给它格式化一下。把它分成标题、作者、章、节、段落和化一下。把它分成标题、作者、章、节、段落和列表等。列表等。 CSS样式表应用样式表应

20、用4.3 CSS规划根底规划根底n3.表现表现(Presentation)n 虽然定义了构造，但是内容还是原来的款式没虽然定义了构造，但是内容还是原来的款式没有改动，例如标题字体没有变大，正文的颜色也有改动，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。一切这些用来没有变化，没有背景，没有修饰。一切这些用来改动内容外观的东西，我们称之为改动内容外观的东西，我们称之为“表现。表现。n4.行为行为(Behavior) n 行为就是对内容的交互及操作效果。例如，我行为就是对内容的交互及操作效果。例如，我们最熟习不过的们最熟习不过的JavaScript。运用。运用JavaScript

21、我们我们可以使内容动起来，可以判别一些表单提交，可可以使内容动起来，可以判别一些表单提交，可以相应他的一些操作。以相应他的一些操作。CSS样式表应用样式表应用4.3 CSS规划根底规划根底v一切HTML和XHTML页面就是由“构造、表现和行为这三方面组成的。笼一致点了解，内容是根底层，然后是附加上去构造层和表现层，作后再对它们做点“行为：CSS样式表应用样式表应用4.3 CSS规划根底规划根底v 传统的传统的HTMLHTML方法方法 忆江南忆江南 CSS样式表应用样式表应用4.3 CSS规划根底规划根底vweb规范引荐的方法规范引荐的方法忆江南忆江南唐唐.白居易白居易江南好江南好.772846

22、 ，字乐天，字乐天.据据.此词写江南春色此词写江南春色.CSS样式表应用样式表应用4.3 CSS规划根底规划根底v用于规划的时候，它是一个控制表现的标签。混杂在内容和构造中，使我们的内容数据无法再利用。构造与表现相分别带来的益处主要有：v数据的多样显示。经过不同的款式表顺应不同的设备，做到内容与设备无关 v坚持整个站点的视觉一致性变得非常简单，修正款式表就可以轻松改版; v由于构造明晰，数据的集成、更新和处置更加方便灵敏； v更有意义的搜索。 CSS样式表应用样式表应用4.3 CSS规划根底规划根底v调用款式表调用款式表 v link rel=stylesheet type=text/css

23、media=all / v 在符合在符合webweb规范的设计中，我们运用外部调用法，规范的设计中，我们运用外部调用法，益处不言而喻，他可以不修正页面只修正益处不言而喻，他可以不修正页面只修正.css.css文文件而改动页面的款式。假设一切页面都调用同一件而改动页面的款式。假设一切页面都调用同一个款式表文件，那么改一个款式表文件，可以改个款式表文件，那么改一个款式表文件，可以改动一切文件的款式。动一切文件的款式。CSS样式表应用样式表应用4.3 CSS规划根底规划根底vCSS盒模型CSS样式表应用样式表应用4.3 CSS规划根底规划根底vCSS盒模型盒模型vCSS定义一切的元素都可以拥有像盒子

24、一样的外定义一切的元素都可以拥有像盒子一样的外形和平面空间，即都包含边境、边框、补白、内形和平面空间，即都包含边境、边框、补白、内容区域、背景包括背风光和背景图片，这就容区域、背景包括背风光和背景图片，这就是盒模型，它规范了网页元素的显示根底。是盒模型，它规范了网页元素的显示根底。v在元素内容与边框之间的空白区域，被称为元素在元素内容与边框之间的空白区域，被称为元素的补白的补白(padding)，或内边距；在元素边框之外的，或内边距；在元素边框之外的空白区域，称为边境空白区域，称为边境(margin)，或外边距。，或外边距。v盒模型的提出，使网页规划完全摆脱了表格的束盒模型的提出，使网页规划完

25、全摆脱了表格的束缚，任何元素对象，无论是传统的段落、列表、缚，任何元素对象，无论是传统的段落、列表、标题、图片，还是规范规划中的标题、图片，还是规范规划中的div和和span新元素，新元素，都可以经过本人的属性来实现规划，设置模型显都可以经过本人的属性来实现规划，设置模型显示效果示效果CSS样式表应用样式表应用4.3 CSS规划根底规划根底vCSS盒模型盒模型v 一切的网页元素都可以包括四个区域：一切的网页元素都可以包括四个区域：内容区、补白区、边框区和边境区。在内容区、补白区、边框区和边境区。在CSS中，可以添加补白、边框和边境的区域大中，可以添加补白、边框和边境的区域大小，而不影响内容区域

26、。小，而不影响内容区域。#box height:160px;width:260px;margin:60px;padding:60px;border:solid 60px #aaa;background-image:url(box.jpg);background-color:#CC99CC; CSS样式表应用样式表应用4.3 CSS规划根底规划根底vCSS盒模型盒模型margin-leftmargin-rightmargin-topmargin-bottomborder-leftborder-rightborder-topborder-bottompadding-leftpadding-righ

27、tpadding-toppadding-bottomwidthheightCSS样式表应用样式表应用4.3 CSS规划根底规划根底v盒模型的类型盒模型的类型v CSS把盒模型分为两种根本形状：把盒模型分为两种根本形状：Block块状和块状和Inline内联或行内。内联或行内。v在默许形状下，块状元素的宽度为在默许形状下，块状元素的宽度为100%，而且后面隐藏附带有换行符，使块状元素一而且后面隐藏附带有换行符，使块状元素一直占据一行。直占据一行。v 如：如：div、p 、table 、ul 、li 、ol 、dl 、h1-h6v内联元素没有高度和宽度，因此也就没有固内联元素没有高度和宽度，因此也

28、就没有固定的外形，定义它的定的外形，定义它的width和和height属性无效。属性无效。内联元素可以在行内自在流动，但它会遵照内联元素可以在行内自在流动，但它会遵照盒模型的根本规那么，可以定义边境、补白、盒模型的根本规那么，可以定义边境、补白、边框及背景。边框及背景。v 如：如：a 、b 、em 、span 、imgCSS样式表应用样式表应用4.3 CSS规划根底规划根底n盒模型的显示类型可以运用display属性来定义。任何元素都可以经过display属性改动默许显示类型。display属性的选项值如下：nblock：块状显示，在元素后面添加换行符，也就是说，其他元素不能在其后并列显示。n

29、none：隐藏显示，此声明不会为被隐藏的元素保管位置。ninline：内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。nlist-item：具有块状特征的列表工程显示，可添加可选工程标志。CSS样式表应用样式表应用4.3 CSS规划根底规划根底v规划模型规划模型v 规划模型与盒模型一样都是规划模型与盒模型一样都是CSS最根本、最根本、最中心的概念，最中心的概念，CSS包含包含3种根本的规划模型：种根本的规划模型：Flow、Layer和和Floatv1. Flow Model(流动模型流动模型)v 流动模型是流动模型是HTML默许规划模型，在此模默许规划模型，在此模型中，元素本身是

30、被动的，随着文档流自上型中，元素本身是被动的，随着文档流自上而下按顺序动态分布。流动规划只能根据元而下按顺序动态分布。流动规划只能根据元素陈列的先后顺序来决议分布位置，要改动素陈列的先后顺序来决议分布位置，要改动某个元素的位置，只能经过改动它在某个元素的位置，只能经过改动它在HTML文档流中的分布位置。同时这种方式又是活文档流中的分布位置。同时这种方式又是活动的，它的位置随时发生变化，当我们在一动的，它的位置随时发生变化，当我们在一个元素前面添加另一个元素，它的位置会向个元素前面添加另一个元素，它的位置会向后推移。后推移。CSS样式表应用样式表应用4.3 CSS规划根底规划根底2. Layer

31、 Model(层模型层模型) Layer将页面的内容引入层，希望像图像编辑器那将页面的内容引入层，希望像图像编辑器那样准确定位网页元素，摆脱样准确定位网页元素，摆脱HTML元素自然流动带元素自然流动带来的弊端。然而网页永远是一个活动的窗口，没法来的弊端。然而网页永远是一个活动的窗口，没法预知不同阅读者所运用的窗口大小，同时大部分网预知不同阅读者所运用的窗口大小，同时大部分网页本身的大小也是无法预测和控制的。页本身的大小也是无法预测和控制的。3. Float Model(浮动模型浮动模型) 浮动模型汲取了前两者的优点，希望在流动和固定浮动模型汲取了前两者的优点，希望在流动和固定之间获得一个平衡，

32、实现网页规划的自顺应才干。之间获得一个平衡，实现网页规划的自顺应才干。CSS样式表应用样式表应用4.3 CSS规划根底规划根底v流动规划模型流动规划模型v流动规划模型的特征流动规划模型的特征v 任何没有详细定义定位方式的元素，默许任何没有详细定义定位方式的元素，默许都呈现流动规划方式都呈现流动规划方式v块状元素都会在所处的包含元素内自上而下块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布按顺序垂直延伸分布v内联元素都会在所处的包含元素内从左到右内联元素都会在所处的包含元素内从左到右程度分布显示。程度分布显示。CSS样式表应用样式表应用4.3 CSS规划根底规划根底v层规划模型层规划模型

33、v 层规划模型中最中心的技术是元素的定位层规划模型中最中心的技术是元素的定位类型。类型。v该属性取值可以包括：该属性取值可以包括：static、absolute、fixed和和relativevstatic：不定位，遵照默许的流动模型。：不定位，遵照默许的流动模型。vabsolute：绝对定位，将元素从文档流中拖出：绝对定位，将元素从文档流中拖出来，运用来，运用leftrighttopbottom属性相对于其属性相对于其最接近的一个具有定位属性的父包含块进展最接近的一个具有定位属性的父包含块进展绝对定位。绝对定位。vfixed：固定定位。元素本身是固定的，不会：固定定位。元素本身是固定的，不会

34、随阅读器窗口的滚动条滚动而变化。随阅读器窗口的滚动条滚动而变化。vrelative：相对定位。经过：相对定位。经过leftrighttopbottom属性确定元素在正常文属性确定元素在正常文档流中的偏移位置。档流中的偏移位置。div position:absolute; CSS样式表应用样式表应用4.3 CSS规划根底规划根底n绝对定位包含块绝对定位包含块n CSS包含块是绝对定位的根底。包含块是对绝对包含块是绝对定位的根底。包含块是对绝对定位元素提供坐标偏移和显示范围的参照物，即确定位元素提供坐标偏移和显示范围的参照物，即确定绝对定位的偏移起点的参考。默许形状下，定绝对定位的偏移起点的参考。

35、默许形状下，body元素就是一个大的包含块，一切绝对定位的元素都元素就是一个大的包含块，一切绝对定位的元素都是根据窗口来确定本人所处的位置和百分比大小显是根据窗口来确定本人所处的位置和百分比大小显示的。但是假设我们定义了某个元素为包含块后，示的。但是假设我们定义了某个元素为包含块后，对于包含的绝对定位元素来说，就会根据最接近的对于包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决议本人的显示位具有定位功能的上级包含元素来决议本人的显示位置。置。n 普通情况下，用普通情况下，用position属性来定义恣意包含块，属性来定义恣意包含块，position属性有效取值包括属性有效取值包括absolute、fixed、relativeCSS样式表应用样式表应用4.3 CSS规划根底规划根底v浮动规划模型浮动规划模型v 任何元素在默许情况下都是不能浮动的，任何元素在默