IWPDT4北大青鸟网页设计基本教材.ppt

wnt 2000(C) copyright Internet和网页设计基础 样 式 表 课题目标 描述样式表 样式表的应用 在HTML中的使用 在F2K中的使用 脚本语言 样式表（CSS） CSS（Cascading Style Sheets）：级联样式表 样式表：是用来扩展HTML在文字样式与版面编排上的多样化的一套标准 CSS的基本思想：将网页中的内容与样式设定分开 样式表的特点 减少图形文件的使用 使你的网页瘦身，加快下载速度 集中管理样式 方便网页样式的修改 共享样式 可以将样式表同网站上所有的页面连接，创建一个统一的，一致的页面风格 分类使用样式 可以在一个HTML网页文件上套用多个样式表，使得创建页面时有更大的灵活性 样式表的特点 建立样式表 一个样式表可以包含一个或多个规则 定义样式表的基本格式： 选择器{样式规则} 示例： H2{Color：Blue; } 2) BODY{ Background:Green;Color:Blue; Font-size:12pt;Font-family:宋体; } 选择器 选择器识别对应规则应用的元素 选择器的类别： HTML 选择器 类选择器 ID选择器 上下文选择器 HTML选择器 HTML选择器使用HTML元素的名称，唯一的不同的是没有括号 演示例1： P{font-style:italic;font-weight:bold;color:blue} 类选择器(Class Selector) 类选择器：可以让不同的标记套用相同的样式 定义格式： 1) .类名{样式规则} 2) 标记名.类名{样式规则} 演示例2： ID选择器(ID Selector) ID选择器使用HTML元素的ID属性 ID选择器与类选择器的作用相近 定义格式： #ID名称{样式规则} 演示例3： 上下文选择器 上下文选择器：是按照特定的情况，另外定义一套规则 定义格式： 上级标记名 下级标记名{样式规则} 演示例4： 标记样式的继承 标记样式的继承：括在里面的标记将拥有外部标记的样式属性 演示例5： 样式规则 字体样式 Font 字体综合设定 Font-family 设定字体 Font-size 设定字体大小 Font-style 设定斜体 Font-weight 设定字体粗细 演示例6： 样式规则（继） 文本样式 Letter-spacing 字符间距 Text-indent 段落缩排 Line-height 行高 Text-align 文本水平对齐 Vertical-align 文本垂直对齐 样式规则（继） 项目列表样式 List-style-type 项目符号样式 List-style-image 项目符号图案 List-style-position 项目符号位置 样式规则（继） 颜色与背景样式 Color 前景颜色 Background-color 背景颜色 Background-image 背景图案 Background-repeat 背景是否重复显示 Background-attachment 背景滚动或固定 Background-position 背景图案位置 演示例7: 样式规则（继） 版面配置样式 Margin 边缘距离 Padding 边框宽度 Border-width 边界填白 Left 元件与窗口左端距离 Top 元件与窗口顶端距离 Position 元件的绝对位置与相对位置 Z-index 垂直定位 样式表与HTML的结合 下面为几种可以联合样式表与HTML的方法 直接样式表 内嵌样式表 外部样式表 链接外部样式表 导入外部样式表 直接样式表 直接样式表：使用标记的STYLE属性 用于将样式表规则直接应用到不同的元素上 例如： HTML P STYLE=color:red红色象征着热情/P P STYLE=color:blue蓝色象征着澄静/P /HTML 内嵌样式表 内嵌样式表：使用STYLE标记 STYLE标记一般放在HEAD部分 样式规则放在STYLE…../STYLE标记之间 STYLE标记的属性：TYPE 该参数定义了Internet Media类型 例如： STYPE TYPE=“text/css” 选择器{样式规则} /STYLE 链接外部样式表 链接外部样式表:使用LINK标记 外部样式表是一个单独的文档，以 .CSS 为扩展名 例如： LINK REL= stylesheet HREF=tylesmine.css Typ