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

【JavaEE进阶】CSS

news 文章来源：https://blog.csdn.net/2401_83227065/article/details/143629564 2025/4/27 20:21:16
本节⽬标
  • 掌握 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

【Nginx从入门到精通】01 、教程简介

讲师&#xff1a;张一鸣老师 课程简介 重量级课程 由浅入深&#xff0c;内容非常广泛 几十个线上的实战案例(图谱)&#xff0c;几乎涵盖当前所有互联网主流应用场景 性能&#xff1a;由压测得出结果 调优&#xff1a;从操作系统开始&#xff0c;使你对高并发系统架构的技…...

编程日记 2024/11/18 12:33:42

MySQL面试之底层架构与库表设计

华子目录 mysql的底层架构客户端连接服务端连接的本质&#xff0c;连接用完会立马丢弃吗解析器和优化器的作用sql执行前会发生什么客户端的连接池和服务端的连接池数据库的三范式 mysql的底层架构 客户端连接服务端 连接的本质&#xff0c;连接用完会立马丢弃吗 解析器和优化器…...

编程日记 2024/11/18 12:32:41

C2 追踪器：监控指挥与控制的重要性

12 款暗网监控工具 20 款免费网络安全工具 移动取证软件&#xff1a;为什么 Belkasoft X 应该是您的首选工具 网络安全已成为不断演变的威胁形势中的关键领域。 网络攻击者经常使用命令和控制 (C2) 基础设施来执行和管理攻击。 这些基础设施使恶意软件和攻击者能够与受害设…...

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

二、神经网络基础与搭建

神经网络基础 前言一、神经网络1.1 基本概念1.2 工作原理 二、激活函数2.1 sigmoid激活函数2.1.1 公式2.1.2 注意事项 2.2 tanh激活函数2.2.1 公式2.2.2 注意事项 2.3 ReLU激活函数2.3.1 公式2.3.2 注意事项 2.4 SoftMax激活函数2.4.1 公式2.4.2 Softmax的性质2.4.3 Softmax的应…...

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

java导出pdf

引入包 <properties><itext.version>8.0.5</itext.version></properties><dependencies><dependency><groupId>com.itextpdf</groupId><artifactId>itext-core</artifactId><version>${itext.version}</…...

编程日记 2024/11/18 12:25:33

muduo之线程同步CountDownLatch

简介 CountDownLatch称为门阀&#xff0c;用于等待另外线程执行完成 结构 #mermaid-svg-6Azuu15vhIS2hCP1 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-6Azuu15vhIS2hCP1 .error-icon{fill:#552222;}#mermaid-s…...

编程日记 2024/11/18 12:24:32

【Python系列】Python中打印详细堆栈信息的技巧

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

编程日记 2024/11/18 12:21:23

SpringBoot中监听器、过滤器、拦截器和AOP详解

SpringBoot中监听器、过滤器、拦截器和AOP详解 在构建 Spring Boot 应用程序时&#xff0c;监听器&#xff08;Listener&#xff09;、过滤器&#xff08;Filter&#xff09;、拦截器&#xff08;Interceptor&#xff09;和面向切面编程&#xff08;AOP&#xff09;是四种常用…...

编程日记 2024/11/18 12:20:19

如何让手机ip变成动态

在数字化浪潮中&#xff0c;手机已成为我们日常生活中不可或缺的一部分。无论是浏览网页、使用社交媒体还是进行在线购物&#xff0c;手机都扮演着举足轻重的角色。然而&#xff0c;在享受网络带来的便利时&#xff0c;我们也需要关注网络安全和隐私保护。静态IP地址可能让手机…...

编程日记 2024/11/18 12:19:17

[Qt platform plugin问题] Could not load the Qt platform plugin “xcb“

Qt platform plugin 是 Qt 应用程序启动时加载的插件。不同的平台有不同的插件。 常见的插件有:linuxfb Wayland xcb 简单来说就是启动一个GUI程序, 离不开这些插件.选择其中一个就好 出现这个问题要么就是没有插件&#xff0c;要么就是插件依赖的库没有。 要么就是插件选则的…...

编程日记 2024/11/18 12:18:16