2023学年完整公开课版css选择器_第1页
2023学年完整公开课版css选择器_第2页
2023学年完整公开课版css选择器_第3页
2023学年完整公开课版css选择器_第4页
2023学年完整公开课版css选择器_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

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

文档简介

css选择器01标记选择器02类别选择器03ID选择器04选择器的声明CONTENTS目录1标记选择器1.1标记选择器<html><head><title>标记选择器.class</title><styletype="text/css"><!--h3{ /*标记选择器*/ color:blue; font-size:18px;}h3.special{ /*标记.类别选择器*/ color:red; /*红色*/ font-size:23px; /*文字大小*/}1.1标记选择器.special{ /*类别选择器*/ color:green;}--></style></head><body> <h3>标记选择器.class1</h3> <h3>标记选择器.class2</h3> <h3class="special">标记选择器.class3</h3> <h3>标记选择器.class4</h3> <h3>标记选择器.class5</h3> <pclass="special">使用于别的标记</p></body></html>1.1标记选择器2.类别选择器2-1.html.classcolor:green;font-size:20px;{}类别选择器属性值属性值声明声明类别名称2类别选择器2.1类别选择器<html><head><title>class选择器</title><styletype="text/css"><!--.one{ color:red; /*红色*/ font-size:18px; /*文字大小*/}.two{ color:green; /*绿色*/ font-size:20px; /*文字大小*/}2.类别选择器.three{ color:cyan; /*青色*/ font-size:22px; /*文字大小*/}--></style></head><body> <pclass="one">class选择器1</p> <pclass="two">class选择器2</p> <pclass="three">class选择器3</p> <h3class="two">h3同样适用</h3></body></html>2.类别选择器2.1.3ID选择器2-5.html#idcolor:yellow;font-size:30px;{}ID选择器属性值属性值声明声明3.ID选择器3.ID选择器<html><head><title>ID选择器</title><styletype="text/css"><!--#one{ font-weight:bold; /*粗体*/}3.ID选择器#two{ font-size:30px; /*字体大小*/ color:#009900; /*颜色*/}--></style></head><body> <pid="one">ID选择器1</p> <pid="two">ID选择器2</p> <pid="two">ID选择器3</p> <pid="onetwo">ID选择器3</p></body></html>3.ID选择器4选择器的声明4.1集体声明（2-6.html）4.2选择器的嵌套（2-8.html）4.1集体声明<html><head><title>集体声明</title><styletype="text/css"><!--h1,h2,h3,h4,h5,p{ /*集体声明*/ color:purple; /*文字颜色*/ font-size:15px; /*字体大小*/}h2.special,.special,#one{ /*集体声明*/ text-decoration:underline; /*下划线*/}-->4.1集体声明</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>4.集体声明4.2选择器的嵌套<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>4.2选择器的嵌套5.CSS的继承5.1父子关系（2-9.html）5.2CSS继承的运用（2-10.html）5.1父子关系<html><head> <title>父子关系</title> <basetarget="_blank"><style><!--h1{ color:red; /*颜色*/ text-decoration:underline; /*下划线*/}h1em{ /*嵌套选择器*/ color:#004400; /*颜色*/ font-size:40px; /*字体大小*/}--></style></head>5.1父子关系<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>5.1父子关系5.2CSS继承的运用<html><head> <title>父子关系</title><style><!--.li1{ color:red;}.li2{ color:blue;}.li1olli{ /*利用CSS继承关系*/ font-weight:bold; /*粗体*/ text-decoration:underline; /*下划线*/}--></style></head><body> <ul>

5.2CSS继承的运用<liclass="li1">关系1 <ul> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ul> <ol> <li>页面父子关系复杂时</li> <li>页面父子关系复杂时</li> <li>这里省略20个嵌套...</li> </ol> </li> <liclass="li2">关系2 <ul> <li>页面父子关系复杂时</li> <

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

温馨提示

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

最新文档

评论

0/150

提交评论