(CTP简介.pptVIP

CSS样式表 本章任务 美化“宝贝分类”页面 制作并美化“注册”页面 本章目标 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单 为什么需要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 第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页绑定 第三步：浏览查看各网页 样式文件： newstyle.css Link_Outcss1.html Link_Outcss2.html 演示示例3：使用外部样式表1 使用外部样式表2 引入的样式文件 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 引入样式表文件 演示示例4：使用外部样式表1 使用外部样式表2 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. * 第六章 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 演示示例1：演示能换皮肤的页面 内容相同 外观不同 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. STYLE type=text/css