第6讲 样式表.ppt

第6讲样式表样式表CSS概念概念n n定义及使用定义及使用n n定义样式表的语法定义样式表的语法n n选择符选择符(Selector)规则规则(Rule)表表其中其中 n n选择符选择符:要引用样式的对象，可以是一个或要引用样式的对象，可以是一个或多个多个HTML标记（标记之间用标记（标记之间用,分开）分开）n n规则表规则表:一个或多个样式属性组成样式规则，一个或多个样式属性组成样式规则，属性之间用，分开，属性定义的格式是：属性之间用，分开，属性定义的格式是：样式名样式名:值值 引用样式表引用样式表n n连接到外部样式表。连接到外部样式表。连接到外部样式表。连接到外部样式表。n n将样式表定义为一个独立的将样式表定义为一个独立的将样式表定义为一个独立的将样式表定义为一个独立的CSSCSS样式文件，在样式文件，在样式文件，在样式文件，在HTMLHTML文件头部用标记连接该样式文件。文件头部用标记连接该样式文件。文件头部用标记连接该样式文件。文件头部用标记连接该样式文件。linklink标标标标记的属性如下：记的属性如下：记的属性如下：记的属性如下：n nrelrel:连接文件和连接文件和连接文件和连接文件和HTMLHTML文档的关系，值为文档的关系，值为文档的关系，值为文档的关系，值为stylesheetstylesheet n nhrefhref:连接的样式文件连接的样式文件连接的样式文件连接的样式文件 n ntype:type:样式的类别，值为样式的类别，值为样式的类别，值为样式的类别，值为text/text/csscss n nmedia:media:接受样式表的介质，默认为接受样式表的介质，默认为接受样式表的介质，默认为接受样式表的介质，默认为screen,screen,可可可可以是以是以是以是print,projectionprint,projection(投影机投影机投影机投影机)n n注意：注意：注意：注意：n nCSSCSS样式文件不包含样式文件不包含样式文件不包含样式文件不包含标记标记标记标记 引入外部样式表引入外部样式表n n在在HTML文件的头部的文件的头部的和和标记之间用标记之间用CSS的的import声明引入外部样式声明引入外部样式表。格式如下表。格式如下n nimport URL(“外部样式表文件名外部样式表文件名”)嵌入样式表嵌入样式表n n嵌入样式表嵌入样式表:n n利用利用标记将样式表嵌入标记将样式表嵌入HTML的的头部头部 n n内联样式内联样式:n n在在HTML标记中引用样式定义，方法是：标记中引用样式定义，方法是：n n将标记的属性值赋为所定义的样式规则。将标记的属性值赋为所定义的样式规则。如：如：相关标记的属性 类选择符和类选择符和class属性属性 n n作用作用 n n页面中同一标记遵循不同的样式页面中同一标记遵循不同的样式 n n不同的标记遵循相同的样式不同的标记遵循相同的样式 类选择符和类选择符和class属性属性 n n使用方法使用方法n n在在标记中定义类选择符，在体部标记中定义类选择符，在体部标记中将标记标记中将标记class属性值设为类名属性值设为类名 类选择符和类选择符和class属性属性 n n定义定义n n类选择符在样式表中定义具有样式值的类，类选择符在样式表中定义具有样式值的类，有两种格式有两种格式n n标记名标记名.类名类名规则规则1；规则；规则2，如，如p.back/用到用到了规则了规则/不使用规则不使用规则类名类名规则：规则规则：规则id选择符和选择符和id属性属性n n作用作用n n用于定义一个元素的独有样式用于定义一个元素的独有样式 n n使用使用n n在一个在一个HTML文件中只能引用一次文件中只能引用一次 id选择符和选择符和id属性属性n n定义定义n n#id名名规则规则1；规则；规则要引用要引用id选择符定义，需要在体部标记中选择符定义，需要在体部标记中设置设置id属性值，即将属性值，即将id属性值设置为属性值设置为id名。名。如如n n#colord1color:green 伪类伪类n n作用作用n n能自动被支持能自动被支持CSS的浏览器识别。的浏览器识别。n n定义格式定义格式n n选择符选择符:伪类伪类属性属性:值值 伪类伪类n n用法用法用法用法n n伪类不用伪类不用伪类不用伪类不用HTMLHTML的的的的classclass属性来指定，如指定超连属性来指定，如指定超连属性来指定，如指定超连属性来指定，如指定超连接接接接以不同方式显示连接以不同方式显示连接以不同方式显示连接以不同方式显示连接(links)(links)、已访问连、已访问连、已访问连、已访问连接接接接(visited links)(visited links)和可激活连接和可激活连接和可激活连接和可激活连接(active links),(active links),代码如下：代码如下：代码如下：代码如下：n na:visitedcolor:#0000ff;text-a:visitedcolor:#0000ff;text-decoration:nonedecoration:nonea:linkfonta:linkfont-family:-family:宋体宋体宋体宋体,font-,font-size:9pt;color:#0000ff;text-size:9pt;color:#0000ff;text-decoration:nonedecoration:nonea:hoverfonta:hoverfont-family:-family:宋体宋体宋体宋体;fong-;fong-size:12pt;color:#003333;background-size:12pt;color:#003333;background-color:#ffcc99;text-decoration:nonecolor:#ffcc99;text-decoration:none其他标记其他标记n nspan标记标记n n为了应用样式而存在，没有其它特殊的作为了应用样式而存在，没有其它特殊的作用用 n ndiv标记标记n n一个块级元素，在一个块级元素，在和和之间之间可以包含段落、标题、表格等其它块级元可以包含段落、标题、表格等其它块级元素。素。n n将其中包含的内容形成一个独立段将其中包含的内容形成一个独立段落落 样式的继承和作用顺序 样式的继承样式的继承 n n直接继承直接继承n n父标记：包含其它标记的标记父标记：包含其它标记的标记子标记：被包含的标记子标记：被包含的标记子标记继承父标记的样式子标记继承父标记的样式n n示例示例n n样式继承样式继承css1.htmln n上例中，上例中，标记被包含在标记被包含在中，中，那么那么标记就引用了标记就引用了标记标记样式的继承样式的继承n n相对值继承相对值继承百分比继承百分比继承n n示例示例n n百分比继承百分比继承css2.html 嵌入外部样式表和链接外部样式表的方法嵌入外部样式表和链接外部样式表的方法n n嵌入外部样式表见嵌入外部样式表见嵌入外部样式表见嵌入外部样式表见css2_2.html注意注意import语句后一定要加语句后一定要加“;”n n链接外部样式表见链接外部样式表见css2_3.html样式的作用顺序样式的作用顺序n n内联样式内联样式 n n其它样式，越后引用，优先级越高。选择符其它样式，越后引用，优先级越高。选择符的优先顺序的优先顺序 n n上下文上下文 n n类类 n nid n n未在任何文中定义的样式，遵循浏览器的默未在任何文中定义的样式，遵循浏览器的默认样式认样式 n n示例示例n n作用顺序作用顺序css3.html n n又一个样式表示例又一个样式表示例n ncss4.html CSS属性 字体属性字体属性 属性名属性名属性名属性名 含义含义含义含义 font-family font-family 字体字体字体字体 font-size font-size 字号字号字号字号 font-style font-style 字体风格字体风格字体风格字体风格 font-weight font-weight 字体加粗字体加粗字体加粗字体加粗 font-variant font-variant 字体变化字体变化字体变化字体变化 font font 字体综合设置字体综合设置字体综合设置字体综合设置 示例示例字体属性font.html 颜色和背景属性颜色和背景属性 属性名属性名属性名属性名 可取值可取值可取值可取值 含义含义含义含义 举例举例举例举例 color color 单词单词单词单词 前景色前景色前景色前景色 h1color:redh1color:redh2color:#008800h2color:#008800h3color:#080 h3color:#080#RRGGB#RRGGB#RGB#RGB BackgrounBackground_colord_color单词单词单词单词 背景色背景色背景色背景色 bodybackground-color:whitebodybackground-color:white h1background-color:#0000f0h1background-color:#0000f0pbackground-pbackground-color:transparentcolor:transparent#RRGGB#RRGGB#RGB#RGB backgrounbackground_imaged_image 统一资源统一资源统一资源统一资源定位器定位器定位器定位器 背景图背景图背景图背景图象象象象 bodybackground-bodybackground-image:url(bg.gifimage:url(bg.gif)pbackground_image:url(http:/pbackground_image:url(http:/ URLs 颜色和背景属性颜色和背景属性属性名属性名属性名属性名 可取值可取值可取值可取值 含义含义含义含义 举例举例举例举例 BackgroundBackgroundrepeatrepeat repeat repeat 背景图象背景图象背景图象背景图象的重复方的重复方的重复方的重复方式式式式 bodybackground-bodybackground-repeat:repeat-xrepeat:repeat-x repeat-xrepeat-xRepeat-yRepeat-yNo-repeat No-repeat BackgroundBackgroundattachmentattachment Scroll Scroll 背景图象背景图象背景图象背景图象是否随页是否随页是否随页是否随页面滚动面滚动面滚动面滚动 bodybackground-bodybackground-attachment:fixedattachment:fixed Fixed Fixed BackgroundBackgroundpositionposition 数值数值数值数值 背景图象背景图象背景图象背景图象位置位置位置位置 bodybackground-bodybackground-position:30%70%position:30%70%关键词关键词关键词关键词 颜色和背景属性颜色和背景属性n n示例示例n n颜色和背景属性颜色和背景属性back.html 文本属性文本属性 属性名属性名属性名属性名 可取值可取值可取值可取值 含义含义含义含义 举例举例举例举例 letter-letter-spacing spacing 长度长度长度长度 字符间距字符间距字符间距字符间距 h1letter-h1letter-spacing:8px spacing:8px text-text-decoratidecoration on none|under|line|overlin|linnone|under|line|overlin|line-through|blinke-through|blink 文本的修文本的修文本的修文本的修饰效果饰效果饰效果饰效果 a:linktext-a:linktext-decoration:nonedecoration:none text-text-align align left|right|center|justifyleft|right|center|justify 文本横向文本横向文本横向文本横向对齐对齐对齐对齐 ptext-align:centerptext-align:center vertical-vertical-align align baseline|super|sub|top|mibaseline|super|sub|top|middle|bottom|text-top|text-ddle|bottom|text-top|text-bottombottom|百分比百分比百分比百分比 纵向对齐纵向对齐纵向对齐纵向对齐 img.midvertical-img.midvertical-align:50%align:50%text-text-indent indent 长度长度长度长度|百分比百分比百分比百分比 第一行缩第一行缩第一行缩第一行缩进量进量进量进量 ptext-indent:30pt ptext-indent:30pt line-line-height height normal|normal|长度长度长度长度|数字数字数字数字|百分比百分比百分比百分比 行间距行间距行间距行间距 pline-height:200%pline-height:200%文本属性文本属性n n示例示例n n文本属性文本属性text.html n n方框属性方框属性n n见附录见附录4n n示例示例n n方框属性方框属性frame.html列表属性列表属性属性属性属性属性取值取值取值取值含义含义含义含义list-list-style-style-type type 无序表无序表无序表无序表 disc disc 实心圆点实心圆点实心圆点实心圆点 circle circle 空心圆空心圆空心圆空心圆 square square 实心方形实心方形实心方形实心方形 有序表有序表有序表有序表decimal decimal 数字数字数字数字 lower-roman lower-roman 小写罗马数字小写罗马数字小写罗马数字小写罗马数字 upper-roman upper-roman 大写罗马数字大写罗马数字大写罗马数字大写罗马数字 lower-alpha lower-alpha 小写字母小写字母小写字母小写字母 upper-alpha upper-alpha 大写字母大写字母大写字母大写字母 共用共用共用共用 none none 无无无无 列表属性列表属性属性属性属性属性取值取值取值取值含义含义含义含义list-style-list-style-image image urlurl 图象做符号图象做符号图象做符号图象做符号 list-style-list-style-position position outside outside 符号是否在文字里符号是否在文字里符号是否在文字里符号是否在文字里 inside inside list-style list-style 项目符号项目符号项目符号项目符号,位置位置位置位置 综合设置综合设置综合设置综合设置 示例示例列表属性list.html 定位属性定位属性 属性属性属性属性含义含义含义含义取值取值取值取值top top 与窗口上端的距离与窗口上端的距离与窗口上端的距离与窗口上端的距离 数值数值数值数值 left left 与窗口左端的距离与窗口左端的距离与窗口左端的距离与窗口左端的距离 数值数值数值数值 position position 设置位置模式设置位置模式设置位置模式设置位置模式 absolute(absolute(绝对位置绝对位置绝对位置绝对位置)relative(relative(相对位置相对位置相对位置相对位置)static(static(静态位置静态位置静态位置静态位置)示例示例二维属性position.html 三维定位三维定位 n nz-indexn n将页面元素分成多个将页面元素分成多个“层层”，形成堆叠效，形成堆叠效果果n n取值为整数取值为整数n n值越大表示在堆叠层越处于高层值越大表示在堆叠层越处于高层n n为为0，表示基准，表示基准n n负，表示在下面负，表示在下面n n示例示例n n三维属性三维属性zindex.html