CSS基础知识技术总结.ppt

* 提问学员： 1）行内样式表什么场合用？ 2）内嵌样式表什么场合用？有什么好处？ 3）既然内嵌样式可以使一张网页内的同类标签共享同一样式， 如果希望网站的所有网页都共享同一样式呢？怎么办？ 4）引导：模仿我们的C语言中的头文件，我们可以把样式单独提取来，放在一个单独的文件， 然后和每张网页关联不就可以了吗 。引出外部样式表。 * 讲解要点： 1)先讲解链接外部样式表的语法 2）然后讲解步骤 3）按上述步骤演示：参考TG6-Source文件夹中的”链接样式表“用例。 * 告诉学员： 1 ) 操作步骤同链接样式表。 2) 导入和链接两种方式功能一样，没什么大的区别，掌握其中一种就行。 * * * * * 告诉学员： 对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加。 例如，行内样式指定字体，而内嵌样式指定颜色，外部样式指定大小，则三种样式综合即可。 2）如果有冲突（例如都指定字体大小），则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示， 如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示。 3)演示示例：参考TG6-Source文件夹中的”样式混合使用“用例，同时使用了外部样式和行内样式。 * 交集选择器 p{ /* 标记选择器 */ color:blue; } p.special{ /* 标记.类选择器 */ color:red; /* 红色 */ } .special{ /* 类选择器 */ color:green; } 交集选择器 body p普通段落文本（蓝色）/p h3普通标题文本（黑色）/h3 p class=special指定了.special类别的段落文本（红色）/p h3 class=special指定了.special类别的标题文本（绿色）/h3 /body 交集选择器 h1, h2, h3, h4, h2.special, .special, #one, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } 后代选择器 最外层是p标记，里面嵌套了span标记，span标记中又嵌套了b标记，则称span是p的子元素，b是span的子元素。 p span{ /* 嵌套声明 */ color:red; /* 颜色 */ } 后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。 .special i{ color: red; } /* 使用了属性special的标记里面包含的i */ #one li{ padding-left:5px; } /* ID为one的标记里面包含的li */ td.out .inside strong{ font-size: 16px; } /* 多层嵌套，同样实用 */ 上面的第3行使用了3层嵌套，实际上更多层的嵌套在语法上都是允许的。 后代选择器 在网页中添加CSS的方法 1 行内样式 2 内嵌样式 3 链接样式 4 导入样式 行内样式 您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。 /*－－关键代码--*/ p剩余时间：成交结束BR 新旧程度：全新 BR 所 在 地：北京 BR 宝贝数量：5 件 BR 浏 览 量：220 次/p p style=“color:#FF00FF; font-family:隶书; font- weight:bold; font-size:24px 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以 /p HTML HEAD TITLE应用样式/TITLE STYLE TYPE=text/css P { font-size:20px; color:blue; text-align:center } /STYLE /HEAD BODY P我是段落 1/P P我是段落 2/P P我是段落 3/P P我们的样式绝对统一/P /BODY /HTML 内嵌样式 样式表 样式规则 所有的段落都采用 P 样式，保证样式统一 行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。 选择器 用分号隔开 外部样式 根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表