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

【JavaEE进阶】CSS

news 2025/11/4 10:25:54

本节⽬标

掌握 CSS 基本语法规范和CSS选择器的各种⽤法, 熟练使⽤CSS的常⽤属性.

一.CSS介绍

1.什么是CSS?

CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式.

CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.

CSS 可以理解为"东⽅四⼤邪术" 之化妆术.

对⻚⾯的展⽰进⾏"化妆"

CSS前 -> CSS修饰后

2.基本语法规范

选择器 + {⼀条/N条声明}

选择器决定针对谁修改 (找谁)
声明决定修改啥. (⼲啥)
声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值.

<head><title>Document</title><style>div{color: brown;}</style>
</head>

注意:

CSS 要写到 style 标签中(后⾯还会介绍其他写法
style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内.
CSS 使⽤ /* */ 作为注释. (使⽤ ctrl + / 快速切换) .

3.引⼊⽅式

CSS有3种引⼊⽅式，语法如下表格所⽰：

3种引⼊⽅式对⽐:

内部样式会出现⼤量的代码冗余, 不⽅便后期的维护，所以不常⽤.
⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.
外部样式，html和css实现了完全的分离, 企业开发常⽤⽅式.

4.规范

样式⼤⼩写

虽然 CSS 不区分⼤⼩写, 我们开发时统⼀使⽤⼩写字⺟

空格规范

冒号后⾯带空格
选择器和 { 之间也有⼀个空格.

二.CSS选择器

CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性.

就好⽐ SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位⾏动.

CSS选择器主要分以下⼏种:

1. 标签选择器

2. class选择器

3. id选择器

4. 复合选择器

5. 通配符选择器

我们通过代码来学习CSS选择器的使⽤.

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>div {color:purple;}a {color: antiquewhite;}</style>
</head>
<body><div>我是一个div</div><div>我是一个div2</div><div><a href="#">我是一个div3</a></div>
</body>
</html>

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>/* 类选择器 */.cla1 {font-size: 40px;}</style>
</head>
<body><div id="div" class="cla1">我是一个div</div><div id="div2" class="cla1">我是一个div2</div><div id="div3" class="cla3"><a href="#">我是一个div3</a></div>
</body>
</html>

⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类(多个类名要使⽤空格分割, 这种做法可以让代码更好复⽤)
前面使用.标识

3. 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>/* id选择器 */#div {color: purple;}#div2 {color: red;}</style>
</head>
<body><div id="div" >我是一个div</div><div id="div2">我是一个div2</div><div id="div3"><a href="#">我是一个div3</a></div>
</body>
</html>

id 是唯⼀的, 不能被多个标签使⽤ (是和类选择器最⼤的区别)
使用#和标签名区分

4. 通配符选择器

<!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>/* 通配符选择器 */* {color: rebeccapurple;}</style>
</head>
<body><div id="div" class="cla1">我是一个div</div><div id="div2" class="cla1">我是一个div2</div><div id="div3" class="cla3"><a href="#">我是一个div3</a></div>
</body>
</html>

使用*标识

5. 复合选择器

（1）中间使用“，”为并集

#div,#div2 {color: antiquewhite;}

（2）具有父子关系的中间带空格，表示最关系最下面的更改

  ul li {color: aquamarine;}

1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选

择器的组合, 也可以是任意数量选择器的组合

2. 不⼀定是相邻的标签, 也可以是"孙⼦"标签

3. 如果需要选择多种标签, 可以使⽤ , 分割, 如 p, div { } 表⽰同时选中p标签和div标签.

逗号前后可以是以上任意选择器, 也可以是选择器的组合.

三、常⽤CSS

接下来学习⼀些常⻅的css样式

准备如下html

<div class="text1">我是⽂本1</div>

1.color

color: 设置字体颜⾊

div {color: #fff;color:aliceblue;color:rgb(0,255,255);}

颜⾊有如下⼏种表达⽅式:

英⽂单词,如red,blue
rgb代码的颜⾊如rgb(255,0,0)
⼗六进制的颜⾊如#ff00ff

2.font-size

font-size: 设置字体⼤⼩

   div {font-size: 200px;}

3. border

border: 边框

边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值⾃动判断

        div {width: 500px;height: 600px;border-width: 10px;border-style: dashed;border-color: aqua;}

以上border属性的对应设置的维度分别为边框粗细, 边框样式, 边框颜⾊.

也可以拆开来设置

样式	说明	取值
border-width	设置边框粗细	数值
border-style	设置边框样式	dotted : 点状 solid : 实线 double : 双线 dashed: 虚线
border-color	设置边框颜⾊	同 color

border: 1px solid purple; 
/*就等同于以下代码:*/
.text1 {
/* border: 1px purple solid; */
border-width: 1px;
border-style: solid;
border-color: purple;
}

4.width/height

width: 设置宽度
height: 设置⾼度

只有块级元素可以设置宽⾼

块级元素是HTML标签的⼀种显⽰模式, 对应的还有⾏内元素

常⻅块级元素: h1-h6, p, div 等,块级元素独占⼀⾏, 可以设置宽⾼
常⻅⾏内元素: a span,⾏内元素不独占⼀⾏, 不能设置宽⾼

改变显⽰模式

使⽤ display 属性可以修改元素的显⽰模式.

display: block 改成块级元素 [常⽤]
display: inline 改成⾏内元素 [很少⽤]

        #div4  {display: block;width: 40px;height: 100px;border-color: brown;border-width:10px;border-style: dotted;}

5.padding

padding: 内边距, 设置内容和边框之间的距离.

内容默认是顶着边框来放置的. ⽤ padding 来控制这个距离

padding也是⼀个复合样式, 可以对四个⽅向分开设置

padding-top
padding-bottom
padding-left
padding-right

6.margin

margin: 外边距, 设置元素和元素之间的距离.

margin也是⼀个复合样式, 可以给四个⽅向都加上外边距

margin-top
margin-bottom
margin-left
margin-right

【JavaEE进阶】CSS

本节⽬标掌握 CSS 基本语法规范和CSS选择器的各种⽤法, 熟练使⽤CSS的常⽤属性. 一.CSS介绍 1.什么是CSS? CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式. CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯…...

编程日记 2024/11/18 13:28:48

基于Java Springboot宠物领养救助平台

一、作品包含源码数据库设计文档万字PPT全套环境和工具资源部署教程二、项目技术前端技术：Html、Css、Js、Vue、Element-ui 数据库：MySQL 后端技术：Java、Spring Boot、MyBatis 三、运行环境开发工具：IDEA/eclipse 数据…...

编程日记 2024/11/18 13:20:39

C/C++ 中有哪些类型转换方式？分别有什么区别？

在C编写C/C代码的时候，我们经常会遇到发生类型转换的场景，比如赋值运算符的两个操作数不同、实参和形参类型不同、函数返回值类型和接收返回值的类型不同，都会发生类型转换；所以，在C语言中提供了两种类型转换 —— 隐…...

编程日记 2024/11/18 13:17:34

小程序租赁系统开发为企业提供高效便捷的租赁服务解决方案

内容概要在这个数字化飞速发展的时代，小程序租赁系统应运而生，成为企业管理租赁业务的一种新选择。随着移动互联网的普及，越来越多的企业开始关注如何利用小程序来提高租赁服务的效率和便捷性。小程序不仅可以为用户提供一个快速、易用的平…...

编程日记 2024/11/18 13:13:30

Scala的Array

数组：物理空间上连续的（一个挨一个） 优势：根据下标，能快速找到元素列表：物理空间上不连续（不是一个元素挨着一个元素） 优势：插入元素，删除比较快 object…...

编程日记 2024/11/18 13:12:28

等保测评怎么做？具体流程是什么？

等保测评是对信息系统进行等保（等级保护）安全评测的过程。等保是指对信息系统进行等级化保护管理，目的是提高信息系统的安全性，防止信息泄露、篡改、破坏等安全问题。哈尔滨等保测评按照《中华人民共和国网络安全法》及《信息安全…...

编程日记 2024/11/18 13:10:25

基于YOLOv8深度学习的汽车车身车损检测系统研究与实现(PyQt5界面+数据集+训练代码)

本文研究并实现了一种基于YOLOV8深度学习模型的汽车车身车损检测系统，旨在解决传统车损检测中效率低、精度不高的问题。该系统利用YOLOV8的目标检测能力，在单张图像上实现了车身损坏区域的精确识别和分类，尤其是在车身凹痕、车身裂纹和车身划…...

编程日记 2024/11/18 13:06:20

力扣 LeetCode 144. 二叉树的前序遍历（Day6：二叉树）

解题思路： 方法一：递归（中左右） class Solution {List<Integer> res new ArrayList<>();public List<Integer> preorderTraversal(TreeNode root) {recur(root);return res;}public void recur(TreeNode roo…...

编程日记 2024/11/18 13:05:19

Adobe Illustrator(Ai)修图软件入门操作参考，收集查过的各个细节用法

到现在，对于Ai的使用也是一半一半，基本上都是用到啥就查啥。因为用得也不是很频繁，脑子也记不住很多操作，所以有时候靠肌肉记忆，很多时候，得再百度一遍…… 所以我在这再备份一下，做个搬运工 …...

编程日记 2024/11/18 13:03:14

Apache Paimon、Apache Hudi、Apache Iceberg对比分析

Apache Paimon、Apache Hudi、Apache Iceberg 都是面向大数据湖的表格式存储管理框架。它们各自的架构、数据管理方式以及适用场景有所不同。下面是对三者的详细对比分析： 1. 基本简介 Apache Paimon： Paimon 是一个新兴的数据湖存储引擎，旨在支持流批一体的数据处理和管理…...

编程日记 2024/11/18 13:00:09

[ 网络安全介绍 5 ] 为什么要学习网络安全？

🍬 博主介绍 👨‍🎓 博主介绍：大家好，我是 _PowerShell ，很高兴认识大家~ ✨主攻领域：【渗透领域】【数据通信】【通讯安全】【web安全】【面试分析】 🎉点赞➕评论➕收藏养成习…...

编程日记 2024/11/18 12:59:09

生产环境centos8 Red Hat8部署ansible and 一键部署mysql两主两从ansible脚本预告

一、各节点服务器创建lvm逻辑卷组 1.初始化磁盘为物理卷（PV） 命令：sudo pvcreate /dev/vdb 2.创建卷组（VG） 命令：sudo vgcreate db_vg /dev/vdb 3.创建逻辑卷（LV） 命令：s…...

编程日记 2024/11/18 12:58:08

华为云stack网络服务流量走向

1.同VPC同子网同主机内ECS间互访流量走向一句话通过主机内部br-int通信 2.同VPC同子网跨主机ECS间互访流量走向 3.同VPC不同子网同主机ECS间互访流量走向查看ECS配置文件底层KVM技术查看日志查看ECS的ID号（管理员身份查询所有租户信息） 查看ECS的其…...

编程日记 2024/11/18 12:53:03

嵌入式硬件杂谈（二）-芯片输入接入0.1uf电容的本质（退耦电容）

引言：对于嵌入式硬件这个庞大的知识体系而言，太多离散的知识点很容易疏漏，因此对于这些容易忘记甚至不明白的知识点做成一个梳理，供大家参考以及学习，本文主要针对芯片输入接入0.1uf电容的本质的知识点的进行学习。目…...

编程日记 2024/11/18 12:51:01

计算机网络HTTP——针对实习面试

目录计算机网络HTTP什么是HTTP？HTTP和HTTPS有什么区别？分别说明HTTP/1.0、HTTP/2.0、HTTP/3.0请说明访问网页的全过程请说明HTTP常见的状态码Cookie和Session有什么区别？HTTP请求方式有哪些？请解释GET和POST的区别？HT…...

编程日记 2024/11/18 12:50:00

JAVA中对象实体与对象引用有何不同？举例说明

在 Java 中，对象实体（Object instance）和对象引用（Object reference）是两个不同的概念，虽然它们通常被一起讨论，但它们的作用和表现方式是不同的。下面我们来详细说明这两者的区别。 1. 对象实体…...

编程日记 2024/11/18 12:46:57

C++设计思想-001-设计模式-单例模式

1.单例模式优点保证一个类仅有一个实例，并提供一个访问它的全局访问点，该实例被所有程序模块共享；实现： 1.1 单例模式的类只提供私有的构造函数 1.2类定义中含有一个该类的静态私有对象 1.3该类提供了一个静态的公有的函数用于创建或获取它本身的静态私有对象 2.单…...

编程日记 2024/11/18 12:45:56

远程连接服务器

1、远程连接服务器简介 ssh secure shell 非对称加密：一对公钥私钥对称加密：加密和解密使用的是同一把密钥；(同一秘钥既可以进行加密也可以进行解密 )优势：使用一个秘钥它的加密效率高一些（快一些） …...

编程日记 2024/11/18 12:40:51

【分布式技术】ES扩展知识-Elasticsearch分词器的知识与选择

ES知识扩展分词器有哪些？1. 标准分词器（Standard Analyzer）：示例示例文本分析配置参数与自定义应用场景 2. Simple Analyzer：示例示例文本分析应用场景与限制结论 3. Whitespace Analyzer：示例示例文本分析…...

编程日记 2024/11/18 12:37:48

【网络安全 | 漏洞挖掘】通过密码重置污染实现账户接管

未经许可，不得转载。文章目录密码重置污染攻击漏洞挖掘的过程目标选择与初步测试绕过 Cloudflare 的尝试发现两个域名利用 Origin 头部污染实现账户接管攻击流程总结在今天的文章中，我们将深入探讨一种账户接管漏洞，并详细分析如何绕过 Cloudflare 的保护机制，利用密码…...

编程日记 2024/11/18 12:35:44

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...

编程新知 2025/11/2 21:06:50

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制一、引言二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...

编程新知 2025/9/19 8:02:57

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...

编程新知 2025/6/11 15:25:30

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具，该工具可以帮助你你管理设备或模拟器的状态。 adb ( Android Debug Bridge)是一个通用命令行工具，其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利，如安装和调试…...

编程新知 2025/11/2 22:52:17

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

【生成模型】视频生成论文调研

工作清单上游应用方向：控制、速度、时长、高动态、多主体驱动类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47