网页设计9-复合选择器.ppt

内部培训资料,不作任何宣传用途 P o w e r B a r 中国专业PPT设计交流论坛 授课人：何蕴婷 EMAIL：jmhyt@126.com 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途 网页设计与制作（9） ---- CSS样式（4） 知识技能目标 1、通过实训项目了解css的复合选择器的语法结构。 实训内容 页面中的CSS复合选择器 复习引入 html head titleclass选择器与标记选择器/title style type=text/css !-- p{ /* 标记选择器 */ color:blue; font-size:18px;} -- /style /head body pclass选择器与标记选择器1/p pclass选择器与标记选择器2/p pclass选择器与标记选择器3/p pclass选择器与标记选择器4/p pclass选择器与标记选择器5/p pclass选择器与标记选择器6/p /body /html 在页面中使用标记选择器 复习引入 html head titleclass选择器与标记选择器/title style type=text/css !-- p{ ……;} -- /style /head body …… p class=specialclass选择器与标记选择器4——/p ……/body /html 在标记选择器声明下插入以下声明后，观察页面效果 .special{ /* 类别选择器 */ color:red; /* 红色 */ font-size:23px; /* 文字大小 */ font-family:隶书 /* 文字字体 */ } “交集”选择器 html head titleclass选择器与标记选择器/title style type=text/css !-- p{ ……;} .special{……} -- /style /head body …… h3 class=special使用于别的标记/h3 /body /html 在标记选择器声明下再插入以下声明后，观察页面效果 p.special{ /* 标记.类别选择器 */ color:green; font-family:“华文行楷”; } “并集”选择器 html head title集体声明/title style type=text/css !-- …… -- /style /head body h1集体声明h1/h1 h2 class=special集体声明h2/h2 h3集体声明h3/h3 h4集体声明h4/h4 h5集体声明h5/h5 p集体声明p1/p p class=special集体声明p2/p p id=one集体声明p3/p /body /html 集体声明：页面中风格相同的标记可同时声明，课本例09-02 “并集”选择器 html head title全局声明/title style type=text/css !-- *{ /* 全局声明 */ color: purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } -- /style /head body h1全局声明h1/h1 h2 class=special全局声明h2/h2 h3全局声明h3/h3 h4全局声明h4/h4 h5全局声明h5/h5 p全局声明p1/p p class=special全局声明p2/p p id=one全局声明p3/p /body /html 全局声明：实例 “后代”选择器 html head titleCSS选择器的嵌套声明/title style type=text/css !-- p b{ /* 嵌套声明 */ color:maroon; /* 颜色 */ text-decoration:underline; /* 下划线 */ } -- /style /head body p嵌套使b用CSS/b标记的方法/p 嵌套之外的b标记/b不生效 /body /html 2层嵌套的实例： CSS的继承 html head title父子关系/title base target=_blank …… /head body h1祖国的首都