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

最新推荐文章于 2025-03-10 19:09:15 发布
最新推荐文章于 2025-03-10 19:09:15 发布
阅读量3.3k 收藏 17
点赞数 11
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_74303175/article/details/136892370
版权

第1关 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 {
      font-size:0.6em;
      margin-top: 20px;
      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选择器

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

    

    /*选择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;
    }
    #chosen{color:red;}
#news{color:blue;}
#finance{color:olive;}
#think{color:green;}
#life{color:orange;}    
    /* ********** 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>

CSS从入门到精通——基础知识
Junds0的博客
09-05 2009
第1关：初识CSS：丰富多彩的网页样式 通过编写CSS给网页添加基本的样式,补全Begin至end中间的部分，选择index.html文件，设置其CSS样式为：修改h1标题的text-align为居中显示，字体大小为40px；p段落的颜色为灰色:grey,字体大小为18px。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</t
CSS从入门到精通——基础选择器
Junds0的博客
09-05 1237
第1关：CSS 元素选择器 使用元素选择器修改页面样式，要求如下： 设定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
educoder -CSS从入门到精通——基础选择器
刘向阳的博客
06-09 1821
第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 入门指南（一）：基本概念 & 选择器 & 常用元素属性
最新发布
island1314的博客
03-10 1729
网页中的 HTML 标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。】那么本篇到此就结束啦，如果有不懂 和 发现问题的小伙伴可以在评论区说出来哦，同时我还会继续更新关于【Linux】的内容，请持续关注我！可以设置多个字体名称，之间使用空格隔开，在实际加载中只会选择一种加载，选择的依据是书写顺序进行（每个字体名用逗号隔开，从左往右查找）特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性。身份证号码是 id 选择器，是唯一的.
CSS从入门到精通——基础选择器(二)
qq_42212132的博客
07-31 574
类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器。 例如，对于HTML页面: <body> <div class="main"> <article class="news"> <h1>地震自救指南</h1> <p>大的晃动时间约...
CSS从入门到精通——基础选择器(一)
qq_42212132的博客
07-31 622
元素选择器 最常见和易理解的CSS选择器是元素选择器，又称为类型选择器。也就是将HTML文档中的元素，直接作为选择器使用。 例如对于HTML页面： <body> <h1>标题1</h1> <h2>标题2</h2> <p>普通段落中<a href="#">删除的引用。</a></...
头歌-CSS入门
somewon的博客
03-06 9791
四川师范大学 CSS 头歌
头歌----CSS从入门到精通——动画
07-05
"头歌-CSS从入门到精通-动画" 这本书或教程系列可能是一个指南，专为那些想要深入学习前端开发中CSS（层叠样式表）的用户设计。CSS动画是内容中的一个重要部分，它能让网页元素呈现出动态效果，提升用户体验。 主要...
css从入门到精通——基础选择器
06-09
好的，关于 CSS 的基础选择器，我可以为你进行解答。 在 CSS 中，选择器是用来指定我们想要样式化的 HTML 元素的。基础选择器包括以下几种： 1. 标签选择器：可以通过 HTML 标签名称来选择指定的元素，例如：`p` ...
头歌--CSS从入门到精通——文本与字体样式
m0_74303175的博客
03-21 2687
【代码】头歌--CSS从入门到精通——文本与字体样式。
CSS初入门：基础介绍、选择器、特性
lalala_dxf的博客
03-15 1393
一、简介 什么是CSS CSS（英文名：Cascading Style SHeets，中文名：层叠样式表），是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，将文档以比较优雅的形式呈现给用户 HTML和CSS之间的关系 THML是网页内容的载体。就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。可以对网页中标题文字、颜色变化、图片加载、网页边框等加以修饰，使其更加美观 举个生活中比较接近的例子：HTML->人；CSS->化.
头歌--从入门到精通
m0_74303175的博客
04-03 1433
说实话这个平台编写这些太死版了，只能按照它规定的方法解决.......元素的背景定位和背景关联属性。要更改,我编写时检测几遍都不对，才看到这个要求。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。去更改网页的背景图片。请在右侧的编辑框中修改。
CSS从入门到精通——基础选择器(三)
qq_42212132的博客
07-31 413
id选择器 id选择器与我们上一关中学习的类选择器类似，但在使用上有不同。 使用类选择器时，指定一个元素属于某类，使用的是关键字class，例如: <body> <h1 class="important">温馨提示</h1> <p>少一串脚印，多一份绿意。</p> </body> 而在使用id选择器时，使用的...
CSS入门: css介绍与基础选择器
qq_41421033的博客
02-15 420
CSS的介绍 CSS的中文名称: 层叠样式表 CSS的作用: 给页面中的HTML标签设置样式 CSS的语法规则: <style> ​ p { ​ color: red; } </style> p 是选择器, color是属性名, red是属性值 CSS常见属性: css常见属性 作业 color 文字颜色 font-size 字体大小 background-color 背景颜色 width 宽度 height 高度 注意点: CSS标..
CSS：(1)语法规范 代码风格及基础选择器
urcecilie的博客
03-14 260
CSS基础知识1CSS简介1. CSS——网页的美容师2.CSS语法规范CSS代码风格1.样式代码书写2.样式大小写 CSS简介 1. CSS——网页的美容师 CSS是层叠样式表（Cascading Style Sheet）的简称，有时我们也会称之为CSS样式表或级联样式表。 CSS也是一种标记语言。 CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS让我们的网页更加丰富多彩，布局灵活自如，简单理解：CSS可以美化
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值