CSS样式表幻灯片.ppt

回顾 表单中提交数据的方法有那两种及其区别？ 创建一个登录界面需要哪些表单元素？ target属性取值可以为哪些及其含义？ 预习检查 本章任务 美化“宝贝分类”页面 制作并美化“注册”页面 本章目标 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单 为什么需要CSS样式表 HTML标签的外观样式比较单一 颜色只有黑白 字体类型和大小无变化 样式表的作用相当于华丽的衣服 为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 样式表的基本语法 样式表的基本结构 样式表的基本语法 样式表的基本语法 如果希望其他的标签也能采用P标签的样式，怎么办？ 样式表的基本语法 常用的样式属性 文本属性 常用的样式属性 小结1 编写如下图所示效果对应的HTML代码 常用的样式属性 背景属性 常用的样式属性 方框属性 常用的样式属性 常用的样式属性 常用的样式属性 常用的样式属性 要实现下图细边框的效果，该如何编写样式规则？ 常用的样式属性 常用的样式属性 特殊样式（超连接） a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ 小结2 常用的样式属性 常用的样式属性 样式表的三类应用方式 内嵌样式表 内嵌样式表使用格式如下： 行内（嵌入）样式表 外部样式表文件 内嵌样式表 行内（嵌入）样式表 行内（嵌入）样式表 行内（嵌入）样式表 外部样式表文件 外部样式表文件 根据样式文件与网页的关联方式又分为： 链接（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 如果希望一个网站中多个页面的样式保持一致， 如何解决？ 使用外部样式表文件样式表可以解决 样式文件.css 网页2 网页3 网页1 …… 第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页绑定 第三步：浏览查看各网页 样式文件： newstyle.css Link_Outcss1.html Link_Outcss2.html 演示示例3：使用外部样式表1 使用外部样式表2 引入的样式文件 引入样式表文件 演示示例4：使用外部样式表1 使用外部样式表2 * * 第四章 CSS样式表 简述样式表的基本结构？ 常用的样式属性有哪些？ 演示示例1：演示能换皮肤的页面 内容相同 外观不同 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 STYLE type=text/css P {color:red; font-size:30px; font-family:隶书;} …… /STYLE 声明文档样式表结束 文档样式表开始，类型为CSS样式 样式规则 选择器 样式规则 P {color:red; font-size:30px; font-family:隶书;} 属性 属性的值 HTML HEAD TITLE样式规则/TITLE STYLE type=text/css P { color:red; font-family:隶书; font-size:24px;} /STYLE /HEAD BODY H2静夜思/H2 P床前明月光，/P P疑是地上霜。/P P我是郭德刚，/P P低头思故乡。/P /BODY /HTML 查看源代码 本页面中所有的P标签都应用了此样式 所有的段落都采用P样式，保证风格统一 用分号隔开 选择器 如何编写此样式?字体类型为律书、大小24px STYLE type=text/css .red { color:red; font-family:隶书; font-size:24px; } …… /STYLE 其他标签和P标签应该采用相同的样式，所以要为它们定义一