CSS从⼊门到精通——基础选择器
第1关：CSS 元素选择器
任务描述
在完成本实训之后，你将掌握元素选择器、类选择器和id选择器这三种基础选择器。你将会学会独⽴制作如下新闻主页页⾯：
本关任务：熟悉元素选择器，使⽤属性选择器修改⽂档样式。
任务实现效果如图：
相关知识
元素选择器
最常见和易理解的CSS选择器是元素选择器，⼜称为类型选择器。也就是将HTML⽂档中的元素，直接作为选择器使⽤。
例如对于HTML页⾯：
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<p>普通段落中<a href="#">删除的引⽤。</a></p>
</body>
使⽤元素选择器添加元素样式：
<style type="text/css">
html {color:black;}
css 属性选择器h1 {color:darkcyan;}
h2 {color:lightSeaGreen;}
p {color:grey;}
a {text-decoration:line-through;}
</style>
当我们指定⼀个元素，并设置样式属性之后，⽂档中该元素便会应⽤样式。例如，我们设置p元素的颜⾊为灰⾊(grey)，在没有其他样式覆盖的情况下，⽂档中所有的p元素都将为灰⾊。
如果想要多种元素应⽤同⼀样式，可以直接使⽤组合元素选择器。将多个要应⽤样式的元素⽤逗号隔
开，例如：
例如对于HTML页⾯：
<body>
<h1>组合选择器</h1>
<p>组合选择器，可以将样式同时运⽤于多个元素。</p>
</body>
</html>
使⽤元素选择器添加元素样式：
<style type="text/css">
/* 组合元素选择器 */
/*将`h1`、`p`元素的颜⾊同时设置为灰⾊*/
h1,p {color:grey;}
</style>
注意：
多个元素之间的逗号是必不可少的，如果缺失了逗号将表⽰其他含义。
元素选择器语法
我们可以看出元素选择器的语法规则如下：
/单个元素选择器/
元素 {样式声明}
/组合元素选择器/
元素1，元素2 {样式声明}
编程要求
使⽤元素选择器修改页⾯样式，要求如下：
设定html元素的background-color为#F0F0F0；
设定header元素的padding为40px，background-color为⽩⾊；
添加footer元素的font-size为0.6em，字体颜⾊为灰⾊(grey)。
测试说明
平台会对你的代码进⾏运⾏测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。⽣活的道路⼀旦选定，就要勇敢地⾛到底，决不回头。——左拉
开始你的任务吧，祝你成功！
如果你觉得这⼀关的内容对你有帮助，请你在下⾯点赞。
参考代码：
step4/index.html
<!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">
/
* ********** BEGIN ********** */
/* 元素选择器 */
html {
background-color:#F0F0F0;
}
header{
padding:40px;
background-color:white;
}
footer {
margin-top: 20px;
color:grey;
font-size:0.6em;
}
/* ********** END ********** */
</style>
</head>
<body>
<div>
<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>
<div>
<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>
step4/sample_1.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>例⼦</title>
<style type="text/css">
html {color:black;}
h1 {color:darkcyan;}
h2 {color:lightSeaGreen;}
p {color:grey;}
a {text-decoration:line-through;}
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<p>普通段落中<a href="#">删除的引⽤。</a></p>
</body>
</html>
step4/combine.html
<!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">
/* 组合元素选择器 */
h1,p {color:grey;}
</style>
</head>
<body>
<h1>组合选择器</h1>
<p>组合选择器，可以将样式同时运⽤于多个元素。</p>
</body>
</html>
第2关：CSS 类选择器
任务描述
本关任务是通过类选择器的⽅式，更改独⽴于⽂档元素的属性。
相关知识
类选择器
类选择器允许以⼀种独⽴于⽂档元素的⽅式来指定样式。通常情况只希望应⽤样式，⽽不考虑具体的元素时，会使⽤类选择器。例如，对于HTML页⾯:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。