当前位置：首页 > news >正文

【JavaEE】_CSS引入方式与选择器

news 文章来源：https://blog.csdn.net/m0_63299495/article/details/132696529 2024/11/28 18:44:08

1. 基本语法格式

2. 引入方式

2.1 内部样式

2.2 内联样式

2.3 外部样式

3. 基础选择器

3.1 标签选择器

3.2 类选择器

3.3 ID选择器

4. 复合选择器

4.1 后代选择器

4.2 子选择器

4.3 并集选择器

4.4 伪类选择器

1. 基本语法格式

选择器+若干属性声明

2. 引入方式

2.1 内部样式

使用style标签，直接把CSS写到HTML文件中：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/* {}中编写CSS属性，可以写一个或多个每个属性都是一个键值对，键和值之间用:分割，键值对之间用;分割每个键值对既可独占一行，也可不独占一行*/color:green;font-size: 30px;}</style>
</head>
<body><p>这是一个段落</p>
</body>
</html>

注：style标签可以编写在代码的任何位置：head标签中可以，body标签中也可；

2.2 内联样式

使用style属性，针对指定的元素设置样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><p style="color:green; font-size: 40px;">这是一个段落</p><p>这是另一个段落</p>
</body>
</html>

注：（1）不需要写选择器，直接写属性键值对，此时只对当前元素生效；

（2）内联样式的优先级高于外部样式的优先级：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color:red;}</style>
</head>
<body><p style="color:green; font-size: 40px;">这是一个段落</p><p>这是另一个段落</p>
</body>
</html>

2.3 外部样式

外部样式就是把CSS代码单独作为一个CSS文件，再通过link属性，令HTML引入该CSS文件：

（1）在当前html文件所在文件夹下创建css文件，名为：STYLE.css：

p{color:blue;font-size: 25px;
}

（2）在code2.html文件中引用CSS文件并运行如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="STYLE.css">
</head>
<body><p>这是一个段落</p><p>这是另一个段落</p>
</body>
</html>

根据目录打开文件：

注：外部样式是在实际开发中最常见的编写CSS的方式，这种方式可以有效实现HTML和CSS分离开来，相互不影响。（为演示简单方便，教学中多采用内部样式）

3. 基础选择器

3.1 标签选择器

在大括号前写标签名字，表示选中当前页面中所有的指定标签；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color:goldenrod;font-size: 25px;}</style>
</head>
<body><p>这是第一个段落</p><div>这是一个div</div><p>这是第二个段落</p>
</body>
</html>

根据目录打开文件：

所有的p标签都被设置了

3.2 类选择器

可以创建CSS类，手动指定哪些元素应用这个类：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><style>/* 定义一个CSS类，类名为.one */.one{color:brown;}.two{color:darkgreen;}.three{color:cornflowerblue;}.four{font-size: 25px;}</style><div class="one">这是第一个div</div><div class="two">这是第二个div</div><div class="one">这是第三个div</div><div class="three four">这是第四个div</div>
</body>
</html>

注：（1）此处的类与面向对象的类无关，CSS的类是一组属性的集合，方便其他地方引用；

（2）在CSS中，定义类名必须以.开头，但在body对应段落中引用类时不需要再加.；

（3）一个类可以被一个元素引用，也可以被多个元素引用；

一个元素可以引用一个类，也可以引用多个类；

（4）CSS全称为Cascading Style Sheets，即：层叠样式表，即一个元素可以被应用多组样式的，这些样式就像层层叠加一样，在网页中打开DOM资源管理器选中第四个div查看样式：

即第四个div最终效果是由font-size和color两个属性叠加起来的综合效果；

3.3 ID选择器

HTML页面中的每个元素都可以设置一个唯一的id，作为元素的身份标识：给元素安排id后，就可以通过id来选中对应元素：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#firstDiv{color:brown;}</style>
</head>
<body><div id="firstDiv">这是一个div</div><div id="secondDiv">这是另一个div</div>
</body>
</html>

注：（1）同一个页面中元素的id必须是唯一的，跨页面可以存在重名的id；

（2）对于类选择器，允许令多个元素应用同一个类的；

对于ID选择器，则只能针对唯一的元素生效；

4. 复合选择器

以上三选择器均属于简单的基础选择器，除此之外，CSS还支持一些更复杂的复合选择器，即组合基础选择器；

4.1 后代选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><style>ul li{color:brown;}.one li{color:forestgreen;}</style><ol class="one"><li>aaa</li><li>bbb</li><li>ccc</li></ol><ol><li>aaa</li><li>bbb</li><li>ccc</li></ol><ul><li>aaa</li><li>bbb</li><li>ccc</li></ul>
</body>
</html>

根据目录打开文件：

注：（1）写法含义为：先去页面中查询所有的ul，再在这些ul中查询所有的li，此时页面中ol中的li是不会被选中的；

（2）li只要是ul的后代即可，不只是子元素，孙代元素亦可；

（3）后代选择器可以将多个简单基础选择器进行组合，可以是标签、类、id选择器的任意组合；

4.2 子选择器

子选择器也是将多个基础选择器进行组合，但子选择器只找匹配的子元素，不找孙代元素，针对性更强：

格式为：选择器1>选择器2{

属性...

}

比如：基于以下body内代码：

    <div class="one"><!-- 链接1元素是one的子元素 --><a href="#">链接1</a><!-- p标签是one的子元素 --><p><!-- 链接2是one的孙子元素 --><a href="#">链接2</a></p></div>

分别使用后代选择器表示法（空格）与子选择器表示法（>）：

（1）后代选择器：

    <style>.one a{color:red;}</style>

根据目录打开文件：

子元素与孙代元素均被选择器选中，变为红色；

（2）子选择器：

    <style>.one>a{color:red;}</style>

子元素被选中，变为红色；

孙代元素没有被选中，仍旧为默认色；

4.3 并集选择器

语法格式为：

选择器1, 选择器2{

属性...

}

含义为：既针对选择器1生效，又对选择器2生效，即多组选择器应用了同样的样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.two{font-size: 25px;}.three{font-size: 25px;}</style>
</head>
<body><div class="one"><a href="#" class="two">链接1</a><p><a href="#" class="three">链接2</a></p></div>
</body>
</html>

对于以上代码，将two类与three类中的内容字体均设置为25px，可以使用并集选择器实现：

    <style>.two, .three{font-size: 25px;}</style>

运行结果如下：

4.4 伪类选择器

伪类选择器是复合选择器的一种特殊用法。之前的选择器是选中某个元素，但伪类选择器选中某个元素的某个特定状态；

（1）:hover 鼠标悬停时的状态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one:hover{color:red;font-size: 40px;/* 表示鼠标悬停在内容上时，字体变红且字体变为40像素*/}</style>
</head>
<body><div class="one">这是一个div</div>
</body>
</html>

运行后页面如下：

鼠标未悬停在字体上时：

鼠标悬停在字体上时：

（2）:active 鼠标按下时的状态

【JavaEE】_CSS引入方式与选择器

目录 1. 基本语法格式 2. 引入方式 2.1 内部样式 2.2 内联样式 2.3 外部样式 3. 基础选择器 3.1 标签选择器 3.2 类选择器 3.3 ID选择器 4. 复合选择器 4.1 后代选择器 4.2 子选择器 4.3 并集选择器 4.4 伪类选择器 1. 基本语法格式选择器若干属性声明 2. 引入…...

编程日记 2023/9/10 17:37:49

上一篇将 vao vbo写入类中进行封装，本篇将shader进行封装。 Shader shader("res/shaders/Basic.shader");shader.Bind(); shader.SetUniform4f("u_Color", 0.2f, 0.3f, 0.8f, 1.0f);shader.h #pragma once#include <string> #include &l…...

编程日记 2023/9/10 17:36:48

Servlet注册迭代史

Servlet注册迭代史 1、第一代，xml注册 <web-app><display-name>Archetype Created Web Application</display-name><servlet><servlet-name&…...

编程日记 2023/9/10 17:35:47

合创汽车V09纵享商务丝滑？预售价32万元起，正式宣布大规模生产

合创汽车正式宣布，旗下新款车型V09已于9月10日开始大规模生产，并预计将于10月13日正式上市。V09作为中大型纯电动MPV的代表之一，备受瞩目。该车型是广汽新能源和蔚来汽车共同成立的广汽蔚来改为广汽集团和珠江投管共同投资的高端品牌——合创…...

编程日记 2023/9/10 17:34:45

49. 视频热度问题

文章目录实现一题目来源谨以此笔记献给浪费掉的两个小时。此题存在多处疑点和表达错误的地方，如果你看到了这篇文章，劝你跳过该题。该题对提升HSQL编写能力以及思维逻辑能力毫无帮助。实现一 with info as (-- 将数据与 video_info 关联&#x…...

编程日记 2023/9/10 17:33:44

【力扣练习题】加一

package sim;import java.math.BigDecimal; import java.util.Arrays;public class Add1 {/*给定一个由整数组成的非空数组所表示的非负整数，在该数的基础上加一。最高位数字存放在数组的首位， 数组中每个元素只存储单个数字。你可以假设除了整数 0 …...

编程日记 2023/9/10 17:32:43

Linux--I/O复用之select

目录一：概念二：使用三：参数介绍： 1.ndfs： 2.fd_set类型： 3.readfds： 4.writefds： 5.exceptfds： 6.timeout： 7.返回值： 四&#xff1…...

编程日记 2023/9/10 17:31:42

数据结构大作业成绩分析c语言程序设计

界面加载界面展示成绩输入求平均成绩升序排列降序排列名字排序按名字搜索按ID搜索每门课成绩分析成绩单展示 -...

编程日记 2023/9/10 17:30:41

Consul学习笔记之-初识Consul

文章目录 1. What is consul?2. Consul能干什么3. Consul的架构3.1 概念 4. Consul VS Eureka4.1 CAP4.2 对比 1. What is consul? 根据官方文档的定义： HashiCorp Consul is a service networking solution that enables teams to manage secure network connec…...

编程日记 2023/9/10 17:29:40

python实现读取并显示图片的两种方法

前言嗨喽，大家好呀~这里是爱看美女的茜茜呐在 python 中除了用 opencv，也可以用 matplotlib 和 PIL 这两个库操作图片。本人偏爱 matpoltlib，因为它的语法更像 matlab。 👇 👇 👇 更多精彩机密、教程&…...

编程日记 2023/9/10 17:28:39

Spring Boot 整合 MyBatis

🙈作者简介：练习时长两年半的Java up主 🙉个人主页：程序员老茶 🙊 ps:点赞👍是免费的，却可以让写博客的作者开兴好久好久😎 📚系列专栏：Java全栈，…...

编程日记 2023/9/10 17:27:38

2023高教社杯数学建模A题B题C题D题E题思路模型国赛建模思路分享

文章目录 0 赛题思路1 竞赛信息2 竞赛时间3 建模常见问题类型3.1 分类问题3.2 优化问题3.3 预测问题3.4 评价问题 4 建模资料 0 赛题思路 （赛题出来以后第一时间在CSDN分享） https://blog.csdn.net/dc_sinor?typeblog 1 竞赛信息全国大学生数学建模…...

编程日记 2023/9/10 17:26:37

手机木马远程控制复现

目录目录前言系列文章列表渗透测试基础之永恒之蓝漏洞复现http://t.csdn.cn/EsMu2 思维导图 1，实验涉及复现环境 2,Android模拟器环境配置 2.1,首先从官网上下载雷电模拟器 2.2,安装雷电模拟器 2.3, 对模拟器网络进行配置 2.3.1,为什么要进行配置…...

编程日记 2023/9/10 17:25:36

linux 安装Docker

# 1、yum 包更新到最新 yum update # 2、安装需要的软件包， yum-util 提供yum-config-manager功能，另外两个是devicemapper驱动依赖的 yum install -y yum-utils device-mapper-persistent-data lvm2 # 3、设置yum源 yum-config-manager --add-repo h…...

编程日记 2023/9/10 17:24:35

Java中的值传递与引用传递含面试题

面试题分享点我直达 2023最新面试合集链接 2023大厂面试题PDF 面试题PDF版本 java、python面试题项目实战:AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接玩转cloud Studio 在线编码神器玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间史上最全文档…...

编程日记 2023/9/10 17:23:32

SQL中CONVERT()函数用法详解

SQL中CONVERT函数格式: CONVERT(data_type,expression[,style]) 参数说明: expression 是任何有效的 Microsoft SQL Server™ 表达式。。 data_type 目标系统所提供的数据类型，包括 bigint 和 sql_variant。不能使用用户定义的数据类型。 length nchar、nva…...

编程日记 2023/9/10 17:22:31

借助各大模型的优点生成原创视频（真人人声）Plus

【技术背景】众所周知，组成视频的3大元素，即文本语音图片。接着小编逐一介绍生成原创视频的过程。【文本生成】天工AI搜索（thttp://iangong.cn） 直接手机短信验证就可以使用，该大模型已经接入互联网&#xff0c…...

编程日记 2023/9/10 17:21:30

技能大赛物联网赛项参赛软件建设方案

一、概述信息与通信技术的目标已经从任何时间、任何地点连接任何人，发展到连接任何物品的阶段，而万物的连接就形成了物联网。物联网的主要特征是通过条码识读设备、射频识别 (RFID）装置、红外感应器、全球定位系统、激光扫描器等信息传感设备…...

编程日记 2023/9/10 17:20:29

蓝桥杯官网练习题（凯撒加密）

题目描述给定一个单词，请使用凯撒密码将这个单词加密。凯撒密码是一种替换加密的技术，单词中的所有字母都在字母表上向后偏移 3 位后被替换成密文。即 a 变为 d，b 变为 e，⋯⋯，w 变为z，x 变为 a&#x…...

编程日记 2023/9/10 17:18:26

JavaScript 数组中常用的方法

添加 push：数组末尾添加unshift：数组首位添加splice(1, 0, ‘新增内容’)：再指定位置插入，第二参数为0，表示新增；大于0，表示修改删除 pop：删除末尾shift：删除首位slice(…...

编程日记 2023/9/10 17:17:23

YOLOV7改进-添加基于注意力机制的目标检测头(DYHEAD)

DYHEAD 复制到这： 1、models下新建文件 2、yolo.py中import一下 3、改IDetect这里 4、论文中说6的效果最好，但参数量不少，做一下工作量 5、在进入IDetect之前，会对RepConv做卷积 5、因为DYHEAD需要三个层输入的特征层一致&am…...

编程日记 2023/9/10 17:16:22

爬虫爬取mp3文件例子

相信训练模型时数据集的获取也是一个很头疼的事情，搞cv领域的可以扛着摄像头架起三脚架拍摄获取（以前干过），但是如果是nlp领域的呢，特别是chatgpt等大模型出来后对这类文本等数据的需求更大，如果没有现成的…...

编程日记 2023/9/10 17:15:21

说说什么是间隙锁

分析&回答间隙锁为了解决RR（可重复读）级别下当前读导致的幻读问题，锁的对象是索引叶子节点的next指针。快照读在RR隔离级别下：快照读有可能读到数据的历史版本，也有可能读到数据的当前版本。所以快照读无需用…...

编程日记 2023/9/10 17:14:20

python小题库（三）

大家好呀，今天继续更新python小题库。题11：实现学生成绩排序 # 问题：实现学生成绩排序 # 如学生的成绩是字典形式 students [{"sno": 101, "sname": "小张", "sgrade": 88},{"sno": 10…...

编程日记 2023/9/10 17:13:18

【前端设计模式】之单例模式

在前端开发中，单例模式是一种常见的设计模式，用于确保一个类只有一个实例，并提供全局访问点。在实现单例模式时，有一些最佳实践和高级技巧可以帮助我们编写更优雅和可维护的代码。 1. 使用闭包使用闭包是实现单例模式的一种常见…...

编程日记 2023/9/10 17:12:17

Linux——（第六章）常用指令（一）

目录一、帮助指令 1.man获取帮助信息 2.help指令 3.常用快捷键二、文件和目录相关指令 1.pwd 指令 2.ls 指令 3.cd 指令 4.mkdir 指令 5.rmdir指令 6.touch指令 7.cp 指令 8.rm 指令 9.mv 指令 10.cat 指令 11.more 指令 12.less 指令 13.echo 指令 14.he…...

编程日记 2023/9/10 17:11:16

第19章_瑞萨MCU零基础入门系列教程之RTC

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板进行编写，需要的同学可以在这里获取： https://item.taobao.com/item.htm?id728461040949 配套资料获取：https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总： ht…...

编程日记 2023/9/10 17:10:15

6、Spring之依赖注入源码解析（上）

依赖注入底层原理流程图： Spring中Bean的依赖注入原理| ProcessOn免费在线作图,在线流程图,在线思维导图 Spring中到底有几种依赖注入的方式？首先分两种：手动注入自动注入手动注入在XML中定义Bean时，就是手动注入，因为是程序员手动给某个属性指定了值。 <bean n…...

编程日记 2023/9/10 17:09:12

vscode各种配置的方法

一. vscode配置 vscode 是微软公司提供的一个代码编辑器。是做C/C常用的编辑器。在安装后，可以根据自己需要自行安装常用的配置插件。同时，也可以在设置栏设置自己需要的功能，以方便使用。下面学习 vscode的几种常见的设置。二. vsco…...

编程日记 2023/9/10 17:08:11

每天几道面试题（第一天）

目录第一幕、第一场）某大厦楼下大门前第二场）电梯中第三场）走廊中友情提醒背面试题很枯燥，加入一些戏剧场景故事人物来加深记忆。PS:点击文章目录可直接跳转到文章指定位置。第一幕、第一场）某大厦楼下大门前…...

编程日记 2023/9/10 17:07:10

政府网站设计要求/产品软文代写

(1)static static关键字：静态。注意：静态成员在类中，只有一份。非静态成员在对象中、有多少个对象、就有多少分成员。 (2)final final修饰变量：不能被更改。 final修饰方法：不能被覆盖。 final修饰类&#xff1a…...

编程日记 2024/11/28 15:18:47

阿里企业邮箱免费注册/珠海seo排名收费

PowerShell 异常处理参考文章： （1）PowerShell 异常处理 （2）https://www.cnblogs.com/sparkdev/p/8376747.html 备忘一下。...

编程日记 2024/11/28 15:16:46

长沙哪个公司做网站/百度投诉电话人工客服24小时

1、基础设施即服务 (IaaS) 基础设施即服务有时缩写为 IaaS，包含云 IT 的基本构建块，通常提供对联网功能、计算机（虚拟或专用硬件）以及数据存储空间的访问。基础设施即服务提供最高等级的灵活性和对 IT 资源的管理控制，…...

编程日记 2024/11/28 14:22:08

wordpress单独页面/东莞营销网站建设直播

前言继续ctf的旅程攻防世界Misc高手进阶区的3分题本篇是3-11的writeup 发现攻防世界的题目分数是动态的就仅以做题时的分数为准了解题过程下下来一个png图片扔进stegsolve 发现PK开头 zip文件 save bin 改后缀解压弹出已损坏用winrar自带的修复成功修复得到一…...

编程日记 2024/11/28 13:46:47

网站建设中的主要功能/三只松鼠有趣的软文

在.onInit里面添加如下代码： # 禁止多个安装程序实例 Begin System::Call kernel32::CreateMutexA(i 0, i 0, t "mysetup") i .r1 ?e #注意最后的?e Pop $R0 #保存LastError返回值 ;System::Call kernel32::CloseHandle(i r1) i.s #此处不能关闭…...

编程日记 2024/11/28 12:32:09

网站建设公司知名企业/网络营销服务商

bansangkou答疑小能手01-29TA获得超过8069个赞电脑开机慢怎么办，不改变电脑硬件的前提下，以下方法可以很好的提高电脑的性能： 方法一、杀毒。拨掉网络连线、关闭系统还原，在安全模式下，用最新版本的杀毒软件杀毒。方法…...

编程日记 2024/11/28 11:16:11

1. 基本语法格式

2. 引入方式

2.1 内部样式

2.2 内联样式

2.3 外部样式

3. 基础选择器

3.1 标签选择器

3.2 类选择器

3.3 ID选择器

4. 复合选择器

4.1 后代选择器

4.2 子选择器

4.3 并集选择器

4.4 伪类选择器

相关文章：