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

最新推荐文章于 2024-03-21 00:22:48 发布

少年游四方

最新推荐文章于 2024-03-21 00:22:48 发布

阅读量913

点赞数

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

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

版权

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

13 篇文章 21 订阅

订阅专栏

基础选择器

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

引言

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

1、CSS 元素选择器

任务描述

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

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

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

任务实现效果如图：
在这里插入图片描述

相关知识

元素选择器

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

例如对于HTML页面：

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

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

<style type="text/css">
    html {color:black;}
    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)。

代码文件：

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

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

少年游四方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS从入门到精通——基础选择器

基础选择器引言1、CSS 元素选择器任务描述相关知识引言层叠样式表（Cascading Style Sheets， CSS）是一种用来为结构化文档（例如HTML文档或XML应用）添加样式的计算机语言，由W3C定义和维护。目前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4也已经在开发中。使用外部文件的层叠样式表，可以将内容与表现分离。同时，可以极大提高工作效率。1、CSS 元素选择器任务描述在完成本实训之后，你将掌握元素选择器、类选择器和i
复制链接

扫一扫