Java—HTML：CSS选择器

     今天我要介绍的知识点内容是Java  HTML中的CSS选择器；

     CSS选择器用于定位HTML元素并为其添加样式。它允许我们控制网页的颜色、字体、布局和其他视觉元素。通过分离内容与样式。

下面我将介绍CSS中选择器的使用，并作举例说明；

选择器基本语法：

selector {property: value;
}
  1. Selector（选择器）： 指定要应用样式的HTML元素。
  2. Property（属性）： 定义样式的方面，如颜色、字体大小等。
  3. Value（值）： 属性的具体设定值。

例：

p { color: blue; }

注解：这条规则会将所有设置<p>标签内的文本颜色设置为蓝色

  1. 字体样式属性:

在网页设计中，字体的选择和样式对于用户体验至关重要。

font-family；

定义与用法：

font-family:指定一个或多个备用字体系列，或者是通用字体系列名称。

注意：当浏览器无法使用第一个字体时，它会尝试下一个字体，直到找到可用的字体。

语法：

font-family: "字体名称", fallback, ...;

  • 场景模拟1：

例：

   h1{color:darkgreen}p{/* 字体颜色 */color:blue;/* 字体风格 *//* font-family:'Courier New',Courier, monospae;}

生效代码块：

</head><body><h1>lover all</h1><p>forever</p><p>forever</p><p>forever</p><p>forever</p><p>forever</p></body>
</html>

最终呈现：（CSS样式（颜色变化））

对比：

这是没有加入样式的效果：

这是加入样式后的效果：

font-size；

定义与用法：

font-size属性设置字体大小。

可以使用绝对单位（如像素px）、相对单位（如百分比%、em、rem），也可以使用关键字（如small, medium, large等）。

语法：

font-size: size;

例：

<style>h1{color: darkgreen;}p{color: blue;font-family: 'Courier New', Courier, monospace;font-size:20px;字体大小（如像素px）、相对单位（如百分比%、em、rem），也可以使用关键字（如small, medium, large等）}</style>

见效果如下：

注：可以看到字体变化的明显，数值越大字越大，反过来也是。

font-weight

定义与用法：

font-weight属性设置字体粗细。

可以使用数字（从100到900，400等于正常，700等于加粗）或者关键字（如normal、bold）。

语法：

font-weight: weight;

例：

​h1{color: darkgreen;}p{color: blue;font-family: 'Courier New', Courier, monospace;font-size:20px;font-weight: 600;//字体粗细，从100到900，400等于正常，400以下则比正常还要细小，700等于加粗}​​

见效果如下：

font-style

定义与用法：

font-style属性设置字体风格，通常用于斜体化文本。

可能的值包括normal（默认）、italic（斜体）和oblique（倾斜）。

语法：

font-style: style;

例：

​h1{color: darkgreen;}p{color: blue;font-family: 'Courier New', Courier, monospace;font-size:20px;font-weight: 600;font-style: italic;}​

见效果如下：

line-height

定义与用法：

line-height属性设置行高，即行与行之间的距离。可以通过数值、百分比或长度单位来指定。

语法：

line-height: height;

例：

            h1{color: darkgreen;}p{color: blue;font-family: 'Courier New', Courier, monospace;font-size:20px;font-weight: 600;font-style: italic;line-height: 40px;}

见效果如下：

只需要设置20单位值即可；  ==》line-height:20px;

内联样式

直接在HTML标签内使用style属性定义样式。适用于需要特别处理的个别元素。

例：

<p style="color:green;">这段文字是绿色的。</p>

内部样式表

在HTML文档的<head>部分使用<style>标签定义样式。适用于整个页面的一般样式。

例：

<head><style>p { color: red; }</style>

外部样式表

创建独立的.css文件，在指定页面中通过<link>标签链引入外部样式表。适用于多个页面共享的样式。

<link rel="stylesheet" type="text/css" href="styles.css">

注：内联样式的优先级高于内部和外部样式表

基本选择器：

标签选择器

定义与用法：

标签选择器是最基础的选择器，用于针对特定HTML标签的所有实例应用样式。当你想要统一改变某类元素的外观时使用它。

特点：

  1. 简单直接，作用于所有同类标签。
  2. 不推荐用于特定化样式，因为它影响范围太广。

使用场景：

  • 统一设置所有段落、标题或链接的样式。

例：

<!DOCTYPE html>
<html>
<head><style>p { color: blue; } /* 设置所有<p>标签内的文本颜色为蓝色 */</style>
</head>
<body><p>这段文字是蓝色的。</p>
<p>这段文字也是蓝色的。</p></body>
</html>

见效果如下：

 注：标签选择器：针对同一类的标签，应用同一种样式

类选择器

定义与用法：

以.开头，后跟类名。它可以应用于任意数量的HTML元素，提供了一种复用样式的方法。

特点：

  1. 可重复使用，灵活度高。
  2. 可以与其他选择器组合使用，增强选择能力。

使用场景：

  1. 当你需要对多个不同类型的元素应用相同的样式时。
  2. 对特定区域或组件进行样式定制。

例：

  1. <!DOCTYPE html>
<html>
<head><style>.highlight { background-color: yellow; } /* 设置所有具有.highlight类的元素背景色为黄色 */</style>
</head>
<body><p class="highlight">这段文字有黄色背景。</p>
<div class="highlight">这个div也有黄色背景。</div></body>
</html>

见效果如下：

 注：类选择器：以.开头，后面跟着类名，在标签中使用class属性来使用

ID选择器

定义与用法：

以#开头，后跟ID名称。它只能应用于单个HTML元素，因为ID在同一页面上应该是唯一的。

特点：

  1. 高优先级，通常用于非常具体的情况。

  2. 适合页面上的独特元素。

使用场景：

  • 对页面上的唯一元素进行样式定制。

例：

<!DOCTYPE html>
<html>
<head><style>#mainTitle { color: red; } /* 设置id为mainTitle的元素文本颜色为红色 */</style>
</head>
<body><h1 id="mainTitle">这是主标题</h1>
<p>这是一个普通的段落。</p></body>
</html>

见效果如下：

 注：ID选择器：以#开头，后跟ID名称，在标签中使用id属性来使用

高级选择器

后代选择

定义与用法：

使用空格分隔两个选择器，选择第一个选择器内部的所有后代元素。

特点：

  • 作用范围较广，可以选择所有层次结构中的后代元素。

使用场景：

  • 对嵌套结构中的元素应用样式。

例：

<!DOCTYPE html>
<html>
<head><style>div p { color: orange; } /* 设置所有位于<div>内的<p>元素文本颜色为橙色 */</style>
</head>
<body><div><p>这段文字是橙色的。</p><span><p>这段文字也是橙色的。</p></span>
</div></body>
</html>

见效果如下：

子代选择器

定义与用法：

使用>符号，选择直接子元素。

特点：

  • 作用范围限于直接子元素，不包括更深的后代元素。

使用场景：

  • 对直接子元素进行精确控制。

例:

<!DOCTYPE html>
<html>
<head><style>ul > p { color: orange; } /* 设置所有作为<ul>直接子元素的<p>元素字体为橙色 */</style>
</head>
<body>
<ul><p>这个列表项是斜体。</p><li>这个列表项是斜体。</li><li><p>这个段落不是斜体。</p></li>
</ul>
</body>
</html>

见效果如下：

相邻兄弟选择器

定义与用法：

使用+符号，选择紧随其前一个元素之后的同级元素。

特点：

  • 只选择紧跟在前一个元素后的下一个兄弟元素。

使用场景：

  • 对连续出现的同级元素进行样式调整。

例：

<!DOCTYPE html>
<html>
<head><style>h1 + p { color: green; } /* 设置紧跟在<h1>后的第一个<p>元素文本颜色为绿色 */</style>
</head>
<body><h1>这是一个标题</h1>
<p>这段文字是绿色的。</p>
<p>这段文字不是绿色的。</p></body>
</html>

见效果如下：

 注：相邻兄弟选择器：使用+符号，选择紧随其前一个元素之后的同级元素

通用兄弟选择器

定义与用法：

使用~符号，选择所有位于前一个元素之后的同级元素。

特点：

  • 选择所有后续兄弟元素，不限于紧接的下一个。

使用场景：

  • 对一组同级元素进行样式调整。

例：

<!DOCTYPE html>
<html>
<head><style>h1 ~ p { color: purple; } /* 设置所有位于<h1>之后的<p>元素文本颜色为紫色 */</style>
</head>
<body><h1>这是一个标题</h1>
<p>这段文字是紫色的。</p>
<p>这段文字也是紫色的。</p></body>
</html>

见效果如下：

 注：通用兄弟选择器：使用~符号，选择所有位于前一个元素之后的同级元素

属性选择器（Attribute Selectors）

定义与用法：

根据元素的属性或属性值来选择元素。

a[target]会选择所有具有target属性的<a>元素，input[type="text"]会选择所有类型为text的<input>元素。

特点：

  • 提供了对特定属性的精准选择。

使用场景：

  • 对带有特定属性的元素进行样式调整

例：

<!DOCTYPE html>
<html>
<head><style>a[target="_blank"] { color: purple; } /* 设置所有target属性为"_blank"的<a>元素文本颜色为紫色 */</style>
</head>
<body><a href="http://example.com" target="_blank">超链接颜色设置。</a>
<a href="http://example.com">未曾设置超链接颜色。</a></body>
</html>

 见效果如下：

 注：属性选择器：根据元素的属性或属性值来选择元素。

 总结：

      希望以上有关于JavaHTML 的CSS内容知识点能给你带来一定的帮助，同时非常感谢各位大佬的点赞与支持，我们下一篇不见不散

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

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

相关文章

【2025蓝桥杯】赛前2小时考点梳理C++版

【2025蓝桥杯】赛前2小时考点梳理C++版

【2025蓝桥杯】赛前2小时考点梳理 1. &#x1f9e9; STL&#xff08;优先级最高&#xff09; 核心容器/函数 vector push_back() / pop_back() / size()string substr(pos, len) / find(str) / queue push() / front() / pop()priority_queue 默认大根堆&#xff0c;小根堆&…
阅读更多...
汽车性能的幕后保障：慧通测控电动尾翼综合力学测试浅析

汽车性能的幕后保障：慧通测控电动尾翼综合力学测试浅析

在汽车性能不断追求极致的当下&#xff0c;电动尾翼已成为众多高性能车型以及部分新能源汽车提升空气动力学表现与操控稳定性的关键配置。从炫酷的超跑到注重续航与驾驶体验的新能源车&#xff0c;电动尾翼正逐渐崭露头角。它绝非仅仅是外观上的装饰&#xff0c;而是能在车辆行…
阅读更多...
2、文件上传漏洞的防范

2、文件上传漏洞的防范

原文地址:文件上传漏洞的防范 更多内容请关注&#xff1a;代码安全 PHP安全编码——书写安全的代码 文件上传漏洞的防范 提问 问题1&#xff1a;上传漏洞是怎么产生的&#xff1f; 问题2&#xff1a;是否可以只用js判断文件类型而php不判断&#xff1f; 问题3&#…
阅读更多...
06软件测试需求分析案例-添加用户

06软件测试需求分析案例-添加用户

给职业顾问部的老师添加用户密码后&#xff0c;他们才能登录使用该软件。只有admin账户具有添加用户、修改用户信息、删除用户的权利。admin是经理或团队的第一个人的账号&#xff0c;后面招一个教师就添加一个账号。 通读需求是提取信息&#xff0c;提出问题&#xff0c;输出…
阅读更多...
Ex-Human：在DigitalOcean云平台之上，构建下一代 AI 数字人

Ex-Human：在DigitalOcean云平台之上，构建下一代 AI 数字人

Ex-Human 正在通过创造极具吸引力和富有同理心的人工智能角色&#xff0c;重新定义人们与人工智能的互动方式。该公司由 Artem Rodichev 创立&#xff0c;让用户能够通过文本、图像、视频和音频创建能互动的独一无二的数字人物。凭借每月超过一百万的活跃用户和五百万个定制创建…
阅读更多...
从零实现HTTP服务器

从零实现HTTP服务器

响应&#xff1a; 第一部分测试代码&#xff0c;读取请求 Makefile binhttpserver #生成的可执行程序 ccg #编译器名称 LD_FLAGS-stdc11 -lpthread #-DDEBUG1 #链接选项 srcmain.cc$(bin):$(src)$(cc) -o $ $^ $(LD_FLAGS).PHONY:clean clean:rm -f $(bin) 1111111 main.cc…
阅读更多...
构建高可靠C++服务框架：从日志系统到任务调度器的完整实现

构建高可靠C++服务框架：从日志系统到任务调度器的完整实现

构建高可靠C服务框架&#xff1a;从日志系统到任务调度器的完整实现 一、深度解析示例代码技术体系 1.1 日志系统的进阶应用 示例代码中的ZRY_LOG_XXX宏展示了基础日志功能&#xff0c;但在生产环境中我们需要更完善的日志系统&#xff1a; 推荐技术栈组合&#xff1a; sp…
阅读更多...
小张的工厂进化史——工厂模式

小张的工厂进化史——工厂模式

小张的工厂进化史——工厂模式 一、简单工厂模式&#xff1a;全能生产线二、工厂方法模式&#xff1a;分品牌代工三、抽象工厂模式&#xff1a;生态产品族四、三种模式核心对比表五、结合Spring实现简单工厂&#xff08;实践&#xff09; 小张从华强北起家&#xff0c;最初只有…
阅读更多...
Python中的eval()函数详解

Python中的eval()函数详解

文章目录 Python中的eval()函数详解基本语法基本用法安全性问题安全使用建议实际应用场景与exec()的区别性能考虑总结 Python中的eval()函数详解 eval()是Python的一个内置函数&#xff0c;用于执行字符串形式的Python表达式并返回结果。它是一个强大但需要谨慎使用的函数。 …
阅读更多...
银行业务发展历史

银行业务发展历史

银行业务发展历史 银行业务的发展可以追溯到古代&#xff0c;但其现代形式的发展可以追溯到中世纪。以下是银行业务发展的主要历史阶段&#xff1a; 1. 古代和中世纪时期 特点&#xff1a;商人提供贷款和存款服务&#xff0c;充当中间人转移资金&#xff0c;发行纸币作为支付…
阅读更多...
SQL实战篇，数据库在Kooboo中的实际应用（一）

SQL实战篇，数据库在Kooboo中的实际应用（一）

本文将结合实际操作与代码示例&#xff0c;展示SQL 在 Kooboo 中的实际应用 仅需两步&#xff1a;动态创建表 基础查询&#xff0c;无需复杂配置&#xff0c;快速上手&#xff01; 一、动态创建表&#xff1a;插入数据 Kooboo 支持多种数据库&#xff0c;以 SQLite 为例&…
阅读更多...
克魔助手(Kemob)安装与注册完整教程 - Windows/macOS双平台指南

克魔助手(Kemob)安装与注册完整教程 - Windows/macOS双平台指南

iOS设备管理工具克魔助手便携版使用全指南 前言&#xff1a;为什么需要专业的iOS管理工具 在iOS开发和设备管理过程中&#xff0c;开发者经常需要突破系统限制&#xff0c;实现更深层次的控制和调试。本文将详细介绍一款实用的便携式工具的使用方法&#xff0c;帮助开发者快速…
阅读更多...
搜索插入位置 -- 二分查找

搜索插入位置 -- 二分查找

目录 一&#xff1a;题目 二:算法原理 三&#xff1a;代码分析 一&#xff1a;题目 题目链接&#xff1a;35. 搜索插入位置 - 力扣&#xff08;LeetCode&#xff09; 二:算法原理 三&#xff1a;代码分析 class Solution { public:int searchInsert(vector<int>&am…
阅读更多...
Apache Doris内存与超时参数配置详解

Apache Doris内存与超时参数配置详解

一、查询任务内存限制调整 1. ​默认内存限制与问题定位 Apache Doris默认限制单个BE节点上的查询任务内存使用不超过2GB&#xff08;即exec_mem_limit2147483648字节&#xff09;。当复杂查询或大规模数据操作超过此限制时&#xff0c;会触发Memory limit exceeded错误。通过…
阅读更多...
龙虎榜——20250411

龙虎榜——20250411

今天缩量&#xff0c;上方压力依然在&#xff0c;外围还在升级&#xff0c;企稳还需要时日。 2025年4月11日龙虎榜行业方向分析 一、核心主线方向 半导体与芯片&#xff08;国产替代加速&#xff09; • 代表标的&#xff1a;圣邦股份&#xff08;模拟芯片&#xff09;、中电…
阅读更多...
若依前后端分离版本从mysql切换到postgresql数据库

若依前后端分离版本从mysql切换到postgresql数据库

一、修改依赖&#xff1a; 修改admin模块pom.xml中的依赖,屏蔽或删除mysql依赖&#xff0c;增加postgresql依赖。 <!-- Mysql驱动包 --> <!--<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId> &l…
阅读更多...
自定义排序注意点

自定义排序注意点

这段 Java 代码展示了两种排序方式的用法&#xff0c;分别是&#xff1a; 对普通数组进行排序&#xff08;Integer[] nums&#xff09;对对象数组进行排序&#xff08;Student[] students&#xff09; 我来一步步给你讲清楚&#xff1a; ✅ 第1部分&#xff1a;普通数组降序排…
阅读更多...
第十四届蓝桥杯大赛软件赛省赛C/C++ 大学 A 组真题

第十四届蓝桥杯大赛软件赛省赛C/C++ 大学 A 组真题

文章目录 1 幸运数题目描述&#xff1a;答案&#xff1a;4430091 代码&#xff1a; 2 有奖问答题目描述&#xff1a;重点&#xff1a;答案&#xff1a;8335366 代码&#xff1a; 3 平方差题目描述&#xff1a;思路&#xff1a;数学找规律代码&#xff1a; 4 更小的数题目描述&a…
阅读更多...
C++ 入门四：类与对象 —— 面向对象编程的核心基石

C++ 入门四：类与对象 —— 面向对象编程的核心基石

一、类的定义 1. 类的基本形式 class 类名 { public: // 公有成员&#xff08;类内外均可访问&#xff09;数据类型 数据成员; // 公有数据成员数据类型 成员函数(参数列表); // 公有成员函数声明 protected: // 保护成员&#xff08;类内和派生类可访问&…
阅读更多...
嵌入式---电机分类

嵌入式---电机分类

一、按电流类型分类&#xff08;最基础分类&#xff09; 1. 直流电机&#xff08;DC Motor&#xff09; 工作原理&#xff1a;通过换向器&#xff08;有刷&#xff09;或电子换向&#xff08;无刷&#xff09;将直流电源转换为交变磁场&#xff0c;驱动转子旋转。 核心特点&a…
阅读更多...
最新文章

Copyright @ 2022~2023