第4章 网页表现语言—CSS.ppt

第4章网页表现语言 CSSCSS是CascadingStyleSheets 层叠样式单 的简称 更多的人把它称作样式单 4 1CSS简介引入CSS的目的就是把结构与样式分离 网页的结构用XHTML的标记定义 网页的外观样式用CSS定义 当多个网页采用相同的外观样式时 只要建立一个定义样式的CSS文件 让XHTML调用这个CSS文件所定义的样式即可 4 2把样式加到网页中的方法当浏览器读取样式单时 要依照文本格式来读 可以使用4种方法把样式单加入到网页中 行内样式 内嵌一个样式单 链接到一个外部的样式单文件和导入多个外部样式单文件 4 2 1行内样式 例4 1 4 2 2内嵌一个样式单 除了在 内分别定义各种选择符的样式外 如果多个选择符具有相同的样式 可以采用组合选择符 以减少重复定义的麻烦 其格式为 例4 2 例4 3 4 2 3链接到一个外部样式单文件格式为 样式单文件的格式为 选择符1 属性 属性值 属性 属性值 注释内容 选择符2 属性 属性值 属性 属性值 选择符n 属性 属性值 属性 属性值 例4 4 4 2 4导入多个外部样式单文件导入外部样式单文件是指在嵌入样式单的 中插入多个外部样式单文件 其格式为 例4 5 4 3新增加的HTML扩充标记和属性 4 3 1class与id属性 1 class属性定义带有类选择符的样式说明的格式为 元素名 类选择符名 属性 属性值 属性 属性值 还有一种用法 在选择符中省略XHTML 元素名 名 可以把几个不同的元素定义成相同的样式 其格式为 类选择符名 属性 属性值 属性 属性值 或者 类选择符名 属性 属性值 属性 属性值 例4 6 2 id属性用id选择符定义样式的格式为 id选择符名 属性 属性值 属性 属性值 id选择符名 就是元素的id标识 由网页设计者定义 例4 7 4 3 2与定位标记HTML的文档结构分为两大类 块级结构与行级结构 在HTML中有div和span两个标记 1 标记标记的格式为 文本 图像或表格等文本 图像或表格等 例4 8 2 标记的格式为 例4 9 4 4多重样式单的层叠一般原则是 最接近目标的样式定义优先级最高 样式单的优先级别从高到低为 行内样式 内部样式 链入外部样式 导入外部样式和默认浏览器样式 浏览器将按照上述顺序执行样式单的规则 例4 10 h3 color red text align left font size 8pt background ivory 然后在内嵌样式单中也定义了h3标记的text align和font size属性 h3 text align right font size 20pt 标题3文字向右对齐 尺寸为20pt 那么这个网页叠加后的样式就是 文字颜色为红色 向右对齐 尺寸为20pt h3 color red text align right font size 20pt background ivory 例4 11 4 5样式单的属性单位 4 5 1长度 百分比单位 1 长度单位长度单位有相对长度单位和绝对长度单位两种类型 长度单位见表4 1 2 百分比单位百分比单位也是一种常用的相对类型 例如 p line height 150 本段文字的高度为标准行高的1 5倍 hr width 80 线段长度是相对于浏览器窗口的80 4 5 2颜色单位 1 用十六进制数方式表示颜色值在HTML中 要使用RGB概念指定颜色时 使用一个 号 加上6个十六进制的数字表示 表示方法为 RRGGBB 网页安全色是指使用256色模式时 无论在Windows还是在Macintosh系统中 用NetscapeNavigator和MicrosoftInternetExplorer浏览器都显示相同的颜色 2 用rgb函数方式表示颜色值在CSS中 可以用rgb函数设置出所要的颜色 语法为 rgb R G B 例如 div color rgb 132 20 180 div color rgb 12 200 50 3 用颜色名称方式表示颜色值CSS也提供了与HTML一样的用颜色名称表示颜色的方式 见表3 2 例如 div color red 4 6样式单的常用属性参数中的 表示此属性值一次仅能选取其中一个 表示此属性值可以复选多个 4 6 1字体属性 1 字体 font family 语法 font family 字体名称参数 字体名称按优先顺序排列 以逗号隔开 如果字体名称包含空格 则应用引号括起 说明 用font family属性可控制显示字体 不同的操作系统 其字体名是不同的 对于Windows系统 其字体名就如Word中的 字体 列表中所列出的字体名称 示例 body font family gillsans newbaskerville serif h2 color red margin 10px font family 华文新魏 楷体 GB2312 例4 12 2 字号 font size 语法 font size 绝对尺寸 相对尺寸 百分数参数 绝对尺寸根据对象字体进行调节 可选xx small x small small medium large x large xx large示例 所有包含在中的文字的尺寸将是30pt 因为中的字号是相对于的字号 20pt 的1 5倍 p font size 20pt b font size 1 5em h3 font size 20px p font size 15pt b font size 300 body font family 宋体 font size 9pt p font family 宋体 font size 11pt 例4 13 3 字体风格 font style 语法 font style italic oblique normal参数 italic为斜体 对于没有斜体变量的特殊字体 将应用oblique normal为正常的字体 声明此值将取消之前设置 说明 将文本字体设置为斜体 示例 h3 font style italic 4 字重 font weight 语法 font weight bold number normal参数 bold为粗体 相当于number为700 也相当于b标记的作用 number取值100 200 300 400 500 600 700 800 900 normal为正常的字体 相当于number为400 声明此值将取消之前设置 示例 P font weight bold h1 font weight 800 5 文字变形 text transform 语法 text transform uppercase lowercase capitalize none参数 uppercase使所有字母大写显示 lowercase使所有字母小写显示 capitalize使每个单词的第1个字母大写显示 none使所有继承的文字变形参数被忽略 文字将以原来的形式显示 示例 h1 text transform uppercase b text transform capitalize 6 文字修饰 text decoration 语法 text decoration underline blink overline line through none参数 underline为下划线 blink为闪烁 overline为上划线 line through为贯穿线 none为无装饰 示例 div text decoration underlineoverline h1 text decoration underline 4 6 2文本属性 1 字间距 word spacing 语法 word spacing length normal参数 length是由数字和单位标识符组成的长度值 允许为负值 normal恢复为默认间距 示例 h3 word spacing 1em div word spacing 10px 2 字母间距 letter spacing 语法 letter spacing length normal参数 length是由数字和单位标识符组成的长度值 允许为负值 normal恢复为默认间隔 示例 div letter spacing 6px div letter spacing 0 5pt h3 letter spacing 10px 3 行高 line height 语法 line height length normal参数 length为由百分比数字或由数字 单位标识符组成的长度值 允许为负值 其百分比取值是基于字体的高度尺寸 normal为默认行高 示例 用数字设行距 数字设定行高的时候 浏览器将利用字号来确定行距 它将字号乘以设定的参数值 所以 在本例中 行高将是24pt b font size 12pt line height 2 用长度单位 em及pt是最常用的单位 设定行距 既可以将行距缩小也可以将行距扩大 b font size 12pt line height 11pt 用比例设定行距 在下例中 行距是长度10pt的140 即14pt b font size 10pt line height 140 4 文字对齐 text align 语法 text align left right center justify参数 left为左对齐 right为右对齐 center为居中 justify为两端对齐 说明 设置对象中文本的对齐方式 示例 利用文字对齐属性 可以控制段落的水平对齐 本属性只用于整块的内容 如 和 h4 text align center div text align center 5 文字缩行 text indent 语法 text indent length参数 length为百分比数字或由浮点数字 单位标识符组成的长度值 允许为负值 说明 设置对象中的文本段落的缩进 本属性只应用于整块的内容 示例 p text indent 2em 本段第1行的起始位置比其正常位置缩进了两个字符 div text indent 5px div text indent underline10 4 6 3控制BOX的属性BOX包括 对象本身 围绕对象的空格填充 PADDING 对象边框 BORDER 围绕边框的对象间隙 MARGIN 如图4 13所示 对象的尺寸与边框等样式单属性的关系 如图4 14所示 1 外延边距属性 MarginsProperties 1 顶边的外延边距 margin top 语法 margin top length auto参数 length是由数字和单位标识符组成的长度值或者百分数 百分数是基于父对象的高度 auto值被设置为对边的值 示例 body margin top 11 5 body margin 1em2em3em4em 定义文本的上 右 下 左的边距分别为1 2 3 4em 2 右边的外延边距 margin right 语法 margin right length auto参数 同margin top 说明 同margin top 示例 body margin right 11 5 3 底边的外延边距 margin bottom 语法 margin bottom length auto参数 同margin top 示例 body margin bottom 11 5 4 左边的外延边距 margin left 语法 margin left length auto参数 同margin top 示例 body margin left 11 5 h4 margin top 20px margin bottom 5px margin left 100px margin right 55px 5 外延边距 margin 语法 margin length auto参数 length是由数字和单位标识符组成的长度值或百分数 百分数是基于父对象的高度 对于内联对象来说 左右外延边距可以是负数值 auto值被设置为对边的值 示例 body margin 36pt24pt36pt body margin 11 5 body margin 10 10 10 10 2 边框属性 BordersProperties 1 所有边框宽度 border width 语法 border width medium thin thick length参数 medium为默认宽度 thin为小于默认宽度 thick为大于默认宽度 length由数字和单位标识符组成的长度值 不可为负值 示例 span border style solid border width thin span border style solid border width 1pxthin 2 边框样式 border style 语法 border style none hidden dotted dashed solid double groove ridge inset outset参数 border style属性包括了多个边框样式的参数 body border style doublegroove body border style doublegroovedashed p border style double border width 3px p border 5pxdoublepurple 定义了四条一样的边框 例4 14 3 边框颜色 border color 语法 border color color参数 color指定颜色 示例 body border color silverred body border color silverredrgb 223 94 77 body border color silverredrgb 223 94 77 black h4 border color ff0033 border width thick p border color green border width 3px p border color 666699 ff0033 000000 ffff99 border width 3px 4 顶边框宽度 border top 语法 border top border width border style border color参数 该属性是复合属性 请参阅各参数对应的属性 示例 div border bottom 25pxsolidred border left 25pxsolidyellow border right 25pxsolidblue border top 25pxsolidgreen 5 右边框宽度 border right 语法 border right border width border style border color参数 该属性是复合属性 请参阅各参数对应的属性 说明 请参阅border width属性 6 底边框宽度 border bottom 语法 border bottom border width border style border color参数 该属性是复合属性 请参阅各参数对应的属性 说明 请参阅border width属性 7 左边框宽度 border left 语法 border left border width border style border color参数 该属性是复合属性 请参阅各参数对应的属性 说明 请参阅border width属性 示例 h4 border top width 2px border bottom width 5px border left width 1px border right width 1px 3 对象间隙 PaddingsProperties 对象间隙也称内补丁 位于对象边框和对象之间 包括了4项属性 padding top 顶部间隙 padding right 右边间隙 padding bottom 底部间隙 padding left 左边间隙 4 6 4布局属性 1 浮动 float 语法 float none left right参数 none为对象不浮动 left为对象浮在左边 right为对象浮在右边 示例 div clear left img float right h4 float left 2 清除 clear 语法 clear none left right both参数 none允许两边都可以有浮动对象 both不允许有浮动对象 left不允许左边有浮动对象 right不允许右边有浮动对象 示例 如果想使一段文字包裹某一对象 而下一段文字不包裹 可以使用clear属性 p clear left 例4 15 4 6 5背景属性 1 颜色 color 语法 color color参数 color指定颜色 请参阅颜色单位 示例 div color 345456 div color rgb 100 14 200 div color menu div color red b color 333399 将所有的加重字以设定的颜色显示 b color rgb 51 204 0 2 背景色 background color 语法 background color color transparent参数 color指定颜色 请参阅颜色单位 transparent使背景色透明 示例 p background color silver div background color rgb 223 71 177 body background color 98ab6f pre background color transparent p yellow background color ffff66 3 背景图像 background image 语法 background image url url none参数 url为使用绝对或相对地址指定背景图像的地址 none无背景图 示例 code background image url comet jpg blockquote background image url c InetPub MyPixs comet jpg br background image url http F 4 控制背景图象的属性 1 背景重复 background repeat 语法 background repeat repeat no repeat repeat x repeat y参数 repeat为背景图像在纵向和横向上平铺 no repeat为背景图像不平铺 repeat x为背景图像在横向上平铺 repeat y为背景图像在纵向平铺 示例 p background url images aardvark gif background repeat no repeat menu background url images aardvark gif background repeat repeat y 2 固定背景 background attachment 语法 background attachment scroll fixed参数 scroll使背景图像随对象内容滚动 fixed使文字滚动时背景图像保持固定 说明 设置背景图像是随对象内容滚动还是固定的 该属性只用于页面背景 即标签内设定的背景图像 示例 body background attachment fixed background image url background gif html background image url anasazi tif background attachment fixed 3 背景定位 background position 语法 background position length lengthbackground position position position参数 length为百分数或者由数字和单位标识符组成的长度值 position可取top center bottom left center right示例 p background image url background gif background position centerbottom div background url images aardvark gif background position 35 80 menu background url images aardvark gif background position 35 2 5cm a background url images aardvark gif background position 3 25in body background url images aardvark gif background position topright 5 背景 background 语法 background background color background image background repeat background attachment background position参数 该属性是复合属性 请参阅各参数对应的属性 示例 段落规则的背景是浅绿色 背景图像垂直平铺 第1次平铺的位置在右上角 p background url background gif ccffccrepeat ytopright div background redno repeatscroll5 60 body background url images aardvark gif repeat y pre background url images aardvark gif top caption background fuchsia 4 6 6定位属性 1 定位方式 position 语法 position static absolute relative参数 static为无特殊定位 对象遵循HTML定位规则 示例 h4 position absolute left 100px top 45px div position absolute bottom 1in left 1in right 1in top 1in i position relative left 40px top 10px div position relative top 3px left 6px 2 左 右 上 下位置语法 left auto lengthright auto lengthtop auto lengthbottom auto length参数 auto无特殊定位 根据HTML定位规则载文档流中分配 length是由数字和单位标识符组成的长度值或百分数 必须定义position属性值为absolute或者relative 此取值方可生效 说明 设置对象与其最近一个定位的父对象左边相关的位置 示例 div position absolute left 1in div position relative top 3px right 6px div position absolute bottom 1in 3 宽度 width 语法 width auto length参数 auto无特殊定位 根据HTML定位规则在文档中分配 length是由数字和单位标识符组成的长度值 或者百分数 百分数是基于父对象的宽度 不可为负数 示例 div width 1in div position absolute top 3px width 6px div position absolute left 200px top 40px width 150px 4 高度 height 语法 height auto length参数 同宽度 width 说明 设置对象的高度 对于img对象来说 仅指定此属性 其width值将根据图片源尺寸等比例缩放 示例 div height 1in div position absolute top 3px height 6px div position absolute left 200px top 40px height 150px 5 可视性 visibility 语法 visibility inherit visible collapse hidden示例 img visibility inherit float right h4 visibility hidden 例4 16 6 层叠顺序z index语法 z inde