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

【JavaEE进阶】CSS

news 2026/2/7 12:11:59
本节⽬标
  • 掌握 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种引⼊⽅式对⽐:
  1.  内部样式会出现⼤量的代码冗余, 不⽅便后期的维护，所以不常⽤. 
  2. ⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.
  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)&#xff0c;层叠样式表, ⽤于控制⻚⾯的样式. CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯…...

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

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

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

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

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

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

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

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

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

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

Scala的Array

数组&#xff1a;物理空间上连续的&#xff08;一个挨一个&#xff09; 优势&#xff1a;根据下标&#xff0c;能快速找到元素 列表&#xff1a;物理空间上不连续&#xff08;不是一个元素挨着一个元素&#xff09; 优势&#xff1a;插入元素&#xff0c;删除比较快 object…...

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

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

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

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

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

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

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

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

解题思路&#xff1a; 方法一&#xff1a;递归&#xff08;中左右&#xff09; 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)修图软件入门操作参考，收集查过的各个细节用法

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

编程日记 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 ] 为什么要学习网络安全？

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在 Java 中&#xff0c;对象实体&#xff08;Object instance&#xff09;和对象引用&#xff08;Object reference&#xff09;是两个不同的概念&#xff0c;虽然它们通常被一起讨论&#xff0c;但它们的作用和表现方式是不同的。下面我们来详细说明这两者的区别。 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 非对称加密&#xff1a;一对公钥私钥 对称加密&#xff1a;加密和解密使用的是同一把密钥&#xff1b;(同一秘钥既可以进行加密也可以进行解密 )优势&#xff1a;使用一个秘钥它的加密效率高一些&#xff08;快一些&#xff09; …...

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

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

ES知识扩展 分词器有哪些&#xff1f;1. 标准分词器&#xff08;Standard Analyzer&#xff09;&#xff1a;示例示例文本分析配置参数与自定义应用场景 2. Simple Analyzer&#xff1a;示例示例文本分析应用场景与限制结论 3. Whitespace Analyzer&#xff1a;示例示例文本分析…...

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

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

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

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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2026/2/1 6:50:07

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2026/1/23 11:58:06

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2026/1/26 9:30:45

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2026/1/25 6:16:49

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2026/2/1 14:51:21