目录
任务描述
本关任务是通过类选择器的方式,更改独立于文档元素的属性。
相关知识
类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式,而不考虑具体的元素时,会使用类选择器。
例如,对于HTML
页面:
<body>
<div class="main">
<article class="news">
<h1>地震自救指南</h1>
<p>大的晃动时间约为1分钟左右。这时首先应顾及的是您自己与家人的人身安全。首先,在重心较低、且结实牢固的桌子下面躲避,并紧紧抓牢桌子腿。在没有桌子等可供藏身的场合,无论如何,也要用坐垫等物保护好头部。</p>
</article>
</div>
</body>
在该页面中,我们将第一个div
元素的class
设置为main
,article
元素的class
值设置为news
。通常设置class
名字时,不要设置已有元素名,例如p
、articel
。
之后,添加页面样式:
<style type="text/css">
.main {
background-color: ivory;
margin: 10px;
}
.news {
padding: 10px;
color: black;
font-weight: bold;
}
p {
color: grey;
}
</style>
与元素选择器不同,对同一类的元素应用样式,需要在类名前加上一个点号(.),然后书写相应的样式声明。
最后,样式应用的效果如图:
类选择器语法
所以,我们可以看出,类选择器的语法规则如下:
-
首先,将
html
中想要应用类样式的元素,指定类名;<元素名 class="指定的类名"></元素名>
<元素名 class="指定的类名">
-
然后,书写相应类的样式;
.指定的类名 {样式声明}
编程要求
使用类选择器修改页面样式,具体要求入下:
-
给第
43
行的div
元素添加名字为newsSection
的类; -
在第
27
行添加newsSection
类的样式:外边距为20
(margin-top: 20px;
)内边距为20
(padding: 20px;
)和背景颜色白色(background-color: white;
)。
测试说明
平台会对你的代码进行运行测试,如果实际输出结果与预期结果相同,则通关;反之,则 GameOver
。
读书是在别人思想的帮助下,建立起自己的思想。——鲁巴金
开始你的任务吧,祝你成功!
如果你觉得这一关的内容对你有帮助,请你在下面点赞。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>类选择器</title>
<style type="text/css">
/* 元素选择器 */
html {
background-color: #F0F0F0;
}
header {
padding: 40px;
background-color: white;
}
footer {
margin-top: 20px;
font-size: 0.6em;
color: grey;
}
/* 类选择器 */
.main {
margin: 10px;
}
/* ********** BEGIN ********** */
.newsSection{
margin-top:20px;
padding:20px;
background-color:white;
}
/* ********** END ********** */
</style>
</head>
<body>
<div class="main">
<header>
<li><a href="#chosen">精选</a></li>
<li><a href="#news">时事</a></li>
<li><a href="#finance">财政</a></li>
<li><a href="#think">思想</a></li>
<li><a href="#life">生活</a></li>
</header>
<!-- ********** BEGIN ********** -->
<div class="newsSection">
<!-- ********** END ********** -->
<section>
<h2>精选</h2>
<li>精选新闻1</li>
<li>精选新闻2</li>
<li>精选新闻3</li>
</section>
<section>
<h2>时事</h2>
<li>时事新闻1</li>
<li>时事新闻2</li>
<li>时事新闻3</li>
</section>
<section>
<h2>财政</h2>
<li>财政新闻1</li>
<li>财政新闻2</li>
<li>财政新闻3</li>
</section>
<section>
<h2>思想</h2>
<li>思想新闻1</li>
<li>思想新闻2</li>
<li>思想新闻3</li>
</section>
<section>
<h2>生活</h2>
<li>生活新闻1</li>
<li>生活新闻2</li>
<li>生活新闻3</li>
</section>
</div>
<footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
</div>
</body>
</html>