CSS 类选择器

最新推荐文章于 2024-05-20 18:40:16 发布

少年游四方

最新推荐文章于 2024-05-20 18:40:16 发布

阅读量1.4k

点赞数 1

分类专栏： # Web技术应用基础——CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_45823118/article/details/115182047

版权

Web技术应用基础——CSS 专栏收录该内容

13 篇文章 22 订阅

订阅专栏

CSS 类选择器

任务描述
相关知识

任务描述

本关任务是通过类选择器的方式，更改独立于文档元素的属性。
在这里插入图片描述

相关知识

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器。

例如，对于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;）。

代码文件：

<!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>

读书是在别人思想的帮助下，建立起自己的思想。——————鲁巴金

少年游四方

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 类选择器

CSS 类选择器任务描述相关知识任务描述本关任务是通过类选择器的方式，更改独立于文档元素的属性。相关知识类选择器类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器。例如，对于HTML页面:<body><div class="main"> <article class="news"> <h1>地震自救指南</h1> <p>大的晃动时间约
复制链接

扫一扫