网络应用程序设计--CSS导论.ppt
网络应用程序设计网络应用程序设计-CSS导论导论CSS导论段会川山东师范大学信息科学与工程学院2006年10月网络应用程序设计网络应用程序设计-CSS导论导论目目 录录先决知识先决知识何为何为CSS?CSS?CSSCSS综合演示综合演示样式解决了一个带有普遍性的问题样式解决了一个带有普遍性的问题样式可以为您节省很多劳动样式可以为您节省很多劳动多个样式可以级联为一个样式多个样式可以级联为一个样式CSSCSS语法语法 CSSCSS语法要点语法要点样式组样式组类类(class)(class)选择器选择器1/15/20231/15/20232 2参考参考:网络应用程序设计网络应用程序设计-CSS导论导论目目 录录类类(class)(class)选择器选择器标识标识(id)(id)选择器选择器CSSCSS注释注释(comment)(comment)使用内部样式单使用内部样式单内联样式内联样式多重样式多重样式CSSCSS背景样式背景样式CSSCSS文本样式文本样式CSSCSS字体字体(font)(font)CSSCSS边框边框(border)(border)1/15/20231/15/20233 3参考参考:网络应用程序设计网络应用程序设计-CSS导论导论目目 录录CSSCSS边空边空(margin)(margin)CSSCSS填充填充(padding)(padding)CSSCSS列表列表(list)(list)CSSCSS元素尺寸元素尺寸(dimension)(dimension)CSSCSS分级定位分级定位(classification)(classification)CSSCSS定位定位(positioning)(positioning)CSSCSS赝类赝类(pseudo-classes)(pseudo-classes)CSSCSS赝元素赝元素(pseudo-elements)(pseudo-elements)CSS2CSS2媒体类型媒体类型(media types)(media types)CSSCSS综合演示综合演示1/15/20231/15/20234 4参考参考:网络应用程序设计网络应用程序设计-CSS导论导论先决知识先决知识HTML/XHTMLHTML/XHTML1/15/20231/15/20235 5参考参考:网络应用程序设计网络应用程序设计-CSS导论导论何为何为CSS?CSSCSS代表层叠样式单代表层叠样式单(Cascading Style Sheet),(Cascading Style Sheet),也译也译作级联样式单作级联样式单,简称为样式单简称为样式单样式用于定义如何显示样式用于定义如何显示HTMLHTML元素元素通常样式放在样式单中通常样式放在样式单中样式被样式被HTML 4.0HTML 4.0采用是为了解决一个问题采用是为了解决一个问题外部样式单可以为您节省许多劳动外部样式单可以为您节省许多劳动外部样式单存储在外部样式单存储在CSSCSS文件中文件中多个样式定义可以级联起来构成一个样式多个样式定义可以级联起来构成一个样式1/15/20231/15/20236 6参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS综合演示综合演示CSSDemoA.htmCSSDemoA.htm1/15/20231/15/20237 7参考参考:网络应用程序设计网络应用程序设计-CSS导论导论样式解决了一个带有普遍性的问题样式解决了一个带有普遍性的问题设计设计HTMLHTML标签的本意是定义文档的内容标签的本意是定义文档的内容它们本来想使用诸如它们本来想使用诸如,等描述等描述”这是一个标这是一个标题题”,“,“这是一个段落这是一个段落”,“,“这是一个表格这是一个表格”而文档的外观由浏览器决定而文档的外观由浏览器决定,不需要借助于任何的格式化标签不需要借助于任何的格式化标签随着两种主要的浏览器随着两种主要的浏览器NetscapeNetscape和和IEIE不断地向原来的不断地向原来的HTMLHTML规范中增加新的规范中增加新的HTMLHTML标签和属性标签和属性,人们发现创建将人们发现创建将HTMLHTML文档与其外观展示清楚地分离开来的站点越来越困难文档与其外观展示清楚地分离开来的站点越来越困难为解决这一问题为解决这一问题,W3C(World Wide Consortium,WWW,W3C(World Wide Consortium,WWW联盟联盟)负责标准化负责标准化HTMLHTML的非盈利性组织的非盈利性组织在创建在创建HTML 4.0HTML 4.0的同的同时引入了样式时引入了样式目前目前,所有主流的浏览器都支持所有主流的浏览器都支持CSSCSS1/15/20231/15/20238 8参考参考:网络应用程序设计网络应用程序设计-CSS导论导论样式可以为您节省很多劳动样式可以为您节省很多劳动如同如同HTML 3.2HTML 3.2中的中的标签及其标签及其colorcolor属性属性,样式单样式单定义了定义了HTMLHTML元素的显示方式元素的显示方式 样式通常存储在外部的样式通常存储在外部的.csscss文件中文件中.CSSCSS是是WebWeb设计技术的一个重大突破设计技术的一个重大突破 因为它使开发者可以快速地控制多个的因为它使开发者可以快速地控制多个的WebWeb页的样式和外页的样式和外观效果观效果 WebWeb开发者可以为每个开发者可以为每个HTMLHTML元素定义样式元素定义样式,然后将它应用然后将它应用到所期望的任何数量的到所期望的任何数量的WebWeb页上页上1/15/20231/15/20239 9参考参考:网络应用程序设计网络应用程序设计-CSS导论导论多个样式可以级联为一个样式多个样式可以级联为一个样式样式单允许将样式定义在单一的样式单允许将样式定义在单一的HTMLHTML元素上元素上,定义定义在在HTMLHTML网页的网页的headhead部分部分,或定义在一个外部的或定义在一个外部的CSSCSS文件中文件中 一个一个HTMLHTML文档也可以引用多个外部样式单文档也可以引用多个外部样式单级联次序级联次序:所有的样式将按照如下的规则所有的样式将按照如下的规则”级联级联”为为一个新的一个新的”虚拟虚拟”样式单样式单,其中其中4 4级为最高级级为最高级,高级的高级的样式将覆盖低级的样式样式将覆盖低级的样式 浏览器默认值浏览器默认值 外部样式单外部样式单 出现在出现在headhead部分的内部样式单部分的内部样式单 出现在出现在HTMLHTML元素中的内联样式单元素中的内联样式单1/15/20231/15/20231010参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS语法语法CSSCSS语法由三部分组成语法由三部分组成 选择器选择器(selector),(selector),参数参数(property,(property,也称属性也称属性),),值值(value)(value)selector property:valueselector property:value选择器是你要定义样式的选择器是你要定义样式的HTMLHTML元素或标签元素或标签参数是你期望改变的标签属性参数是你期望改变的标签属性(attribute)(attribute)值就是你期望参数要取的值值就是你期望参数要取的值参数和值之间用冒号隔开参数和值之间用冒号隔开,且放在花括号中且放在花括号中 如如:body color:black:body color:black1/15/20231/15/20231111参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS语法要点语法要点如果值包括多个单词如果值包括多个单词,则用双引号括起来则用双引号括起来p font-family:sans serifp font-family:sans serif多个参数间中分号隔开多个参数间中分号隔开p text-p text-align:center;color:redalign:center;color:red 为增强可读性为增强可读性,你可以使每个参数单独占用一行你可以使每个参数单独占用一行p p text-align:center;text-align:center;color:black;color:black;font-family:font-family:arialarial 1/15/20231/15/20231212参考参考:网络应用程序设计网络应用程序设计-CSS导论导论样式组样式组你可以将多个选择器以逗号隔开归为一组你可以将多个选择器以逗号隔开归为一组h1,h2,h3,h4,h5,h6 h1,h2,h3,h4,h5,h6 color:greencolor:green 1/15/20231/15/20231313参考参考:网络应用程序设计网络应用程序设计-CSS导论导论类类(class)选择器选择器使用类选择器你可以为一种使用类选择器你可以为一种HTMLHTML元素定义不同的样元素定义不同的样式式如下例子定义了两种类型的段落如下例子定义了两种类型的段落:右对齐和居中右对齐和居中p.rightp.right text-align:right text-align:rightp.centerp.center text-align:center text-align:center 这两类段落可以如下方式使用这两类段落可以如下方式使用这些文字将右对齐这些文字将右对齐.这些文字将居中这些文字将居中.1/15/20231/15/20231414参考参考:网络应用程序设计网络应用程序设计-CSS导论导论类类(class)选择器选择器可以为一个元素使用多个类可以为一个元素使用多个类 这个段落使用这个段落使用”center”center”和和”bold”bold”两个样式类两个样式类.1/15/20231/15/20231515参考参考:网络应用程序设计网络应用程序设计-CSS导论导论类类(class)选择器选择器也可以定义通用的样式类也可以定义通用的样式类.center text-align:center.center text-align:center通用的样式类可以用到所有含指定属性的元素上通用的样式类可以用到所有含指定属性的元素上这个标题将居中这个标题将居中这个段落将居中这个段落将居中.注意注意:不要取数字开头的类名不要取数字开头的类名1/15/20231/15/20231616参考参考:网络应用程序设计网络应用程序设计-CSS导论导论标识标识(id)选择器选择器你可以为你可以为HTMLHTML元素的标识元素的标识(id)(id)设定样式设定样式如果你定义了如下所示的如果你定义了如下所示的idid绿色标题绿色标题绿色段落绿色段落则可定义如下的样式则可定义如下的样式#green color:green#green color:green 你也可以直接为特定标识的元素定义样式你也可以直接为特定标识的元素定义样式p#para1p#para1 text-align:center;text-align:center;color:redcolor:red 1/15/20231/15/20231717参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS注释注释(comment)注释已经成为计算机科学中重要的文化注释已经成为计算机科学中重要的文化CSSCSS使用使用C C格式的注释语法格式的注释语法/*/*定义段落样式定义段落样式*/p p text-align:center;text-align:center;/*/*为段落定义颜色和字体为段落定义颜色和字体*/color:black;color:black;font-family:font-family:黑体黑体 1/15/20231/15/20231818参考参考:网络应用程序设计网络应用程序设计-CSS导论导论使用外部样式单使用外部样式单外部样式单需要在外部样式单需要在headhead部分使用部分使用标签引用标签引用link /外部样式单要保存类型名为外部样式单要保存类型名为.csscss的文本文件中的文本文件中,此文此文件中不能含有件中不能含有HTMLHTML标签标签,如如:hr color:siennahr color:siennap margin-left:20pxp margin-left:20pxbody background-image:url(images/back40.gif)body background-image:url(images/back40.gif)1/15/20231/15/20231919参考参考:网络应用程序设计网络应用程序设计-CSS导论导论使用内部样式单使用内部样式单内部样式单需要在内部样式单需要在headhead部分使用部分使用标签定义标签定义style type=text/hr color:siennahr color:siennap margin-left:20pxp margin-left:20pxbody background-image:url(images/back40.gif)body background-image:url(images/back40.gif)1/15/20231/15/20232020参考参考:网络应用程序设计网络应用程序设计-CSS导论导论内联样式内联样式内联样式用内联样式用HTMLHTML标签的标签的stylestyle属性定义属性定义这是一个使用内联样式的段落这是一个使用内联样式的段落.内联样式使样式单失去了本来的意义内联样式使样式单失去了本来的意义,因此应该尽量因此应该尽量避免使用内联样式避免使用内联样式1/15/20231/15/20232121参考参考:网络应用程序设计网络应用程序设计-CSS导论导论多重样式多重样式如果为如果为h3h3定义了如下的外部样式定义了如下的外部样式h3 color:red;text-align:left;font-size:8pt h3 color:red;text-align:left;font-size:8pt 同时又为其定义了如下的内部样式同时又为其定义了如下的内部样式h3 text-align:right;font-size:20pt h3 text-align:right;font-size:20pt 则网页中的则网页中的h3h3元素最后取的样式是元素最后取的样式是:color:red;text-align:right;font-size:20ptcolor:red;text-align:right;font-size:20pt1/15/20231/15/20232222参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS背景样式背景样式设置背景颜色设置背景颜色:background-color:background-color参数参数 BgColor.htmBgColor.htm设置背景图片设置背景图片(完全平铺完全平铺):background-image):background-image参数参数 BgImage.htmBgImage.htm设置背景图片设置背景图片(纵向平铺纵向平铺):background-repeat):background-repeat参数参数 BgImageY.htmBgImageY.htm设置背景图片设置背景图片(横向平铺横向平铺):background-repeat):background-repeat参数参数 BgImageX.htmBgImageX.htm设置背景图片设置背景图片(指定位置指定位置):background-position):background-position参数参数 BgImageP.htmBgImageP.htm设置背景图片设置背景图片(附加附加):background-):background-attachmentattachment参数参数 BgImageF.htmBgImageF.htm设置背景图片设置背景图片(综合演示综合演示)BgImageA.htmBgImageA.htm1/15/20231/15/20232323参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS文本样式文本样式文本颜色文本颜色:color:color TextColor.htmTextColor.htm文本背景颜色文本背景颜色:background-color:background-color TextBgColor.htmTextBgColor.htm文本对齐文本对齐:text-align:text-align TextAlign.htmTextAlign.htm文本修饰文本修饰:text-decoration:text-decoration TextDeco.htmTextDeco.htm首行缩进首行缩进:text-indent:text-indent TextIndent.htmTextIndent.htm字母转换字母转换:text-transform:text-transform TextLetters.htmTextLetters.htm1/15/20231/15/20232424参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS字体字体(font)字体种类字体种类:font-family:font-family FontFamily.htmFontFamily.htm字体大小字体大小:font-size:font-size FontSize.htmFontSize.htm字体风格字体风格:font-style:font-style FontStyle.htmFontStyle.htm字体变种字体变种:font-variant:font-variant FontVariant.htmFontVariant.htm字体重度字体重度:font-weight:font-weight FontWeight.htmFontWeight.htm综合字体设置综合字体设置 FontAll.htmFontAll.htm1/15/20231/15/20232525参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS边框边框(border)同时设置四侧边框同时设置四侧边框:border-style:border-style BorderFour.htmBorderFour.htm为每侧设置不同的边框为每侧设置不同的边框:border-style:border-style BorderEach.htmBorderEach.htm设置边框颜色设置边框颜色:border-color:border-color BorderColor.htmBorderColor.htm设置左侧边框宽度设置左侧边框宽度:border-left-width:border-left-width BorderWidthLeft.htmBorderWidthLeft.htm为底边框设置各种属性为底边框设置各种属性:border-bottom:border-bottom BorderBottomAll.htmBorderBottomAll.htm设置各侧边框宽度设置各侧边框宽度:border-width:border-width BorderWidthAll.htmBorderWidthAll.htm设置各种边框属性设置各种边框属性 BorderAll.htmBorderAll.htm1/15/20231/15/20232626参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS边空边空(margin)左边空左边空:margin-left:margin-left MarginLeft.htmMarginLeft.htm右边空右边空:margin-right:margin-right MarginRight.htmMarginRight.htm上边空上边空:margin-top:margin-top MarginTop.htmMarginTop.htm下边空下边空:margin-bottom:margin-bottom MarginBottom.htmMarginBottom.htm全部边空全部边空:margin:margin MarginAll.htmMarginAll.htm1/15/20231/15/20232727参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS填充填充(padding)左填充左填充:padding-left:padding-left PaddingLeft.htmPaddingLeft.htm右填充右填充:padding-right:padding-right PaddingRight.htmPaddingRight.htm上填充上填充:padding-top:padding-top PaddingTop.htmPaddingTop.htm下填充下填充:padding-bottom:padding-bottom PaddingBottom.htmPaddingBottom.htm四侧填充四侧填充:padding:padding PaddingAll.htmPaddingAll.htm1/15/20231/15/20232828参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS列表列表(list)无编号列表无编号列表:list-style-type:list-style-type ListUnordered.htmListUnordered.htm编号列表编号列表:list-style-type:list-style-type ListOrdered.htmListOrdered.htm图标式无编号列表图标式无编号列表:list-style-type:list-style-type ListImage.htmListImage.htm缩进式无编号列表缩进式无编号列表:list-style-position:list-style-position ListPosition.htmListPosition.htm同时设定各种属性的无编号列表同时设定各种属性的无编号列表:list-style:list-style ListAll.htmListAll.htm1/15/20231/15/20232929参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS元素尺寸元素尺寸(dimension)CSSCSS元素尺寸元素尺寸(dimension)(dimension)允许你控制网页元素的高允许你控制网页元素的高和宽和宽 它也允许您增加或缩小行间距它也允许您增加或缩小行间距 line-heightline-height LineSpacing.htmLineSpacing.htm1/15/20231/15/20233030参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS分级定位分级定位(classification)CSSCSS分级定位分级定位(classification)(classification)功能允许您指定在何功能允许您指定在何处和如何显示网页元素处和如何显示网页元素设置元素的显示属性设置元素的显示属性:display:display ClsDisplay.htmClsDisplay.htm设置元素的浮动属性设置元素的浮动属性:float:float ClsFloat.htmClsFloat.htm设置图片的浮动属性设置图片的浮动属性:float,border,margin:float,border,margin ClsImageFloat.htmClsImageFloat.htm设置图片的浮动和标题属性设置图片的浮动和标题属性:float,text-align:float,text-align ClsImageCapFloat.htmClsImageCapFloat.htm1/15/20231/15/20233131参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS分级定位分级定位(classification)CSSCSS分级定位分级定位(classification)(classification)功能允许您指定在何功能允许您指定在何处和如何显示网页元素处和如何显示网页元素使用浮动设置首字下沉使用浮动设置首字下沉:ClsLetterFloat.htmClsLetterFloat.htm产生菜单效果产生菜单效果 ClsHMenu.htmClsHMenu.htm不使用不使用产生的表格效果产生的表格效果 ClsHomepage.htmClsHomepage.htm设置可见性设置可见性:visibility:visibility ClsVisible.htmClsVisible.htm设置光标设置光标:cursor:cursor ClsCursor.htmClsCursor.htm1/15/20231/15/20233232参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS定位定位(positioning)相对定位相对定位:position:relativeposition:relative PosRel.htmPosRel.htm绝对定位绝对定位:position:absoluteposition:absolute PosAbs.htmPosAbs.htm裁剪裁剪:clip:clip PosClip.htmPosClip.htm溢出溢出:overflow:overflow PosOverflow.htmPosOverflow.htm纵向对齐纵向对齐:vertical-align:vertical-align PosVAlign.htmPosVAlign.htmZ Z向层次向层次:z-index:z-index PosZIndexA.htmPosZIndexA.htm PosZIndexB.htmPosZIndexB.htm1/15/20231/15/20233333参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS赝类赝类(pseudo-classes)CSSCSS赝类赝类(pseudo-classes)(pseudo-classes)用于为某些选择器设置特用于为某些选择器设置特殊的效果殊的效果语法语法:selector:pseudoselector:pseudo-class property:value-class property:valueselector.class:pseudoselector.class:pseudo-class property:value-class property:value锚位锚位(anchor)(anchor)赝类赝类a:linka:link color:#FF0000 /*color:#FF0000 /*未访问的链接未访问的链接*/a:visiteda:visited color:#00FF00 /*color:#00FF00 /*已访问的链接已访问的链接*/a:hovera:hover color:#FF00FF /*color:#FF00FF /*鼠标移过的链接鼠标移过的链接*/a:activea:active color:#0000FF /*color:#0000FF /*选中的链接选中的链接*/示例示例 PseudoClassA.htmPseudoClassA.htm PseudoClassB.htmPseudoClassB.htm1/15/20231/15/20233434参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS赝元素赝元素(pseudo-elements)CSSCSS赝元素赝元素(pseudo-elements)(pseudo-elements)用于为某些选择器设用于为某些选择器设置特殊的效果置特殊的效果语法语法:selector:pseudoselector:pseudo-element property:value-element property:valueselector.class:pseudoselector.class:pseudo-element property:value-element property:value为文本的首字符设置特殊效果为文本的首字符设置特殊效果:first-letter:first-letter PseudoElementA.htmPseudoElementA.htm为文本的首行设置特殊效果为文本的首行设置特殊效果:first-line:first-line PseudoElementB.htmPseudoElementB.htm1/15/20231/15/20233535参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS2媒体类型媒体类型(media types)媒体类型允许为不同的展示媒体指定不同的展示效果媒体类型允许为不同的展示媒体指定不同的展示效果使用使用mediamedia规则可以实现上述目标规则可以实现上述目标 MediaRule.htmMediaRule.htm1/15/20231/15/20233636参考参考:网络应用程序设计网络应用程序设计-CSS导论导论CSS综合演示综合演示CSSDemoA.htmCSSDemoA.htm1/15/20231/15/20233737参考参考:网络应用程序设计网络应用程序设计-CSS导论导论1/15/20231/15/20233838参考参考:
