第1关:CSS 元素选择器

目录

任务描述

相关知识

元素选择器

元素选择器语法

编程要求

测试说明


任务描述

在完成本实训之后,你将掌握元素选择器、类选择器和id选择器这三种基础选择器。你将会学会独立制作如下新闻主页页面:

本关任务:熟悉元素选择器,使用属性选择器修改文档样式。

任务实现效果如图:

相关知识

元素选择器

最常见和易理解的CSS选择器是元素选择器,又称为类型选择器。也就是将HTML文档中的元素,直接作为选择器使用。

例如对于HTML页面:  

 
  1. <body>
  2. <h1>标题1</h1>
  3. <h2>标题2</h2>
  4. <p>普通段落中<a href="#">删除的引用。</a></p>
  5. </body>

使用元素选择器添加元素样式:  

 
  1. <style type="text/css">
  2. html {color:black;}
  3. h1 {color:darkcyan;}
  4. h2 {color:lightSeaGreen;}
  5. p {color:grey;}
  6. a {text-decoration:line-through;}
  7. </style>

显示效果如下:

当我们指定一个元素,并设置样式属性之后,文档中该元素便会应用样式。例如,我们设置p元素的颜色为灰色(grey),在没有其他样式覆盖的情况下,文档中所有的p元素都将为灰色。  

如果想要多种元素应用同一样式,可以直接使用组合元素选择器。将多个要应用样式的元素用逗号隔开,例如:

例如对于HTML页面:  

 
  1. <body>
  2. <h1>组合选择器</h1>
  3. <p>组合选择器,可以将样式同时运用于多个元素。</p>
  4. </body>
  5. </html>

使用元素选择器添加元素样式:  

 
  1. <style type="text/css">
  2. /* 组合元素选择器 */
  3. /*将`h1`、`p`元素的颜色同时设置为灰色*/
  4. h1,p {color:grey;}
  5. </style>

显示效果如下:

注意:

  • 多个元素之间的逗号是必不可少的,如果缺失了逗号将表示其他含义。

元素选择器语法

我们可以看出元素选择器的语法规则如下:  

 
  1. /*单个元素选择器*/
  2. 元素 {样式声明}
  3. /*组合元素选择器*/
  4. 元素1,元素2 {样式声明}

编程要求

使用元素选择器修改页面样式,要求如下:

  • 设定html元素的background-color#F0F0F0

  • 设定header元素的padding40pxbackground-color为白色;

  • 添加footer元素的font-size0.6em,字体颜色为灰色(grey)。

测试说明

平台会对你的代码进行运行测试,如果实际输出结果与预期结果相同,则通关;反之,则 GameOver


生活的道路一旦选定,就要勇敢地走到底,决不回头。——左拉

开始你的任务吧,祝你成功!

如果你觉得这一关的内容对你有帮助,请你在下面点赞。

CSS元素选择器
<!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;
      font-size:0.6em;
      color:grey;
    }

    /* ********** 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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嵌入式Dora

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值