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

  1. 1、本文档共13页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
网页设计9-复合选择器

内部培训资料,不作任何宣传用途 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祖国的首都

文档评论(0)

561190791 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档