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

《网页设计CSS样式表应用.ppt》由会员分享，可在线阅读，更多相关《网页设计CSS样式表应用.ppt（38页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、CSS样式表应用样式表应用网页设计CSS样式表应用 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望CSS样式表应用样式表应用本章内容概述本章内容概述CSS简介简介1CSS语法基础语法基础2CSS布局基础布局基础3CSS布局实例布局实例4CSS滤镜应用滤镜应用51CSS样式表应用样式表应用4.1 CSS简介简介vCSS的全称是Cascading Style Sheet，通常称为“层叠样式表”。是网页设计不可缺少的工具之一。CSS是一组样式，样式的属性在HTML元素中

2、一次出现，并显示在浏览器中。样式可以定义在HTML文档的标记里，也可以放在外部附加文档中，一个样式表文档可以用于多个页面，甚至是整个站点，因此具有更好的易用性和扩展性。CSS可以减少开发和维护HTML文档所用的时间。增加了Web站点中文档间的灵活性。2CSS样式表应用样式表应用4.2 CSS语法基础语法基础v完成了网页框架的构建，下一步就应该使用CSS来布局和修饰了。使用CSS的方法可以简单概括为：n选择符：选择符：表示要定义样式的对象，可以是元素本身，也可以是一类元素或指定名称的元素。n选择属性：选择属性：制定选择符所具有的属性，它是CSS的核心。CSS 2一共定义了150多个属性，其中大部

3、分属性是用于任何选择符。n定义属性值：定义属性值：数值表示（25px）、百分比表式（20%）、范围表示（top、right）Selector property:value;property:value;body color:#333;background-color:#eee;3CSS样式表应用样式表应用4.2 CSS语法基础语法基础vCSS选择符选择符n类型选择器：类型选择器：类型选择符就是网页元素本身，定义时直接使用元素名称，如定义段落样式，可以选择p元素，即把p作为选择符。在HTML和XHTML中，所有的元素都可以作为类型选择符来进行定义：定义了类型选择符，所定义的属性会影响引用这个样式

4、的所有该元素的显示效果。使用恰当会非常省力，但如果考虑不周，贸然定义会给网页设计增加无穷烦恼。html /*/color:#f60;font-size:14px;Body /*/Margin-left:0px;Margin-top:0px;Td /*/Font-family:”宋体宋体”,”黑体黑体”;4CSS样式表应用样式表应用4.2 CSS语法基础语法基础nid选择符：选择符：CSS中的id是作为网页中元素的“身份证”来使用的。因此它是唯一的，不同元素的id值不能重复。使用id选择器能够扩展HTML和XHTML元素的显示效果。为每个元素的具体对象定义不同的样式，方便了用户更加精细地控制页面

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

6、olor:#ff0000;6CSS样式表应用样式表应用4.2 CSS语法基础语法基础n群选择符：群选择符：群选择符不是一种选择符的类型，而是一种选择符的使用方法。当多个对象定义了相同的样式时，可以把它们分成一组，以便简化代码读写，选择符分组，可以用逗号把同组内不同对象分割：n派生选择符：派生选择符：可以使用派生选择器给一个元素里的子元素定义样式，例如，给li下面的子元素a定义文字大小和颜色的样式：.dh1 a font-size:12px;color:#333333;p,td,li font-size:12px;7CSS样式表应用样式表应用4.2 CSS语法基础语法基础n伪类：伪类：CSS中用

7、四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a:active a:link /*定义超级链接的默认样式定义超级链接的默认样式*/font-size: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:

8、active /*定义鼠标按下的链接样式定义鼠标按下的链接样式*/font-size:12px;color:#c00;text-decoration:none;8CSS样式表应用样式表应用4.2 CSS语法基础语法基础v在网页中添加在网页中添加CSS的方法的方法 CSS样式可以以多种方式灵活地应用到设计的页面中，选择方法根据设计的不同要求来指定。n行内样式表：指将CSS样式混合在HTML标签里使用，行内样式由HTML元素的style属性支持，只需要将CSS代码用分号隔开，书写在style=“”之中既可。此做法是先了CSS对元素的精确控制，但是没有很好地将表现与内容分离，所以不推荐这样的用法。9

9、CSS样式表应用样式表应用4.2 CSS语法基础语法基础n内部样式表：内部样式表也将CSS样式编写到页面中，不同的是，内部样式可以将样式统一放置在一个固定的位置。这种CSS样式控制的内容一般位于HTML文件的头部，即标签内，并以开始，以结束。10CSS样式表应用样式表应用4.2 CSS语法基础语法基础n链接外部样式表：链接外部样式表是CSS应用的首选形式，将CSS样式代码单独编写在一个独立文件中，由页面进行调用，多个网页可以同时使用一个样式表文件。Style.css文件内容：BodyBackground-color:#eeeeee;Margin-left:0px;Margin-top:0px;

10、Td Font-size:12px;11CSS样式表应用样式表应用4.2 CSS语法基础语法基础vCSS字体属性：字体属性：文字的属性主要有字体样式、字体大小、字体加粗等。属属 性性属性描述属性描述属性值属性值font-family字体设置。可设置多种字体字体设置。可设置多种字体font-family:”字体字体1”，”字体字体2”font-size设置文字的大小。设置文字的大小。font-size:14px;font-style设置字体是否为斜体设置字体是否为斜体font-style:normal|italic|obliquefont-weight设置字体的粗细设置字体的粗细font-wei

11、ght:normal|bold|bolder|lighter|100-900font-variant将小写英文字母转变为大写将小写英文字母转变为大写font-variant:normal|small-capsfont-decoration对文本进行修饰，如设置下对文本进行修饰，如设置下划线、删除线划线、删除线font-decoration:underline(添加下划线添加下划线)|overline(上划线上划线)|line-through(删除删除线线)|blink(闪烁文字效果闪烁文字效果)12CSS样式表应用样式表应用4.2 CSS语法基础语法基础vCSS文本属性：文本属性：文本属性指整

12、段文本的样式。包括单词间隔、字符间隔、文本缩进、行高等属属 性性属性描述属性描述属性值属性值word-spacing设置英文单词间的距离设置英文单词间的距离word-spacing:15pxletter-spacing设置字母之间的间隔数设置字母之间的间隔数letter-spacing:14px;text-align设置文本的水平对齐方式设置文本的水平对齐方式Left|right|center|justifyvertical-align设置段落的垂直对齐方式设置段落的垂直对齐方式baseline|sub|super|top|text-top|middle|text-bottomtext-ind

13、ent设置段落的首行缩进及距离设置段落的首行缩进及距离text-indent:24px;line-height设置文本的行高设置文本的行高line-height:20px|1.5em|160%white-space页面文本空格的处理方式页面文本空格的处理方式white-space:pre|nowraptext-transform转换英文字母的大小写转换英文字母的大小写lowercase|uppercase|capitalize13CSS样式表应用样式表应用4.2 CSS语法基础语法基础vCSS背景属性：背景属性：属属 性性属性描述属性描述属性值属性值background-color以固定的颜色

14、作为背景色以固定的颜色作为背景色background-color:#eee;background-image设置元素的背景图片设置元素的背景图片background-image:url(images/bg.jpg)background-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拉动滚

15、动时条背景图是随拉动滚动时条背景图是随对象滚动还是固定不动。对象滚动还是固定不动。scroll|fixed14CSS样式表应用样式表应用4.2 CSS语法基础语法基础vCSS边框属性：边框属性：属属 性性属性描述属性描述属性值属性值border-style边框样式：无、实线、虚线边框样式：无、实线、虚线Dotted|dashed|solid|double|groove|ridge|inset|outsetborder-width设置元素边框的宽度设置元素边框的宽度border-width:1pxborder-color设置边框的颜色设置边框的颜色border-color:#33315CSS样式

16、表应用样式表应用4.3 CSS布局基础布局基础v表现和结构相分离表现和结构相分离n1.内容内容 内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一个不包含辅助的信息,比如导航菜单、装饰性图片等。n2.结构结构(Structure)可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。16CSS样式表应用样式表应用4.3 CSS布局基础布局基础n3.表现表现(Presentation)虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正

17、文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”。n4.行为行为(Behavior)行为就是对内容的交互及操作效果。例如，我们最熟悉不过的JavaScript。使用JavaScript我们可以使内容动起来，可以判断一些表单提交，可以相应你的一些操作。17CSS样式表应用样式表应用4.3 CSS布局基础布局基础v所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，作后再对它们做点“行为”：18CSS样式表应用样式表应用4.3 CSS布局基础布局基础v传统的传统的HTML方法方法

18、忆江南忆江南 19CSS样式表应用样式表应用4.3 CSS布局基础布局基础vweb标准推荐的方法标准推荐的方法忆江南忆江南唐唐.白居易白居易江南好江南好.772846，字乐天，字乐天.据据乐府杂录乐府杂录.此词写江南春色此词写江南春色.20CSS样式表应用样式表应用4.3 CSS布局基础布局基础v用于布局的时候，它是一个控制表现的标签。混杂在内容和结构中，使我们的内容数据无法再利用。结构与表现相分离带来的好处主要有：数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关 保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版;由于结构清晰，数据的集成、更新和处理更加方便灵活

19、；更有意义的搜索。21CSS样式表应用样式表应用4.3 CSS布局基础布局基础v调用样式表调用样式表 在符合web标准的设计中，我们使用外部调用法，好处不言而喻，你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。22CSS样式表应用样式表应用4.3 CSS布局基础布局基础vCSS盒模型23CSS样式表应用样式表应用4.3 CSS布局基础布局基础vCSS盒模型盒模型nCSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景（包括背景色和背景图片），这就是盒模型，它规范了网

20、页元素的显示基础。n在元素内容与边框之间的空白区域，被称为元素的补白(padding)，或内边距；在元素边框之外的空白区域，称为边界(margin)，或外边距。n盒模型的提出，使网页布局完全摆脱了表格的束缚，任何元素对象，无论是传统的段落、列表、标题、图片，还是标准布局中的div和span新元素，都可以通过自己的属性来实现布局，设置模型显示效果24CSS样式表应用样式表应用4.3 CSS布局基础布局基础vCSS盒模型盒模型 所有的网页元素都可以包括四个区域：内容区、补白区、边框区和边界区。在CSS中，可以增加补白、边框和边界的区域大小，而不影响内容区域。#box height:160px;wi

21、dth:260px;margin:60px;padding:60px;border:solid 60px#aaa;background-image:url(box.jpg);background-color:#CC99CC;25CSS样式表应用样式表应用4.3 CSS布局基础布局基础vCSS盒模型盒模型margin-leftmargin-rightmargin-topmargin-bottomborder-leftborder-rightborder-topborder-bottompadding-leftpadding-rightpadding-toppadding-bottomwidthh

22、eight26CSS样式表应用样式表应用4.3 CSS布局基础布局基础v盒模型的类型盒模型的类型 CSS把盒模型分为两种基本形态：Block（块状）和Inline（内联或行内）。n在默认状态下，块状元素的宽度为100%，而且后面隐藏附带有换行符，使块状元素始终占据一行。如：div、p、table、ul、li、ol、dl、h1-h6n内联元素没有高度和宽度，因此也就没有固定的形状，定义它的width和height属性无效。内联元素可以在行内自由流动，但它会遵循盒模型的基本规则，可以定义边界、补白、边框及背景。如：a、b、em、span、img27CSS样式表应用样式表应用4.3 CSS布局基础布

23、局基础n盒模型的显示类型可以使用display属性来定义。任何元素都可以通过display属性改变默认显示类型。display属性的选项值如下：block：块状显示，在元素后面添加换行符，也就是说，其他元素不能在其后并列显示。none：隐藏显示，此声明不会为被隐藏的元素保留位置。inline：内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。list-item：具有块状特征的列表项目显示，可添加可选项目标志。28CSS样式表应用样式表应用4.3 CSS布局基础布局基础v布局模型布局模型 布局模型与盒模型一样都是CSS最基本、最核心的概念，CSS包含3种基本的布局模型：Flow、La

24、yer和Float1.Flow Model(流动模型流动模型)流动模型是HTML默认布局模型，在此模型中，元素本身是被动的，随着文档流自上而下按顺序动态分布。流动布局只能根据元素排列的先后顺序来决定分布位置，要改变某个元素的位置，只能通过改变它在HTML文档流中的分布位置。同时这种模式又是活动的，它的位置随时发生变化，当我们在一个元素前面添加另一个元素，它的位置会向后推移。29CSS样式表应用样式表应用4.3 CSS布局基础布局基础2.Layer Model(层模型层模型)Layer将页面的内容引入层，希望像图像编辑器那样精确定位网页元素，摆脱HTML元素自然流动带来的弊端。然而网页永远是一个

25、活动的窗口，没法预知不同浏览者所使用的窗口大小，同时大部分网页本身的大小也是无法预测和控制的。3.Float Model(浮动模型浮动模型)浮动模型汲取了前两者的优点，希望在流动和固定之间取得一个平衡，实现网页布局的自适应能力。30CSS样式表应用样式表应用4.3 CSS布局基础布局基础v流动布局模型流动布局模型n流动布局模型的特征流动布局模型的特征 任何没有具体定义定位方式的元素，默认都呈现流动布局模式块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布内联元素都会在所处的包含元素内从左到右水平分布显示。31CSS样式表应用样式表应用4.3 CSS布局基础布局基础v层布局模型层布局模型

26、层布局模型中最核心的技术是元素的定位类型。该属性取值可以包括：该属性取值可以包括：static、absolute、fixed和和relativestatic：不定位，遵循默认的流动模型。absolute：绝对定位，将元素从文档流中拖出来，使用leftrighttopbottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。fixed：固定定位。元素本身是固定的，不会随浏览器窗口的滚动条滚动而变化。relative：相对定位。通过leftrighttopbottom属性确定元素在正常文档流中的偏移位置。div position:absolute;32CSS样式表应用样式表应用4.3

27、 CSS布局基础布局基础n绝对定位包含块绝对定位包含块 CSS包含块是绝对定位的基础。包含块是对绝对定位元素提供坐标偏移和显示范围的参照物，即确定绝对定位的偏移起点的参考。默认状态下，body元素就是一个大的包含块，所有绝对定位的元素都是根据窗口来确定自己所处的位置和百分比大小显示的。但是如果我们定义了某个元素为包含块后，对于包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决定自己的显示位置。一般情况下，用一般情况下，用position属性来定义任意包含块，属性来定义任意包含块，position属性有效取值包括属性有效取值包括absolute、fixed、relative3

28、3CSS样式表应用样式表应用4.3 CSS布局基础布局基础v浮动布局模型浮动布局模型 任何元素在默认情况下都是不能浮动的，但是可以用CSS定义为浮动。n浮动布局模型的特征浮动布局模型的特征任何定义为float的元素都会自动被设置为一个块状元素显示，这样就可以为浮动元素定义width和height属性。浮动模型不会与流动模型发生冲突。当文档定义为浮动布局时，它在垂直方向上应该还处于文档流中，既不会脱离正常的文档流任意浮动。浮动元素始终位于包含元素内，不会游离于外，或破坏包含元素div float:left;/*取值还包括取值还包括right、none*/34CSS样式表应用样式表应用4.4 CS

29、S扩展滤镜扩展滤镜v滤镜可以用来改变图象或文字外观，如加阴影、滤镜可以用来改变图象或文字外观，如加阴影、图像透明效果等。增加元素的视觉效果。图像透明效果等。增加元素的视觉效果。n不透明度：不透明度：alpha 不透明度alpha滤镜标记可以设置图像或文字的不透明度。其属性参数如下表：属属 性性属性描述属性描述opacity设置对象的不透明度，取值范围设置对象的不透明度，取值范围0100，默认为，默认为0，即完全透明，即完全透明finishopacity可选项，设置对象透明渐变的结束透明度，取值范围可选项，设置对象透明渐变的结束透明度，取值范围0100style用于指定渐变的形状，用于指定渐变的

30、形状，0为无渐变，为无渐变，1为直线渐变，为直线渐变，2为圆型渐变，为圆型渐变，3为矩形渐变为矩形渐变startx透明渐变开始点的水平坐标，其数值作为对象宽度的百分比处理，默认为透明渐变开始点的水平坐标，其数值作为对象宽度的百分比处理，默认为0starty透明渐变开始点的垂直坐标透明渐变开始点的垂直坐标finishx透明渐变结束点的水平坐标透明渐变结束点的水平坐标finishy透明渐变结束点的垂直坐标透明渐变结束点的垂直坐标35CSS样式表应用样式表应用4.3 CSS布局基础布局基础36CSS样式表应用样式表应用4.4 CSS扩展滤镜扩展滤镜n动感模糊：动感模糊：blurn对颜色进行透明处理：对颜色进行透明处理：chroman设置阴影：设置阴影：dropshadown对象的翻转：对象的翻转：flipH、flipVn发光效果：发光效果：glown灰度处理：灰度处理：gray n反相：反相：invertnX光片效果：光片效果：Xrayn遮罩效果：遮罩效果：maskn波形滤镜：波形滤镜：wave 37