网站设计与开发技术教程 第6章 CSS样式.ppt

使用样式修饰页面 CSS的全称是CascadingStyleSheets 中文翻译为 层叠样式表 简称样式表 CSS可以扩展HTML的功能 美化页面可以通过菜单 修改 页面属性 命令进行单个页面样式的设置 如果同一个页面有不同的设置 或者不同的页面有相同的设置 则应该使用CSS样式面板进行设计 CSS样式 1 选择 窗口 CSS样式 出现 CSS样式 面板 选中 CSS样式 标签 1 CSS样式面板 1 单击面板右下角的 新建CSS样式 按钮 创建CSS样式 弹出 新建CSS样式 对话框 或执行 文本 CSS样式 新建 命令 类型 自定义或HTML标签属性 超链接属性更改名称 CSS样式的命名定义在 CSS样式的作用范围和保存位置 2 新建特定类型的样式 2 CSS样式对话框的设置 类型背景区块方框边框列表定位扩展 类型 主要用于定义文字的属性 背景 主要用于设置CSS样式的背景 包括背景颜色 背景图像 背景图像的控制等 重复 设置图像作为背景时是否需要重复显示 附件 设置背景图像是否跟随内容滚动 区块 主要用于设置文本的文字间距 对齐方式 排列方式 文字缩进等 垂直对齐 只应用于图像 可以设置图文的对齐方式 方框 主要用于设置元素在页面中的位置 包括元素 例如图像 的边界 宽度 高度和浮动方式等 把对象作为一个整体看待 装在一盒子里 填充 指定元素内容与元素边框的间距 边界 指定一个元素的边框与另一个元素的间距 边框 主要用于设置边框的样式 例如 图像边框 按钮边框 列表 主要用于设置文本列表的类型 列表项图片等 定位 主要设置对象在网页中的具体位置 扩展 主要用于制作鼠标样式 图片特殊效果 3 CSS样式的管理 应用样式编辑样式删除样式附加样式 套用 选择希望应用所选样式的对象 右键点击样式面板中的样式名称 在菜单中选择 套用 编辑 修改 添加样式的具体内容删除 删除选择的样式附加 链接外部样式表 实例1 创建CSS样式 打开css htm页面 2 新建css样式 3 保存css样式文件 4 设置规则 5 应用样式 6 新建CSS样式 保存样式在csstext css样式文件中 7 设置CSS样式内容 8 应用样式 9 附加样式表 打开另外一个文件01 htm 点击附加样式表按钮 10 结果如图 实例2 使用CSS选择器 1 新建CSS样式 选择 高级 ID 上下文选择器等 类型 2 设置a link 未访问过的 设置a hover 鼠标经过 设置a visited 访问过的 设置a active 连接激活的时刻 实例3 CSS控制网页背景 1 新建CSS样式 命名为textback 仅对该文档生效 2 选择 背景 类别 设置颜色为 CCFF66 3 单击上面一个单元格 应用该样式4 新建tdback样式 设置 背景 类别下的背景图像 选择 重复 并应用到下面一个单元格中 实例4 CSS区块排列文本 1 打开文件 新建CSS样式 命名为text 保存在csstest css样式文件中 设置 类型 和 区块 对中文文本应用该样式 实例5 CSS方框对齐对象 打开文件 新建CSS样式 命名为box 仅对该文档生效 设置 方框 属性 对图片应用该样式 实例6 CSS边框创建漂亮按钮 打开文件 新建CS