第8章样式表.ppt

网页设计技术网页设计技术第八章第八章-样式表样式表提提 纲纲 样式表简介样式表简介 使用样式表使用样式表 样式表创建规则样式表创建规则 层叠样式表层叠样式表 样式表属性样式表属性 外部和内联样式表示例外部和内联样式表示例引 入8.1样式表简介样式表简介样式表是规范浏览器如何显示样式表是规范浏览器如何显示HTML特定标记特定标记的一组规则的一组规则n标记名称：决定页面中的哪些标记受到样式规则的控制n标记属性：决定如何显示这些受控制的标记8.1样式表简介样式表简介DHTML=HTML脚本语言脚本语言JavaScript+层叠样式表层叠样式表CSS指定一个网页的元素决定元素的大小颜色和位置操纵网页的元素DHTML 是制作是制作动态动态 HTML 页面的技术！页面的技术！8.2使用样式表使用样式表四种样式表：四种样式表：n内联式样式表n嵌入式样式表n输入外部样式表n链接外部样式表前两种可以称为内部样式表，后两种称为外部样式表前两种可以称为内部样式表，后两种称为外部样式表优先级从高到低依次为：内联式样式表、嵌入式样式优先级从高到低依次为：内联式样式表、嵌入式样式表、输入外部样式表、链接外部样式表。表、输入外部样式表、链接外部样式表。8.2使用样式表使用样式表内部样式表内部样式表内联式样式表内联式样式表n样式规则直接插入所应用的HTML标记中，作为标记的属性参数，因此其作用范围仅限于所应用的HTML元素。n语法如下：如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。内联样式表内联样式表示例示例课堂练习课堂练习 style=background-color:#00FFFF;color:#FF0000”8.2使用样式表使用样式表内部样式表内部样式表嵌入式样式表嵌入式样式表n嵌入式样式表位于HTML内部，在和标记之间定义，或在和标记之间n嵌入式样式表使用和标记对实现 内联样式表局限于某个标签，如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。应用样式 P font-size:20px;color:blue;text-align:center 我是段落 1我是段落 2我是段落 3我们的样式绝对统一8.2使用样式表使用样式表样式规则所有的段落都采用 P 样式，保证样式统一选择器用分号隔开嵌入式样式表嵌入式样式表示例示例课堂练习课堂练习style=“color:red;font-size:30pt;font-family:宋体;text-align:center“8.2使用样式表使用样式表外部样式表外部样式表n操作多个页面，并且这些页面需要有统一的外观格式。n外部样式表文件以“css”为扩展名n根据样式文件与网页的关联方式又分为：n输入（import）：将外部的样式表文件以输入的方式添加到页面中，相当于复制一份样式表。n链接（link）：如果标记使用到样式表，就会到所链接的外部样式表中索取指定的样式。样式文件P.网页2网页3网页18.2使用样式表使用样式表使用import，语法：importurl(样式表文件.css);l输入输入外部样式表外部样式表第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页关联样式文件：newstyle.css P.Onel.htmanother.htm 输入外部样式表输入外部样式表示例示例样式表样式表example.css输入外部样式表输入外部样式表8.2使用样式表使用样式表链接外部样式表：链接外部样式表：使用 link(链接）标签，语法：.链接外部样式表链接外部样式表示例示例样式表样式表example.css链接外部样式表链接外部样式表课堂练习课堂练习设置的样式：背景色和对齐方式设置段落的样式：字体颜色和大小8.3样式表创建规则样式表创建规则id规则：规则：n定义语法的样式如下：#fire color:red;font-size:24px;我是二级标题，火是这样的我是二级标题，火是这样的我是段落，火是这样的我是段落，火是这样的8.3样式表创建规则样式表创建规则ID规则ID规则的定义格式为：ID名 样式规则;应用ID规则：ID”ID名“id规则规则示例示例8.3样式表创建规则样式表创建规则class规则规则n同一类可应用于不同的标记，或者一个标记可以定义不同的类同一类可应用于不同的标记，或者一个标记可以定义不同的类nclass规则的语法如下：课堂练习课堂练习 一、使用class规则声明样式类 p.A：color:red;font-size:24pt;声明样式类 *.B：color:blue;text-align:center;二、使用ID规则声明样式类 p#A：color:red;font-size:24pt;声明样式类#B：color:blue;text-align:center;h1:调用调用B类类段落段落P:调用调用A类类8.3样式表创建规则样式表创建规则伪类伪类n伪类是一种特殊的class规则，主要用来处理链接在不同状态下的不同样式效果。a color:blue;text-decoration:none;a:hover color:red;text-decoration:underline;俺是超链接，移过来我就显示下划线 伪类 示例特殊的伪类：A代表超链接，hover代表鼠标悬停 8.3样式表创建规则样式表创建规则伪类伪类na:link 未访问链接na:visited 已访问链接na:hover 鼠标悬停na:active 激活链接练习使用伪类可以将伪类和类组合起来用，在同一个可以将伪类和类组合起来用，在同一个HTML页面中页面中显示不同的链接效果。比如下图：显示不同的链接效果。比如下图：8.3样式表创建规则样式表创建规则伪元素伪元素n伪元素常用来给标记添加特殊的效果8.3样式表创建规则样式表创建规则p:first-linecolor:#0000FF;p:first-letterfont-size:24pt;color:#FF0000;p.article:first-lettercolor:#FF0000文章中的一个段落。文章中的一个段落。练习使用伪元素前前(before)和后和后(after)是样式表最新规范提出的伪元素，用于在是样式表最新规范提出的伪元素，用于在标记的前后插入一些自定义内容。例如：标记的前后插入一些自定义内容。例如：网站中有一个网站中有一个music.wav的音乐文件，则样式表定义为：的音乐文件，则样式表定义为：这样，在每一个这样，在每一个标记的前面和标记的前面和标记的后面，都标记的后面，都将播放将播放music.wav这个音乐。这个音乐。8.3样式表创建规则样式表创建规则继承性继承性n父标记和子标记的概念n包含在外面的标记为父标记n被包含在里面的标记为子标记n对子元素（后代）定义的样式比对子元素的父（或祖先）元素定义的样式更特殊（子元素的样式优先）（子元素的样式优先）8.3样式表创建规则样式表创建规则父元素子元素8.3样式表创建规则样式表创建规则情景选择情景选择n特殊的继承，对位于某嵌套标记内的特定内容进行样式控制，该规则按照嵌套顺序列出标记名称。课堂练习课堂练习 使用嵌入式样式表h1：隶书：隶书h3:隶书隶书无序列表无序列表奇数行文字是黑色奇数行文字是黑色偶数行文字是灰色偶数行文字是灰色8.4层叠样式表层叠样式表CSS可以细分为：可以细分为：nCSS1nCSS1的作用是设置标记的颜色、字体等显示特性nCSS-PnCSS-P是指“层叠样式表-布置”（Cascading Style Sheet Positioning）n使用CSS-P属性可以把标记放置到指定的页面位置。nCSS2nCSS2是最新推出的CSS规范，拥有一些最新的功能特点：听觉样式表、自动编号、核心样式、光标控制、可下载的字体、固定位置、媒体类型、表格格式化、文本阴影8.5样式表属性样式表属性文本属性文本属性练习使用文本属性文本属性文本属性示例示例8.5样式表属性样式表属性颜色和背景属性颜色和背景属性练习使用颜色和背景属性8.5样式表属性样式表属性spanspann是行级容器标签，不会引起换行divdivn是块级容器标签，可以包含图片、标题、段落、文字等颜色和背景属性颜色和背景属性示例示例示示例例示示例例示示例例课堂练习课堂练习使用div标签：字体、背景色、宽度、高度、滚动条使用span标签：颜色、字体大小8.5样式表属性样式表属性字体属性字体属性字体属性字体属性示例示例8.5样式表属性样式表属性容器模型容器模型n为不同的文本设置不同的容器级别，可以调整容器中的边距、填充和边框等n边距属性：n定义所选容器的侧面距离边框外部的距离，包括：margin-top、margin-right、margin-bottom、margin-leftnmargin属性：用来一次性设置容器各个边的边距，而不必分别定义不同的部分。8.5样式表属性样式表属性n填充属性n容器内容距离边框的距离，包括：padding-top、padding-right、padding-bottom、padding-leftnpadding属性：用来一次性设置四边填充宽度的快捷属性，与margin属性类似8.5样式表属性样式表属性n边框属性n可用来指定容器的四面边框宽度，边框属性包括：border-top-width、border-right-width、border-bottom-width和border-left-widthnborder-width属性：一次性指定所有边框宽度的快捷属性8.5样式表属性样式表属性n边框颜色属性n用来指定容器上下左右边框的颜色，包括：border-top-color、border-right-color、border-bottom-color、border-left-colorn border-color属性：一次性指定所有边框颜色的快捷属性容器模型容器模型示例示例 容器属性 body background-color:#000000;color:#cccccc;font-family:”隶书”span color:red;text-transform:uppercase;text-decoration:underline blockquote color:#FFFFF;font:700 small-caps normal 1.3em“楷体_GB2312”;margin:2%20%5%20%;padding:20px;border-top-width:50px;border-right-width:10px;border-bottom-width:10px;border-left-width:10px;border-top-style:solid;border-right-style:double;border-bottom-style:solid;border-left-style:double;border-top-color:#999999;border-right-color:#cccccc;border-bottom-color:#999999;border-left-color:#cccccc;background-image:url(poem.jpg);background-repeat:no-repeat;background-position:right bottom;清平乐 六盘山 天高云淡望断南飞雁望断南飞雁 不到长城非好汉屈指行程二万。六盘山上高峰，红旗漫卷西风。今日长缨在手，何时缚住苍龙？8.5样式表属性样式表属性n边框快捷属性n包括border-top、border-right、border-bottom、border-left。这些可以一次性指定所选容器边框的宽度、颜色和样式的快捷属性。如果某个属性没有设置，则使用其默认值。body background-color:#000000;color:#cccccc;font-family:”隶书”span color:red;text-transform:uppercase;text-decoration:underline blockquote color:#FFFFF;font:700 small-caps normal 1.3em“楷体_GB2312”;margin:2%20%5%20%;padding:20px;border-top:50px#999999 solid;border-right:10px#cccccc double;border-bottom:10px#999999 solid;border-left:10px#cccccc double;background-image:url(poem.jpg);background-repeat:no-repeat;background-position:right bottom;8.5样式表属性样式表属性列表列表n使用CSS属性控制列表的位置及项目符号样式nlist-style-type属性n设置列表的符号或者编号，搭配或标记使用nlist-style-image属性n用图片来替代列表符号nlist-style-position属性:inside、outsiden控制列表符号的缩进8.5样式表属性样式表属性8.5样式表属性样式表属性nlist-style属性n一次性定义所有的列表属性n定义的顺序：type、position、image。n若某一属性空缺，则自动用其默认值取代8.5样式表属性样式表属性混合属性混合属性n容器标记位置、显示等混合在一起设置的属性ndisplay属性：设置标记在页面中的显示方式nposition属性：提供不同的定位方法ntop、bottom、right和left属性n和position属性一起使用，用来指定标记的位置nheight和width属性：指定容器标记的大小8.5样式表属性样式表属性n float属性：指定标记的位置在左边还是右边nline-height属性：指定容器标记中文本行间距nvisibility属性：指定标记的可见性混合属性混合属性示例示例外部样式文件外部样式文件8.6样式表的混合使用样式表的混合使用内联样式表、嵌入式样式表、外部样式表各有优势，实际的开发中常常需要混合使用：有关整个网站统一风格的样式代码，放置在独立的样式文件*.csscss某些样式不同的页面，除了链接外部样式文件，还需定义嵌入式样式某张网页内，部分内容”与众不同“，采用内联样式对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑内联样式表显示，如果没有，再考虑嵌入式样式显示，如果还没有，最后采用外部样式表显示，否则就按HTML的默认样式显示；内嵌样式内嵌样式 行内样式行内样式 某个HTML标签补充：补充：层标签层标签关键代码 Z-index=1，我是第一层，我是容器，包含图片段落 Z-index=2，我是第二层，包含图片和段落 使用 zindex 指定是哪一层是块级容器标签，可以包含图片、标题、段落、文字等 topleft课堂练习课堂练习P171 8.6小小结结n样式表的使用方法一般有四种:n内联样式表n嵌入式样式表n输入外部样式n链接外部样式表nid规则和class规则:精确指定标记使用的样式规则n继承和情景选择:实现Web页面标记样式的嵌套定义n常用到的样式表属性:文本属性、颜色和背景属性、字体、容器模型、列表属性以及一些混合属性