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

Java—HTML：CSS选择器

news 来源：原创 2025/6/20 10:56:31

     今天我要介绍的知识点内容是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内容知识点能给你带来一定的帮助，同时非常感谢各位大佬的点赞与支持，我们下一篇不见不散

相关文章：

  • YOLO目标检测应用——基于 YOLOv8目标检测和 SAM 零样本分割实现指定目标分割
  • 网络故障排查实战指南：从准备到定位的全流程拆解
  • vue2使用vue-echarts
  • Mysql个人笔记
  • 数据可视化 —— 折线图应用（大全）
  • [ctfshow web入门] web35
  • 【多线程-第四天-自己模拟SDWebImage的下载图片功能-缓存管理 Objective-C语言】
  • 2025最新系统 Git 教程（五）
  • 【Python算法】基础语法、算法技巧模板、二分、DFS与BFS
  • selenium快速入门
  • 如何实现H5端对接钉钉登录并优雅扩展其他平台
  • 《计算机视觉度量：从特征描述到深度学习》—深度学习工业检测方案评估
  • 人工智能在医疗信息化设备上为医疗行业带来了诸多变革
  • vscode 连不上 Ubuntu 18 server 的解决方案
  • MySQL：日志
  • TDEngine 配置
  • Spring AI应用：利用DeepSeek+嵌入模型+Milvus向量数据库实现检索增强生成--RAG应用（超详细）
  • 根据 PID 找到对应的 Docker 容器
  • 【专题】图论
  • Docker 容器内运行程序的性能开销
  • 国内做网站的龙头企业/百度关键词优化公司
  • 有那些可以自己做壁纸的网站/google引擎免费入口
  • 网站图片滚动咋么做/seo关键词排名优化销售
  • 大尺度做爰床视频网站/网络营销策划书的结构是什么
  • 做期货与做网站的关系/武汉 网络 推广
  • 网页设计网站模板素材/互联网推广方案