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

最新推荐文章于 2024-03-21 00:22:48 发布
最新推荐文章于 2024-03-21 00:22:48 发布
阅读量1.9k 收藏 13
点赞数 4
分类专栏： web前端 文章标签： 前端
原文链接：https://blog.csdn.net/Junds0/article/details/120120499
版权

目录：

第1关：CSS 元素选择器

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

在这里插入图片描述

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

任务实现效果如图：

在这里插入图片描述

参考答案

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

第2关：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">
    /* 元素选择器 */
    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>

第3关：CSS id选择器

任务描述
在本关中，你将通过id选择器的方式完成页面菜单栏样式布局，栏目导航等任务。

完成任务之后，基本页面效果如下：

在这里插入图片描述

动态效果如下：

在这里插入图片描述
参考答案

<!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>ID选择器</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;
    }
    .newsSection {
      margin-top: 20px;
      padding: 20px;
      background-color: white;
    }
    /* ********** BEIGN ********** */

    #chosen{
      color:red;
    }
    
    #news{
      color:blue;
    }
    
    #finance{
      color:olive;
    }

    #think{
      color:green;
    }

    #life{
      color:orange;
    }

    /*选择menu元素下的li子元素*/
    #menu li {
      float: left;
      width: 70px;
      font-size: 1.2em;
      font-weight: lighter;
    }
    /*选择menu元素下的li子元素和li下得a子元素*/
    #menu li, li a {
      list-style: none;
      text-decoration: none;
    }
    /* ********** END ********** */
  </style>
</head>
<body>
<div class="main">
  <!-- ********** BEGIN ********** -->
  <header id="menu">
  <!-- ********** END ********** -->
    <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 class="newsSection">
    <section>
      <h2 id="chosen">精选</h2>
      <li>精选新闻1</li>
      <li>精选新闻2</li>
      <li>精选新闻3</li>
    </section>
    <section>
      <h2 id="news">时事</h2>
      <li>时事新闻1</li>
      <li>时事新闻2</li>
      <li>时事新闻3</li>
    </section>
    <section>
      <h2 id="finance">财政</h2>
      <li>财政新闻1</li>
      <li>财政新闻2</li>
      <li>财政新闻3</li>
    </section>
    <section>
      <h2 id="think">思想</h2>
      <li>思想新闻1</li>
      <li>思想新闻2</li>
      <li>思想新闻3</li>
    </section>
    <section>
      <h2 id="life">生活</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>
QingNiaoJun
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5css3从入门到精通
07-22
资源名称：html5 css3从入门到精通资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
html5+css3从入门到精通
09-07
html5+css3从入门到精通
头歌--CSS从入门到精通——基础选择器
最新发布
m0_74303175的博客
03-21 777
【代码】头歌--CSS从入门到精通——基础选择器。
educoder -CSS从入门到精通——基础选择器
刘向阳的博客
06-09 1637
第1关：CSS 元素选择器 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"
CSS入门｜元素选择器、类选择器和ID选择器
2401_82788290的博客
02-04 1982
a:link, a:visited, a:hover, a:active,错误的顺序有时候会使得超链接的样式失效；用法：当我的元素存在父级元素时，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。如div,p,h1,img,a,span,i,em,strong,b,ul,li,ol,li等。}鼠标悬停，即鼠标划过超链接时的状态；说明：有多个选择符应用相同的声明时，可以将选择符用“，”分隔的方式，合并为一组。表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。
CSS学习随笔
羽轩阁
03-11 255
一. CSS简介 1.什么是CSS CSS:Cascading Style Sheet 层叠样式表 是一组样式设置规则，用于控制页面的外观样式 2.为什么使用CSS · 实现内容与样式的分离，便于团队开发 · 样式复用，便于网站的后期维护 · 页面的精确控制，让页面更加精美 3.CSS作用 · 页面外观美化 · 布局和定位 二.基本用法 1.CSS用法 &amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;a
CSS从入门到精通——基础选择器
weixin_54327001的博客
12-13 3909
第1关：CSS 元素选择器 任务描述 在完成本实训之后，你将掌握元素选择器、类选择器和id选择器这三种基础选择器。你将会学会独立制作如下新闻主页页面： 本关任务：熟悉元素选择器，使用属性选择器修改文档样式。 任务实现效果如图： 相关知识 元素选择器 最常见和易理解的CSS选择器是元素选择器，又称为类型选择器。也就是将HTML文档中的元素，直接作为选择器使用。 例如对于HTML页面： <body> <h1>标题1</h1> <h2
【从零开始学习CSS | 第一篇】选择器介绍
fckbb的博客
07-12 3058
在CSS（层叠样式表）中，选择器是一种用于选择 HTML 元素以应用特定样式的模式或规则。选择器通过匹配 HTML 元素的不同属性、关系或状态来确定要应用样式的目标元素。
CSS的选择器(超详细)
热门推荐
前端开发,HTML5,css3,JavaScript,node.js,vue
11-21 7万+
一、常用的选择器 1.元素选择器 2.类选择器(class选择器) 3.id选择器 4.通配符选择器 二、群组选择器 三、关系选择器 1.后代选择器 2.子代选择器 3.相邻兄弟选择器 4.通用兄弟选择器 5.案例 四、属性选择器 五、伪类选择器 1.常用的伪类选择器 2.否定伪类 3.元素的伪类 六、伪元素选择器
第一章 - CSS选择器
zl960320的博客
11-17 790
引言 前面我们学习了HTML的一些基础知识，了解了HTML是前端开发中用于书写结构的标签，我们在浏览网页时，会看到页面内容的各种好看的样式，这些样式的实现是通过CSS来实现的，CSS的主要使用场景就是美化网页，布局页面的CSS也是一种标记语言。 CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形(宽度，边框样式，边距等)以及版面的布局和外观显示样式。 下面讲解一些CSS的基础内容 1. CSS选择器 1.1 选择器的作用 选择器就是根据不同的需求把不同的标签选出来，
CSS从入门到精通——基础选择器(二)
qq_42212132的博客
07-31 441
类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器。 例如，对于HTML页面: <body> <div class="main"> <article class="news"> <h1>地震自救指南</h1> <p>大的晃动时间约...
PHP从入门到精通完整笔记301页.pdf
05-12
PHP从入门到精通完整笔记301页.pdf PHP从入门到精通_html+CSS笔记(1-22讲) PHP从入门到精通_php课程(23-149讲)
html+CSS从入门到精通学习记录.zip
01-01
html+CSS从入门到精通学习记录html+CSS从入门到精通学习记录 html+CSS从入门到精通学习记录html+CSS从入门到精通学习记录 html+CSS从入门到精通学习记录html+CSS从入门到精通学习记录 html+CSS从入门到精通学习记录...
CSS网页布局入门教程9：用CSS设计网站导航——横向导航
10-30
CSS网页布局入门教程9：用CSS设计网站导航——横向导航
css3-文本外观样式
m0_51461030的博客
12-10 1201
educoder-web实训答案
CSS文本属性和CSS的引入方式
qq_49037451的博客
07-22 210
CSS文本属性 CSS Text属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。 文本颜色 color属性用于定义文本的颜色。 开发中最常用的是十六进制。 对齐文本 text align属性用于设置元素内文本内容的水平对齐方式。 装饰文本 text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。 重点记住如何添加（删除）下划线，其余了解即可。 文本缩进 text-indent属性用来指定文本的第一行的缩进，通常将段落的首行缩进
EduCoder-Web程序设计基础-html5— CSS3选择器-基础选择器-第1关：CSS基础选择器相关概念
weixin_51402180的博客
12-10 893
1、id选择器使用（ ）进行标识，后面紧跟id名 A、 ^ B、 * C、 . D、 答案：D 2、类选择器使用（ ）进行标识，后面紧跟class名。 A、 ^ B、 * C、 . D、 答案：C 3、CSS选择器的优先级从高到低分别为，通用选择器、标签选择器、类选择器、ID选择器。 A、 对 B、 错 答案：B ...
CSS各种选择器详解
陈瑾
10-17 2169
本文主要介绍了12种选择器的功能及使用，重点讲述了伪类选择器和伪元素选择器。除此之外，本文最后还讲解了复杂选择器的优先级比较。
头歌-CSS入门
somewon的博客
03-06 7298
四川师范大学 CSS 头歌
css从入门到精通——基础选择器
06-09
好的，关于 CSS 的基础选择器，我可以为你进行解答。 在 CSS 中，选择器是用来指定我们想要样式化的 HTML 元素的。基础选择器包括以下几种： 1. 标签选择器：可以通过 HTML 标签名称来选择指定的元素，例如：`p` 选择所有段落元素。 2. 类选择器：通过 `.` 符号加上类名来选择指定的元素，例如：`.example` 选择所有类名为 `example` 的元素。 3. ID 选择器：通过 `#` 符号加上 ID 名称来选择指定的元素，例如：`#header` 选择 ID 名称为 `header` 的元素。 4. 属性选择器：通过元素的属性来选择指定的元素，例如：`input[type="text"]` 选择所有 `type` 属性为 `text` 的 `input` 元素。 5. 通配符选择器：使用 `*` 符号来选择所有元素，例如：`*` 选择所有元素。 6. 组合选择器：可以将多个选择器组合起来，例如：`h1, h2` 选择所有 `h1` 和 `h2` 元素。 以上就是常用的基础选择器，通过不同的选择器，我们可以对不同的 HTML 元素进行样式化。希望能够帮到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值