网页设计9-复合选择器_第1页
网页设计9-复合选择器_第2页
网页设计9-复合选择器_第3页
网页设计9-复合选择器_第4页
网页设计9-复合选择器_第5页
已阅读5页，还剩8页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与制作（9）----CSS样式（4）

知识技能目标1、通过实训项目了解css的复合选择器的语法结构。

实训内容页面中的CSS复合选择器复习引入<html><head><title>class选择器与标记选择器</title><styletype="text/css"><!--p{ /*标记选择器*/ color:blue; font-size:18px;}--></style></head><body> <p>class选择器与标记选择器1</p> <p>class选择器与标记选择器2</p> <p>class选择器与标记选择器3</p> <p>class选择器与标记选择器4</p> <p>class选择器与标记选择器5</p> <p>class选择器与标记选择器6</p></body></html>在页面中使用标记选择器复习引入<html><head><title>class选择器与标记选择器</title><styletype="text/css"><!--p{ ……;}--></style></head><body> ……<pclass="special">class选择器与标记选择器4——</p>……</body></html>在标记选择器声明下插入以下声明后，观察页面效果.special{ /*类别选择器*/ color:red; /*红色*/ font-size:23px; /*文字大小*/ font-family:"隶书"/*文字字体*/}“交集”选择器<html><head><title>class选择器与标记选择器</title><styletype="text/css"><!--p{ ……;}.special{……}--></style></head><body> ……<h3class="special">使用于别的标记</h3></body></html>在标记选择器声明下再插入以下声明后，观察页面效果p.special{ /*标记.类别选择器*/color:green; font-family:“华文行楷”; }“并集”选择器<html><head><title>集体声明</title><styletype="text/css"><!--……--></style></head><body> <h1>集体声明h1</h1> <h2class="special">集体声明h2</h2> <h3>集体声明h3</h3> <h4>集体声明h4</h4> <h5>集体声明h5</h5> <p>集体声明p1</p> <pclass="special">集体声明p2</p> <pid="one">集体声明p3</p></body></html>集体声明：页面中风格相同的标记可同时声明，课本例09-02“并集”选择器<html><head><title>全局声明</title><styletype="text/css"><!--*{ /*全局声明*/ color:purple; /*文字颜色*/ font-size:15px; /*字体大小*/}h2.special,.special,#one{ /*集体声明*/ text-decoration:underline;/*下划线*/}--></style></head><body> <h1>全局声明h1</h1> <h2class="special">全局声明h2</h2> <h3>全局声明h3</h3> <h4>全局声明h4</h4> <h5>全局声明h5</h5> <p>全局声明p1</p> <pclass="special">全局声明p2</p> <pid="one">全局声明p3</p></body></html>全局声明：实例“后代”选择器<html><head><title>CSS选择器的嵌套声明</title><styletype="text/css"><!--pb{ /*嵌套声明*/ color:maroon; /*颜色*/ text-decoration:underline; /*下划线*/}--></style></head><body> <p>嵌套使<b>用CSS</b>标记的方法</p>

嵌套之外的<b>标记</b>不生效</body></html>2层嵌套的实例：CSS的继承<html><head> <title>父子关系</title> <basetarget="_blank">……</head><body> <h1>祖国的首都<em>北京</em></h1> <p>欢迎来到祖国的首都<em>北京</em>，这里是全国<strong>政治、<ahref="economic.html"><em>经济</em></a>、文化</strong>的中心</p> <ul><li>在这里，你可以：

<ul><li>感受大自然的美丽</li> <li>体验生活的节奏</li> <li>领略首都的激情与活力</li> </ul></li> <li>你还可以：<ol> <li>去八达岭爬长城</li> <li>去香山看红叶</li> <li>去王府井逛夜市</li> </ol> </li> </ul> <p>如果您有任何问题，欢迎<ahref="contactus">联系我们</a></p></body></html>CSS的继承2<html><head> <title>父子关系</title>……</head><body> <ul>

<li>关系1 <ul> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ul> <ol> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ol> </li>

<li>关系2 <ul> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ul> <ol> <l

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论