CSS从入门到精通——基础选择器

深藏阁楼爱情的钟 2021-05-16 20:37 534阅读 0赞

### 基础选择器 ###

*  引言
 *   *  1、CSS 元素选择器
     *   *  任务描述
         *  相关知识

# 引言 #

*  **层叠样式表**（Cascading Style Sheets， CSS）是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，由W3C定义和维护。
 *  目前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4也已经在开发中。使用外部文件的层叠样式表，可以将内容与表现分离。同时，可以极大提高工作效率。

## 1、CSS 元素选择器 ##

### 任务描述 ###

在完成本实训之后，你将掌握元素选择器、类选择器和id选择器这三种基础选择器。你将会学会独立制作如下新闻主页页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]

*  【这本来是个动图，我只截了一部分昂~o(*￣︶￣*)o】

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

任务实现效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]

### 相关知识 ###

**`元素选择器`**

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

例如对于HTML页面：

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

使用`元素选择器`添加元素样式：

显示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]  
当我们指定一个元素，并设置样式属性之后，文档中该元素便会应用样式。例如，我们设置`p`元素的颜色为灰色(grey)，在没有其他样式覆盖的情况下，文档中所有的`p`元素都将为灰色。

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

例如对于HTML页面：

<body>
        <h1>组合选择器</h1>
        <p>组合选择器，可以将样式同时运用于多个元素。</p>
    </body>
    </html>

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

显示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]  
**`注意：`**

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

**`元素选择器语法`**

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

/*单个元素选择器*/
    元素 {样式声明}
    
    /*组合元素选择器*/
    元素1，元素2 {样式声明}

**编程要求**

*  使用元素选择器修改页面样式，要求如下：
 *  设定`html`元素的`background-color`为`#F0F0F0`；
 *  设定`header`元素的`padding`为`40px`，`background-color`为白色；
 *  添加`footer`元素的`font-size`为`0.6em`，字体颜色为灰色(`grey`)。

**`代码文件：`**

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20210516/daccb5e5967d4da0b2834d76a1bde8d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20210516/f7c9e9de118c4d30985940566dcd9ba7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: /images/20210516/047190a6fbf244819c11cda0d683cc2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]: /images/20210516/c552798d5e7f4638a0e09d51a1d81945.png