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

前端三剑客（二）：CSS

news 来源：原创 2025/7/27 16:56:00

1. CSS 基础

1.1 什么是 CSS

1.2 语法格式

1.3 引入方式

1.3.1 行内样式

1.3.2 内部样式

1.3.3 外部样式

1.4 CSS 编码规范

2. 选择器

2.1 标签选择器

2.2 id 选择器

2.3 class 选择器(类选择器)

2.4 复合选择器

2.5 通配符选择器

3. 常用 CSS 样式

3.1 color

3.2 font-size

3.5 height / width

3.4 border

3.5 边距

3.5.1 内边距 - padding

3.5.2 外边距 - margin

1. CSS 基础

1.1 什么是 CSS

CSS(Cascading Style Sheets), 层叠样式表, 是用来表示 HTML 的一种计算机语言.

CSS负责网页的视觉表现，它定义了网页元素的布局、颜色、字体、间距等样式属性。

通俗来说, CSS 就是对页面进行 "化妆".

简而言之，HTML定义了网页的结构，CSS负责网页的外观和布局，而JavaScript则负责让网页"动起来"(能够让网页动态变化)。三者共同工作，创造出功能丰富、用户友好的网页和网络应用。

1.2 语法格式

选择器 + {声明}

选择器决定修改谁
声明决定要修改的内容
声明的属性是键值对.(属性(键): 属性值(值))
多个键值对间使用 ; 进行分割

1.3 引入方式

1.3.1 行内样式

直接在标签中使用 style 属性, 引入 CSS 属性的键值对:

这种方式的缺点是代码冗余, 若想全部更改 div 标签中内容的颜色, 则需要一个一个的填写代码:

1.3.2 内部样式

定义 <style> 标签, 在标签中定义 CSS (指定选择器):

选择器中所有的内容, 都会被修改为声明中的内容.
style 标签通常定义在 head 标签中

需要注意的是, 使用内部样式引入 css 的同时, 若存在 div 标签在内部引入 css 的情况下(行内样式), 则采取就近原则的方式进行格式的修改:

1.3.3 外部样式

定义 <link> 标签，通过 href 属性引入外部 css 文件:

这张方式的优点是, 实现了 HTML 代码和 CSS 代码分离, 实现解耦, 代码的可维护性高.

1.4 CSS 编码规范

CSS 不区分大小写, 但统一规范使用小写字母.

空格规范:

冒号后面跟一个空格
选择器和 { 之间留一个空格

2. 选择器

CSS 中的选择器, 可以指定选中的页面中的元素, 并对这个元素中内容进行统一的修改(颜色, 字体, 边框....).

选择器主要有以下几种:

标签选择器
id 选择器
class 选择器(类选择器)
复合选择器
通配符选择器

2.1 标签选择器

所有被标签选择器选中的元素, 标签中内容的属性都会被统一修改为选择器中设置的属性.

但是, 若选择器选中的标签中, 嵌套了一个 a 标签, 那么设置的属性值将不会生效, 因为 a 标签中也对内容进行了默认的属性设置, 标签中的内容将采取就近原则的方式跟随 a 标签默认设置的属性(内容离 a 标签最近).

如果要修改, 需要额外使用选择器选择 a 标签来进行修改:

也就是说, 选择器需要选中离内容最近的标签, 才会对内容的样式修改成功.

   /* 标签选择器 */div {color: red;}span {color: blue;}a {color: red;}

2.2 id 选择器

id, 和我们之前所学的数据库中的 id 是相同的概念.

页面中, 每个元素的 id 都是唯一的, 我们可以通过 id 选择器, 选中页面中某一元素的 id , 对该元素的样式进行细致的设置.

在使用 id 选择器时, 使用 # 对 id 进行选择:

 /* id 选择器 */#div1 {color: red;}

2.3 class 选择器(类选择器)

每个元素可以设置唯一的 id 外, 还可以设置 class 值, 但是多个元素的 class 值可以是相同的.

具有相同 class 值的元素, 可以认为是同一组的, 使用 class 选择器则可以对这一组中所有的元素进行样式的设置.

使用 class 选择器时, 使用 . 对 class 进行选择:

        /* class 选择器 */.class1 {color: red;}

2.4 复合选择器

复合选择器由多个单选择器构成, 单选择器可以是任意选择器, 可以是标签选择器, id 选择器, class 选择器 .... (但是不能是通配符选择器)

复合选择器可以由具有嵌套关系的选择器构成(选择器间使用空格分割):
复合选择器也可以由不同种类的选择器构成, 但是不同的标签间要使用 , (逗号)分割, 如:

其中,

ol 标签(order list)为有序的列表标签
ul 标签(unordered list)为无序的列表标签
list 为列表标签

/* 复合选择器 */#div1, #div2 {color: purple;} ol li a{color: red;font-size: 20px;}

2.5 通配符选择器

* 代表通配符, 通配符选择器选中的是页面中所有的元素(所有元素, 包含所有的嵌套标签).

使用通配符选择器可以对页面中所有的元素进行统一的修改.

/* 通配符选择器 */* {color: yellow;}

3. 常用 CSS 样式

3.1 color

color, 就是设置字体的颜色. 我们可以在选择器中指定 color 的属性值, 来指定字体的颜色.

color 属性值的设置有以下几种方式:

英文单词
手动设置三原色(红绿蓝)的比例, 如: rgb(xxx, xxx, xxx) (取值0~255)
使用16进制设置三原色的比例:

3.2 font-size

font-size: 设置字体的大小

        /* 字体 */#div1 {font-size: 20px;}

3.5 height / width

我们知道, 像 div 这样的标签, 其实可以视为一个 "盒子". 而我们就可以对 "盒子" 来设置宽高.

需要注意的是: 只有块级标签才可以设置宽和高

height: 设置高

width: 设置宽

常见块级元素/块级标签: div , h1-h6 (带换行的)
常见行内元素/行内标签: span, a, img (不带换行的)

若对 span 这样的行内标签设置宽高是不起作用的:

但是, 我们也可以修改 display 的属性值将行内标签设置为块级标签:

行内标签 => 块级标签: display: block;

也可以修改 display 将块级标签设置为行内标签:

块级标签 => 行内标签: display: inline;

3.4 border

当我们设置好高和宽后, 我们可以对边框(border)进行设置(边框是一个复合属性):

设置边框类型(实线, 虚线, ...)
设置边框粗细
设置边框颜色(默认是透明的)

我们可以对边框四个方向上的属性分别进行设置(以颜色为例, 粗细和宽度都是可以的):

对方框四个方向的样式分别进行设置时, 还可以将四个方向上的值一次性写到一个 border 中:

(从 top(上) 开始, 顺时针方向填写属性值)

         /* 以下两种写法是相同的 */#div1 {height: 50px;width: 200px;border: solid;border-top-color: yellow;border-right-color: black;border-bottom-color: red;border-left-color: blue;}#div1 {height: 50px;width: 200px;border: solid;border-color: yellow black red blue;}

也可以对边框四个方向上的颜色, 粗细, 样式统一进行设置(四个方向上的边框都是相同的):

         /* 边框的四个方向都设置为: 粗细为: 1px, 颜色为: 红色, 样式为: 实线 *//* 以下两种写法是相同的 */#div1 {height: 50px;width: 200px;border-width: 1px;border-color: red;border-style: solid;}#div1 {height: 50px;width: 200px;border: 1px red solid;}

3.5 边距

边距分为以下两种:

padding: 内边距
margin: 外边距

内边距和外边距是两个相对的概念, 需要根据参照物来决定.

我们可以在选择器的声明中, 修改 padding / margin 的值来修改内外边距的距离.

如果以每个 div"盒子" 为参照物:

那么每个 div"盒子" 的边框(border)和内容之间的距离就是内边距.(内容和边框之间的距离)
每个 div"盒子" 和每个 div"盒子" 之间的距离就是外边距.(页面中, 元素和元素之间的距离)

3.5.1 内边距 - padding

padding: 内边距.

通过修改 padding 的值, 设置内容和边框之间的距离. (内容默认是顶着边框的)

padding 也是一个复合样式, 我们可以分别设置四个方向上的内边距:

padding-top (上)
padding-bottom (下)
padding-left (左)
padding-right (右)

当把四个方向的值一次性写到一个 padding 上时, 依旧是顺时针方向依次表示: 上右下左.

3.5.2 外边距 - margin

margin: 外边距

通过修改 margin 的值, 设置盒子和盒子(元素和元素)之间的距离. (内容默认是顶着边框的)

        #div1 {padding: 10px;margin: 30px;}

END

前端三剑客（二）：CSS

目录 1. CSS 基础 1.1 什么是 CSS 1.2 语法格式 1.3 引入方式 1.3.1 行内样式 1.3.2 内部样式 1.3.3 外部样式 1.4 CSS 编码规范 2. 选择器 2.1 标签选择器 2.2 id 选择器 2.3 class 选择器(类选择器) 2.4 复合选择器 2.5 通配符选择器 3. 常用 CSS 样式 3.1 c…...

编程日记 2025/7/27 16:56:00

解析html将表格插入word文档

用到依赖包 <dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.15.2</version></dependency><dependency><groupId>org.aspectj</groupId><artifactId>aspectjweav…...

编程日记 2025/7/27 16:53:26

Java核心知识详解：String类、StringBuffer、数组及日期时间的全面解析

🚀 作者 ：“码上有前” 🚀 文章简介 ：Java 🚀 欢迎小伙伴们点赞👍、收藏⭐、留言💬 标题 Java核心知识详解：String类、StringBuffer、数组及日期时间的全面解析摘要在Java中…...

编程日记 2025/7/27 6:25:53

唯一设备序列号（UID）、唯一产品识别码（UPI）和备份寄存器BKP

文章目录一、唯一设备序列号UID二、唯一产品识别码UPI三、备份寄存器BKP 一、唯一设备序列号UID MCU 系列产品内置两个不同长度的唯一设备序列号，分别为 96 位的 UID(Unique device ID)和 128 位的UCID(Unique Customer ID)，这两个设备序列号存放在闪存…...

编程日记 2025/7/26 23:16:52

Kafka - 消费者程序仅消费一半分区消息的问题

1. 问题描述修改安全服务状态有时逻辑正常有时候逻辑不正常，排查incident服务的日志发现消息可以正常发送到 kafka topic ，但是incident-cron 服务有时候有拉取消息的日志有时候没有日志。 kafka 生产者可以将消息正常发送到 kafka topic &#xff0c…...

编程日记 2025/7/25 19:53:27

养老院管理系统+小程序项目需求分析文档

智慧综合养老服务平台是以业务为牵引、场景为驱动，围绕“老人”业务域，持续沉淀和打磨形成适应不同养老业务发展需要的业务能力，推动业务模式升级，为养老服务提供数字化解决方案，并依托实体站点与养老机构实现线上线下…...

编程日记 2025/7/20 6:48:22

k8s 下有两个版本的nginx ingress 分别是 ingress nginx 以及 nginx ingress Ingress-nginx 与 Nginx-ingress - LeoZhanggg - 博客园这里我讨论的是 nginx ingress Nginx Ingress 使用Prometheus 导出数据 nginx ingress 本身支持通过支持这个提供prometheus 格式的…...

编程日记 2025/7/27 16:52:53

基于SpringBoot的京东绿谷旅游信息服务平台设计与实现（源码+定制+开发）

博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台…...

编程日记 2025/7/27 7:08:30

使用Redis生成全局唯一id

为了生成一个符合要求的分布式全局ID，我们可以使用 StringRedisTemplate 来实现。这个ID由三部分组成： 符号位（1 bit）：始终为0，表示正数。时间戳（31 bit）：表示从某个起始…...

编程日记 2025/7/27 16:47:15

pytorch自定义算子导出onnx

文章目录 1、为什么要自定义算子？2、如何自定义算子3、自定义算子导出onnx4、example1、重写一个pytorch 自定义算子（实现自定义激活函数）2、现有算子上封装pytorch 自定义算子（实现动态放大超分辨率模型） 1、为什么要…...

编程日记 2025/7/27 1:45:34

从搭建uni-app+vue3工程开始

技术栈 uni-app、vue3、typescript、vite、sass、uview-plus、pinia、axios 一、项目搭建 1、创建以 typescript 开发的工程 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project2、安装sass npm install -D sass// 安装sass-loader，注意需要版本10&…...

编程日记 2025/7/26 22:54:33

波点音乐自动点击

波点音乐 import uiautomator2 as u2 import time import sys import os# 动态点击时间，打印剩余时间 def dynamic_sleep(seconds):wait_time secondsfor i in range(wait_time):print(f"Waiting... {wait_time - i} seconds remaining")sys.stdout.flu…...

编程日记 2025/7/27 16:50:12

【一篇搞定配置】wget 下载与安装（Window）

🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀各种软件安装与配置_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光目录 1.…...

编程日记 2025/7/27 16:37:32

2025年春招修订版《C/C++笔面试系列》(1) C语言经典笔面试题(上)

C语言是嵌入式开发的常用语言，也是主要语言，很多企业在招聘嵌入式软件工程师时，C语言的熟练程度是一个重要考察点。笔试也是以C语言为主，所以想要拿到面试机会，还得通过C语言笔试，本专题总结了各大企业C语言…...

编程日记 2025/7/27 16:54:41

【042C】基于51RFID门禁系统（LCD12864显示）【Proteus仿真+Keil程序+报告+原理图】

☆、设计硬件组成：51单片机最小系统RFID读卡器4*4矩阵键盘AT24C02存储芯片LCD12864液晶显示继电器蜂鸣器LED灯。 1、设计采用STC89C52、AT89C52、AT89S52作为主控芯片，采用LCD12864液晶显示屏实时显示门禁系统； 2、系统集成两种解锁方式&am…...

编程日记 2025/7/27 16:51:03

scratch二次开发：blockly工作区垃圾桶和进度条的隐藏和显示

大家好，我是小黄。本期给大家介绍的内容是实现blockly工作区的垃圾桶和进度条的显示和隐藏实现。本次基于的项目源码大家可以关注小黄回复垃圾桶自行获取。一.垃圾桶的显示和实现。在blockly中，我们进行块的删除的时候最常用的两种方法是&#xf…...

编程日记 2025/7/24 15:24:49

【STM32】MPU6050初始化常用寄存器说明及示例代码

一、MPU6050常用配置寄存器 1、电源管理寄存器1（ PWR_MGMT_1 ） 此寄存器允许用户配置电源模式和时钟源。 DEVICE_RESET ：用于控制复位的比特位。设置为1时复位 MPU6050，内部寄存器恢复为默认值，复位结束…...

编程日记 2025/7/25 1:21:03

LDR6020驱动的Type-C接口显示器解决方案

一、引言随着科技的飞速发展，Type-C接口凭借其高速数据传输、强大的电力传输能力以及便捷的正反可插设计，正逐渐成为现代电子设备的主流接口标准。在显示器领域，Type-C接口的引入不仅简化了线缆连接，还为用户带来了更丰富的功能…...

编程日记 2025/7/25 23:36:36

Spring Boot + Android 实现登录功能

在移动互联网的今天，许多应用需要通过移动端实现与服务器的交互功能，其中登录是最常见且基础的一种功能。通过登录，用户可以获得独特的身份标识，从而访问特定的资源或服务。本篇博客将详细介绍如何使用 Spring Boot 和 Android 实…...

编程日记 2025/7/27 10:29:13

【通俗理解】边际化技巧在概率论中的应用——从公式到实例

【通俗理解】边际化技巧在概率论中的应用——从公式到实例关键词提炼 #边际化技巧 #概率论 #联合概率 #条件概率 #积分计算 #概率分布 #贝叶斯推断第一节：边际化技巧的类比与核心概念【尽可能通俗】边际化技巧，就像是你在一个复杂的概率迷宫中&am…...

编程日记 2025/7/27 16:49:37

Chen_AdaMV-MoE_Adaptive_Multi-Task_Vision_Mixture-of-Experts 译文

摘要稀疏激活的专家混合（MoE）正在成为多任务学习（MTL）的一个有前途的范例。 MoE 不是将多个任务的知识压缩到单个模型中，而是分离参数空间，仅利用给定任务类型及其输入的相关模型片段，从而提供…...

编程日记 2025/7/23 16:30:37

多线程下使用数据库 - 20241124

问题并发性较低，每秒千次但是较高一致性，比如利用数据库中的数据进行判断是否执行某个操作存在的问题是，如何只锁定判断相关的数据，而不影响数据库操作无关数据。脏读/不可重复读/幻读解决方案利用数据InnoDB引擎的LBCC和…...

编程日记 2025/7/27 16:54:41

GMAN解读（论文+代码）

一、注意力机制注意力机制与传统的卷积神经网络不同的是，前者擅长捕获全局依赖和长程关系，权重会动态调整。而后者对于所有特征都使用同一个卷积核。关于更多注意力机制内容，详见： 注意力机制、自注意力机制、多头注意力机制、通…...

编程日记 2025/7/27 16:52:53

《文件操作》

一 . 文本文件和二进制文件根据数据的组织形式，数据文件被分为了二进制文件和文本文件数据在内存中是以二进制的形式存储，如果不加转换的输出到外存的文件中，就是二进制文件。如果要求在外存上以ASCII 码的形式存储，则需要再存…...

编程日记 2025/7/27 16:51:40

【君正T31开发记录】8.了解rtsp协议及设计模式

前边搞定了驱动，先不着急直接上手撸应用层的代码，先了解一下大致要用到的东西。设计PC端先用vlc rtsp暂时H264编码（vlc好像不支持h265,这个后边我试试）的视频流，先需要支持上rtsp server，了解rtsp协议是必…...

编程日记 2025/7/23 6:02:17

C++菜鸟教程 - 从入门到精通第三节

上节课的题上节课的题,大家都做出来了吗? 看一下这道题: 题目描述 N!1*2*...*N; 例5!1*2*3*4*5120. 编程求1!2!3!...N!. 输入输入一行，只有一个整数n (1<n<10) 输出输出只有一行（这意味着末尾有一个回车符号），包括1…...

编程日记 2025/7/27 1:21:19

原生JS和CSS，HTML实现开屏弹窗

开屏弹窗常应用于打开游戏，或者打开网站的时候，跳出来在正中间，来显示一些信息，并可以设置今日不再显示 CSS代码如下 <style>#box {width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.2);position: relative…...

编程日记 2025/7/25 7:43:09

微软发布Win11 24H2系统11月可选更新KB5046740！

系统之家11月22日报道，微软针对Win11 24H2系统推出2024年11月最新可选更新补丁KB5046740，更新后系统版本后升至26100.2454，此次更新后修复当应用程序以PDF和XLSX格式导出图表对象时停止响应、无法使用API查找旋转信息等问题。以下小编将给大家…...

编程日记 2025/7/26 3:37:01

【Rabbitmq篇】高级特性----TTL，死信队列，延迟队列

目录一.TTL 1.设置消息的TTL 2.设置队列的TTL 3.俩者区别二.死信队列定义： 消息成为死信的原因： 1.消息被拒绝（basic.reject 或 basic.nack） 2.消息过期（TTL） 3.队列达到最大长度编辑 …...