[html07css.pptVIP

为什么需要CSS样式表 HTML标签的外观样式比较单一 一般只管理“内容” 样式表的作用相当于华丽的衣服 色彩缤纷、形式多样 本章任务 CSS样式表-参数说明 　　Selector -- 选择器 　　property : value -- 样式表定义。属性和属性值之间用冒号(:)隔开。定义之间用分号(;)隔开 本章目标 会创建统一外观的字体文本 会创建无下划线的超连接样式 会创建个性化的表格 会创建个性化的表单 为什么需要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 HEAD STYLE type=text/css 样式规则 / STYLE /HEAD 如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. STYLE type=text/css P { font-family:隶书; font-size:18px; color:#FF0000; } /STYLE /HEAD …… P床前明月光，/P P疑是地上霜。/P P我是郭德刚，/P P低头思故乡。/P …… 查看源代码 样式规则 所有的段落都采用 P 样式，保证样式统一 选择符 样式表 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. HTML HEAD TITLE设置属性/TITLE /HEAD BODY P style = color:red;font-size:30px;font-family:隶书; 这个段落应用了样式 P 这个段落按默认样式显示 /BODY /HTML 为标签p指定样式 查看源代码 本段P标签采用了行内样式 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. BODY style= background-color:#CCCCCC PIMG s