CSS id选择器

目录

任务描述

相关知识

id选择器

id选择器语法

类选择器与id选择器的区别

编程要求


任务描述

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

完成任务之后,基本页面效果如下:

动态效果如下:

相关知识

id选择器

id选择器与我们上一关中学习的类选择器类似,但在使用上有不同。

使用类选择器时,指定一个元素属于某类,使用的是关键字class,例如:

<body><h1 class="important">温馨提示</h1><p>少一串脚印,多一份绿意。</p>
</body>

而在使用id选择器时,使用的是关键字id。对于上面类选择器的例子,用id选择器书写:

<body><h1 id="important">温馨提示</h1><p>少一串脚印,多一份绿意。</p>
</body>

在样式表中,指定对应id名元素的样式,使用#符号,也称为棋盘号或井号。

#important {color: red;font-weight: bold;
}

样式应用效果如图:

id选择器语法

同理,我们可以看出,id选择器的语法规则如下:

  1. 首先,将html中想要应用类样式的元素,指定id名。

    1. <元素名 id="指定的类名"></元素名>
    2. <元素名 id="指定的类名">
  2. 然后,书写相应类的样式。

    1. #指定的类名 {样式声明}

类选择器与id选择器的区别

类选择器与id选择器类似,那么它们的区别是什么呢?什么情况下应该使用哪一种选择器呢?

它们最大的区别在于,在一个 HTML 文档中,可以为任意多个元素指定类,但id选择器只能使用一次,一个id只能运用于一个元素。

一般情况下,都推荐使用类选择器。而在一些特定情况下,我们才会建议使用id选择器。例如,通过id选择器在页面中定义锚,在编写 JavaScript 为指定的页面元素应用特殊行为时。

编程要求

  • header元素添加名为menu的id;

  • 使用id选择器,设置精选(#chosen)标题为红色(red),时事( #news)标题为蓝色(blue),财政(#finance)标题为橄榄绿(olive), 思想(#think)标题为绿色(green),生活(#life)标题为橘色(orange)。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/26108.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA:配置Golang的开发环境

1、下载&安装 进入GO的官网下载对应的GO 我们可以下载安装版&#xff0c;不过本人习惯下载解压版&#xff0c;这个因个人而异 2、配置环境变量 GOBIN : %GOROOT%\bin GOPATH : D:\MyGo 工作区间 GOROOT : D:\Program Files\Go GOJDK地址PATH: %GOBIN% ; %GOROOT%\bin ; …

生成性人工智能模型:行业和当局的机会和风险

1 目标受众和本文档目的 BSI&#xff08;德国联邦信息安全办公室&#xff09;通过本出版物面向考虑在其工作流程中使用生成性AI模型的公司和当局&#xff0c;以提高对这些模型的基本安全意识&#xff0c;并促进它们的安全使用。为此&#xff0c;除了机会外&#xff0c;它还突出…

Spring Boot整合Redis实现发布/订阅功能

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

Kimichat使用案例012:用Kimichat拆解雷军在小米汽车SU7发布会上的演讲技巧

文章目录 一、介绍二、输入内容三、输出内容四、继续追问五、继续回答六、讲解对比七、对比回答相似之处:不同之处:八、职场人士如何借鉴九、借鉴内容一、介绍 小米SU7发布会可以说是非常成功。雷军的演讲技巧是发布会成功的重要因素之一,很值得借鉴学习。 可以借助Kimichat…

git服务器gitblit安装

1、下载 Gitblit 2、下载完后解压&#xff1a; 3、配制&#xff1a; 保存&#xff0c;退出编辑。 4、运行cmd&#xff0c;启用gitblit。 5、根据运行后的提示&#xff0c;也就是我们之间设置的port9990打开&#xff1a; 输入admin,admin就可以登录&#xff0c;这个账号密码&a…

[大模型]GLM4-9B-chat Lora 微调

本节我们简要介绍如何基于 transformers、peft 等框架&#xff0c;对 LLaMA3-8B-Instruct 模型进行 Lora 微调。Lora 是一种高效微调方法&#xff0c;深入了解其原理可参见博客&#xff1a;知乎|深入浅出 Lora。 这个教程会在同目录下给大家提供一个 nodebook 文件&#xff0c…

IP协议报文格式

IP协议报文格式 一: 报头格式1.1 : 4位版本1.2 : 4位首部长度1.3 : 8位服务类型 :1.4 : 16位总长度(字节数)1.5 : 8位生存时间(TTL)1.6 : 8 位协议1.7 : 32 位源IP / 32 位目的IP 一: 报头格式 1.1 : 4位版本 现在使用的也就只有IPv4,IPv6 1.2 : 4位首部长度 以 4字节为单位…

Xilinx(AMD) vivado对FPGA网表文件进行功能仿真的方法

1 概述 在FPGA开发中很多商用IP核出于知识产权保护的目的&#xff0c;不提供源代码&#xff0c;而是提供综合后的FPGA网表。由于没有源代码&#xff0c;也无法对网表文件直接进行仿真的操作来验证功能&#xff0c;此时需要独立的仿真模型文件。 本文介绍在Xilinx(AMD) vivado软…

【解决问题】QApplication: No such file or directory,C++ 使用Qt或项目未正确加载Cmake报错

运行环境&#xff1a; Clion编译&#xff0c;构建C工程项目报错QApplication: No such file or directory 问题描述 QApplication: No such file or directory 引用的#include <QApplication>飘红 解决方案 1、Qt没有安装正确&#xff0c;请使用对应版本的Qt。或编译…

C++20 新特性的理解与实践

C20 是 C 编程语言的最新版本&#xff0c;引入了许多新的特性和改进&#xff0c;以提高开发人员的生产力和代码质量。以下是对 C20 新特性的理解与实践&#xff1a; Concepts 概念&#xff1a;Concepts 是对泛型类型参数的一种约束机制&#xff0c;可以在编译时检查类型参数是否…

激光点云配准算法——Cofinet / GeoTransforme / MAC

激光点云配准算法——Cofinet / GeoTransformer / MAC GeoTransformer MAC是当前最SOTA的点云匹配算法&#xff0c;在之前我用总结过视觉特征匹配的相关算法 视觉SLAM总结——SuperPoint / SuperGlue 本篇博客对Cofinet、GeoTransformer、MAC三篇论文进行简单总结 1. Cofine…

Nginx之正向代理配置示例和说明

一、NGINX正向代理功能简介 Nginx的正向代理功能允许局域网中的客户端通过代理服务器访问Internet资源。具体来说&#xff0c;Nginx作为一种流行的Web服务器和反向代理服务器&#xff0c;在正向代理方面的应用也相当实用。以下是其正向代理功能的几个关键点&#xff1a; 访问外…

使用手机做PC机摄像头

准备工作&#xff1a; 带摄像头的安卓手机一部模拟相机软件&#xff1a;Iriun 、DroidCam 、IP摄像头pythonopencv 一、Iriun 1、分别在PC和手机上安装 2、手机和PC在同一个局域网 3、分别打开PC和手机端软件&#xff0c;电脑端就可以使用手机相机 ​ 二、 DroidCam 1、…

开发小Tips:切换淘宝,腾讯,官方,yarn,cnpm镜像源,nrm包管理工具的具体使用方式(方便切换镜像源)

由于开发中经常要下载一些软件或者依赖&#xff0c;且大多数的官方源的服务器都在国外&#xff0c;网速比较慢&#xff0c;国内为了方便&#xff0c;国内一些大厂就建立一些镜像&#xff0c;加快下载速度。 1.各大镜像源的切换&#xff1a; 切换淘宝镜像源&#xff1a; npm …

gcc: 使用新版本的问题

最近遇到一个问题&#xff0c;发现一个功能在gcc 8.5】是好用的&#xff0c;到了11.4上之后&#xff0c;这个功能不好使了。 这种问题怎么debug好呢&#xff1f;第一步是要去gcc的bug系统先搜一下&#xff08;英语的重要性就来了&#xff09;。 后来去了gcc的官网/bug系统&…

数据挖掘丨轻松应用RapidMiner机器学习内置数据分析案例模板详解(上篇)

RapidMiner 案例模板 RapidMiner 机器学习平台提供了一个可视化的操作界面&#xff0c;允许用户通过拖放的方式构建数据分析流程。 RapidMiner目前内置了 13 种案例模板&#xff0c;这些模板是预定义的数据分析流程&#xff0c;可以帮助用户快速启动和执行常见的数据分析任务。…

(delphi11最新学习资料) Object Pascal 学习笔记---第14章泛型第2节(泛型类型函数 )

14.2.4 泛型类型函数 ​ 到目前为止&#xff0c;我们遇到的泛型类型定义的最大问题是&#xff0c;您对泛型类型元素能做的事情非常少。有两种技术可以用来克服这个限制。第一种是利用运行时库的一些特殊函数&#xff0c;这些函数专门支持泛型类型&#xff1b;第二种&#xff0…

Unity 数据存储

在Unity中&#xff0c;资源的存储是非常重要的&#xff0c;所以了解资源的存储方式是有必要的&#xff0c;接下来说明一个重要的部分。 1.Unity存储 Unity为我们提供了自带的永久存储方式&#xff0c;PlayerPrefs&#xff0c;使用方法可以参考我这篇文章..点击导航 当然&…

Zabbix6.0自动发现Linux服务器并添加主机

文章目录 一、整体流程二、操作过程 一、整体流程 Zabbix自动发现主机功能是Zabbix监控系统的一个重要功能&#xff0c;它能够自动发现并添加新的主机到监控系统中&#xff0c;从而减少人为繁琐的操作&#xff01; 步骤操作1️⃣ 第一步创建自动发现规则2️⃣ ​第二步创建自…

opengl 正交投影 透视投影 切换不显示解决

opengl 正交投影 透视投影 切换不显示解决 完整源代码: import random import sys from PyQt5 import QtWidgets, QtCore from PyQt5.QtWidgets import QMainWindow, QApplication, QVBoxLayout, QPushButton from PyQt5.QtCore import Qt, QSize from OpenGL.GL import * …