使用样式表.ppt

使用样式表 HTML设计 内容 什么是样式表样式表和HTML文件的结合的几种方式什么是层叠样式表样式表属性的设置 什么是样式表 样式表是指告知浏览器如何显示HTML文件中特定元素类型的一组规则 所有这些规则或说明都包含两个部分 选择器和属性 选择器告诉浏览器页面中的哪些元素受规则控制 属性告诉浏览器如何显示受控制的这些元素 什么是样式表 通过样式表 我们只需在一个地方一次性的设置所有的规则 样式表缩短了开发和维护HTML文件的时间 样式表的使用非常灵活 用户可以组织一个控制全站文件的样式表 也可以为一个页面单独创建独立样式表 可以创建一个覆盖全局的样式表 也可以创建一个控制单一标签元素的样式表 样式表和HTML文件的结合 实现样式表和HTML文件的结合共有四种方法 1 使用嵌入式样式表样式定义包含在开放式和闭合式的标签之间 样式块位于HTML文件内部 一般定义在开放式和闭合式标签内部 或在和标签之间 样式表和HTML文件的结合 主要用于格式化单独的HTML文件 例如 样式表和HTML文件的结合 2 使用外部样式表用来使多个文件具有相同的格式样式 需要一个单独的样式表文件 所有的样式定义都包含在这个文件当中 样式表文件以 css 为扩展名 要把独立的css文件和HTML文件结合起来 有两种途径 引用和链接 使用引用方法时 要在HTML文件的style语句块中加入 importurl 样式表和HTML文件的结合 例如 使用链接方法时 要在开放式和闭合式的标签之间使用标签 例如 样式表和HTML文件的结合 3 使用内联样式表用来取代当前已有的样式定义 使用 style 属性 例如 样式表和HTML文件的结合 4 使用类可以格式化HTML文件中的指定部分 在样式块的指定标签后面输入一个唯一的类名 通过这样的方式可以定义一个样式类 例如 P Classred color red 在这里 标签和类通过类名 classred 联系起来 使用样式类 就需要把相应标签的class属性都设置成相同的类名 样式表和HTML文件的结合 样式表优先级样式定义的优先顺序是由它和相应标签的距离来决定的 内联样式表的优先级最高 其次是嵌入式样式表和外部样式表 特殊标签的优先级高于普通标签 例如 标签的优先级高于标签 样式表和HTML文件的结合 DIV和SPAN标签标签 用来把或其它段落级元素集合起来 设置的样式属性必须为标签之中的元素可用的属性 标签 用来把字母和单词集合起来 设置其显示属性 层叠样式表 1994年 样式表开始应用于HTML 1996年12月 提出了一种新的样式表规范 层叠样式表 允许在一个文件中使用多级样式 每个位置靠后的样式表类型都继承以前的样式定义 并且重载那些相同的定义 因此 可以用外部样式表来控制全站 用嵌入式样式表来控制某一页 用内联要式表控制某一个标签 层叠样式表 不同级别的样式表CSS1 为网页设计者提供了控制页面显示的方法 CSS1的属性包含对各个项的格式控制 如 字体 文本样式 大小等 CSS P 是指层叠样式表 布置 使用CSS P属性可以把元素放置到指定的网页位置 CSS2 是最新的网页设计工具 其特性包括 核心样式 媒体类型 听觉样式表 可下载字体 固定位置 表格格式化 自动编号 文本阴影和光标控制 样式表属性 文本属性 用来控制页面中的文本text indent 用来缩进块文本的首行 其值可以是任何有效的长度单位或百分比 例如 H1 text indent 10px text transform 控制文本的大小写 其值可为 none capitalize uppercase lowercase和inherit 例如 P text transform capitalize text align 控制文本的对齐方式 其值可以为 left center right inherit和justify 例如 H3 text align center text decoration 为指定文本增加文本装饰 其值可为 none underline overline blink line through和inherit 例如 P text decoration overline letter spacing 控制字母之间的空白 其值可为 标准的度量衡量 normal inherit 例如 P letter spacing 4px 示例1示例2 样式表属性 颜色和背景属性 创建吸引人眼球的Web页color 指定文本的颜色 其值可以为 任何有效的颜色值或继承于别的文本 例如 H1 color blue background color 修改成块文字的颜色 其值可以为 任何有效的颜色值或继承于别的文本 例如 P background color cyan background image 为某一元素添加背景图片其值可以为 none inherit以及任意URL 例如 BODY background image url lolo gif 示例1示例2 样式表属性 background repeat 设置平铺的背景图片的平铺方向 其值可以为 repeat no repeat repeat x repeat y和inherit 例如 BODY background image url lolo gif background repeat repeat background attachment 设置背景图片在窗体中的依附形式 固定或滚动 其值可为 scroll fixed或inherit 例如 P background attachment fixed background position 设置某一内容框的背景图片距离该框左上角的位置 其值可为 top center bottom left right inherit 以及任意两个允许的长度单位或百分比 例如 H3 background position 40px20px background 是一种快捷属性 它可以一次性定义以上提到的这些背景属性 定义的顺序如下 background color background image background repeat background attachment和background position 如果有些属性没有定义 就使用其默认值 例如 P background pinkurl lolo gif repeat ybottomright 示例 样式表属性 字体属性 控制页面中出现的文本字体font family 设置元素的字体 其值可为各种字体名称 可以一次设置多个字体名称 用逗号隔开 例如 BODY font family TimesNewRoman ArialBlack serif font style 设置字体的显示样式 其值可为 normal italic oblique inherit 例如 BODY font style italic font variant 将字体设置为小体的大写字母 其值可为 normal small caps和inherit 例如 P font variant small caps 样式表属性 font weight 设置字体的粗细程度 其值可为 normal bold bolder lighter inherit和100到900之间的任一数字 例如 H4 font weight bold font size 控制字体的大小 其值可为绝对值 如 xx small x small small medium large x large xx large 也可以为相对值 如larger smaller 也可以是长度 百分数 还可以是负的绝对值 例如 P font size xx large font 是一种快捷属性 它可以一次性定义以上提到的这些字体属性 定义的顺序如下 font style font variant font weight font size和font family 如果有些属性没有定义 就使用其默认值 例如 BODY font oblique normal bold 20pt TimesNewRoman 示例 样式表属性 容器属性 用来创建容器样式margin top margin right margin bottom margin left 这些属性可用来定义容器所选的侧面距离边框外部的页白宽度 也就是空白区域 其值可为 有效的长度 百分数或者inherit 例如 P margin left 50px margin 可以用来一次性设置元素各个边的页白 而不必分别定义不同的部分 如果只有一个值 那么上下左右都用这个值 如果有两个值 分别代表上下和左右 如果3个值 代表顶部 左右和底部 例如 P margin 5 10 样式表属性 padding top padding right padding bottom padding left 填充和页白相类似 所不同的是填充是指容器元素距离边框内部的空白区域 它们是指填充的宽度 例如 P padding left 10 padding 是可用来一次性设置四边填充宽度的快捷属性 如果只有一个值 那么上下左右都用这个值 如果有两个值 分别代表上下和左右 如果3个值 代表顶部 左右和底部 例如 P padding 10px50px 样式表属性 border top width border right width border bottom width border left width 这些属性可用来指定容器元素所选的侧面的边框宽度 即页和白填充之间的宽度 其值可为 thin medium thick和inherit 还可以是有效的长度 例如 P border top width 10px border left width 30px border right width 30px border bottom width 10px 样式表属性 border width 是可一次性指定所有边框宽度的快捷属性 如果只设定一个值 那么4个边框都用这个值 如果设定2个值 上下边框是一个值 左右边框是一个值 如果设3个值 即上边框 左右边框和下边框 例如 P border width thick 样式表属性 border top color border right color border bottom color border left color 这些属性可用来指定容器元素所选侧面的边框颜色 其值可以是任意的颜色或inherit 例如 P border top color red border left color blue border left color blue border color 是可一次性指定所有边框颜色的快捷属性 如果只设定一个值 那么4个边框都用这个值 如果设定2个值 上下边框是一个值 左右边框是一个值 如果设3个值 即上边框 左右边框和下边框 例如 P border color blue 样式表属性 border top style border right style border bottom style border left style 这些属性可用来指定容器元素所选侧面的边框样式 它们的值可为 none hidden dotted dashed solid doubled groove ridge inset outset和inherit 例如 P border top style solid border left style double border right style double 样式表属性 border style 是可一次性指定所有边框样式的快捷属性 如果只设定一个值 那么4个边框都用这个值 如果设定2个值 上下边框是一个值 左右边框是一个值 如果设3个值 即上边框 左右边框和下边框 例如 P border style doublehidden 样式表属性 border top border right border bottom border left 这些是可一次性指定容器元素所选侧面的宽度 颜色和样式的快捷属性 例如 P border left 20pxbluesolid border 可用来一次性设置所有边框的所有属性 它的值将应用于容器元素的所有边框侧面 例如 BODY border 10pxsolidblue 示例1示例2示例3 样式表属性 列表属性 用来控制HTML列表的不同外观 list style type 可指定列表中使用的标记类型 对无序列表 其值可为 disc circle和square 对有序列表来说 其值可为 decimal decimal leading zero lower roman lower alpha和upper alpha 另外还可以为none和inherit 例如 UL list style type circle OL list style type lower alpha 样式表属性 list style image 通过该属性 可以使用图片作为标记 其值可为 none inherit和图片的URL地址 例如 UL list style type square list style image url marker Gif 样式表属性 list style position 可用来控制列表标记的位置 其值可为 inside outside和inherit 例如 UL list style position inside list style 可以一次性定义所有的列表属性 定义的顺序如下 type position image 如果某一属性空缺 则自动用其默认值取代 例如 UL list style discinsideURL marker gif 示例1示例2 样式表属性 混合属性display 可使浏览器获悉元素的设计版面 有inline 内嵌 如I B block 块 如H2 P list item 列表项 如LI 三个属性值 例如 H2 display block UL display inline position 该属性提供了不同的定位方法 其属性值可以为 static relative absolute fixed和inherit 例如 IMG position fixed top bottom right和left 这些属性和position属性一起使用 用来指定元素的位置 其值可以为 auto inherit以及任意有效的长度或百分比 例如 IMG position absolute top 50px left 20px 样式表属性 height和width 用来指定容器元素的大小 其值可以为 auto inherit和任意有效的长度或百分比 例如 BLOCKQU