chap5 css的使用.pptVIP

回顾 表单中提交数据的方法有那两种及其区别？ 创建一个登录界面需要哪些表单元素？ 框架如何使用？ 预习检查 本章任务 美化“宝贝分类”页面 制作并美化“注册”页面 本章目标 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单 为什么需要CSS样式表 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 CSS样式表 CSS概述 CSS作用 可以覆盖浏览器上样式的设置 使页面的字体更漂亮、易编排、页面赏心悦目 可以轻松地控制页面布局 可以将多个网页的风格格式同时更新，免去单个手动更新的烦琐 分类 外部样式、内嵌样式、行内样式 作用一样，但影响的范围不同 CSS样式表 创建一个CSS 样式 熟悉CSS面板 在Dreamweaver中对于CSS的操作几乎完全可以在面板上进行 　 选择菜单“窗口”?“CSS样式”，可以看到CSS面板 新建一个CSS样式 创建自定义样式（class） 重定义HTML标签 使用CSS选择器 CSS样式表 打开CSS样式定义对话框，在“分类” 选项中有几个常用的选项： 类型：通过设置不同的参数定义文本的样式 背景：通过设置背景颜色、图片、重复方式以及位置等属性设置网页的背景 盒子：这是一种规划网页元素块属性的样式，也可以称为样式框样式 边框：对元素的边框外观显示属性进行定义 为页面应用CSS样式 为页面应用CSS样式 在网页中应用自定义样式 打开要应用样式的网页文档，光标定位到文本块 点击CSS面板上的样式 为页面应用CSS样式 在网页中应用内嵌样式 内嵌样式放置在head、/head标记内 为网页应用行内样式 为网页应用外部样式 单击CSS样式面板底部的“附加样式表”按钮，弹出“链接外部样式表对话框” 单击“浏览”按钮，在弹出的“选择样式表文件”对话框中，双击文件夹，选择 根目录下的CSS文件即可 。 样式表的基本语法 样式表的基本结构 样式表的基本语法 样式表的基本语法 如果希望其他的标签也能采用P标签的样式，怎么办？ 样式表的基本语法 样式表的三类应用方式 内嵌样式表 内嵌样式表使用格式如下： 行内（嵌入）样式表 外部样式表文件 内嵌样式表 行内（嵌入）样式表 行内（嵌入）样式表 行内（嵌入）样式表 外部样式表文件 外部样式表文件 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（@import）外部样式表 链接（LINK ）外部样式表 使用LINK（链接）标签 : HEAD LINK href=newsyle.css rel=stylesheet type=text/css /HEAD 导入（@import）外部样式表 使用@import导入 ，语法： HEAD STYLE TYPE=text/css @ import newstyle.css; /STYLE /HEAD 常用的样式属性 文本属性 常用的样式属性 小结1 编写如下图所示效果对应的HTML代码 常用的样式属性 背景属性 常用的样式属性 方框属性 常用的样式属性 常用的样式属性 常用的样式属性 常用的样式属性 要实现下图细边框的效果，该如何编写样式规则？ 常用的样式属性 常用的样式属性 特殊样式（超连接） a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ 小结2 常用的样式属性 常用的样式属性 设置内容与上边框之间的距离 padding-top 填充属性 设置内容与右边框之间的距离 padding-right 设置内容与下边框之间的距离 padding-bottom 设置边框的颜色 border-color 设置边框的样式 border-style 边框属性 设置对象的左边距 margin-left 边界属性 属 性 设置对象的下边距 margin-bottom 设置对象的右边距 margin-right 设置对象的上边距 margin-top 设置边框的宽度 border-width 设置内容与左边框之间的距离 padding-left 说 明 CSS名称 方框属性 要实现下图所示的效果，该如何编写样式规则？ 线宽2px、虚线框样式dashed、颜色