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

前端入门之CSS

article 2026/2/2 9:26:43

CSS:

HTML负责定义页面结构；JS负责处理页面逻辑和点击事件；CSS负责用于描述 HTML 元素的显示方式，通过 CSS 可以控制颜色、字体、布局等。

核心语法：

选择器：

类选择器主要用于选中需要添加样式的 HTML 元素。主要分为：类选择器（.class-name { ... }）、标签选择器（p { ... }）和ID选择器（#id-name { ... }）。

类选择器：1.类选择器是最常用的，不易造成污染；2.不同元素选择器可以共享同一个类选择器；3.同一个元素上分配多个类选择器，使用空格隔开。

层级关系：.parent { .child { color: blue; }}写法；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./test.css">
</head>
<body><!-- 元素选择器、类选择器和ID选择器 --><h4>元素选择器</h4><p class="classSelector">类选择器</p><!-- id选择器只能出现一次，可能会导致DOM解析失败 --><p id="idSelector">ID选择器</p><!-- 1.类选择器是最常用的，不易造成污染；2.不同元素选择器可以共享同一个类选择器 --><p class="purple">紫色类选择器</p><p class="orange">橙色类选择器1</p><p class="orange">橙色类选择器2</p><!-- 层级关系: .parnet.child --><div class="parent"><div class = "child">父层级中的子层级</div></div><div class = "child">同类名其他层级</div><!-- 同一个元素上分配多个类选择器：使用空格隔开 --><div class ="violet text-lg">复杂的样式</div>
</body>
</html>

h4 {color: red;
}.classSelector {color: green;
}#idSelector {color: blue;
}.orange {color: orange;
}.purple {color: purple;
}.parent {.child {color: blue;}
}.violet {color: grey;
}.text-lg {font-size: 50px;
}

属性和值：

颜色、背景和边框：

颜色：一般使用RGB和HEX表示颜色；RGB:红绿蓝、0-255；HEX：RGB的16进制转换；

透明度：1.RGBA中的alpha,取值0-1；2.opacity含义为所有元素及子元素的透明度，无法精确独立调整透明度。

<body><!-- 颜色:1.一般使用RGB和HEX表示颜色；RGB:红绿蓝、0-255；HEX：RGB的16进制转换;2. 颜色可以赋值给所有以颜色为值的语句中 --><div class="rgb">用RGB标识颜色</div><div class="hex">用HEX标识颜色</div><!-- 透明度:1.RGBA中的alpha,取值0-1；2.opacity含义为所有元素及子元素的透明度，无法精确独立调整透明度 --><div class="background-color text-opacity">背景颜色</div><div class="border-color opacity">边框颜色</div></body>

.rgb {color: rgb(235, 70, 224)
}.hex {color: #eb46e0
}.background-color {background-color: #a

前端入门之CSS

CSS: HTML负责定义页面结构；JS负责处理页面逻辑和点击事件；CSS负责用于描述 HTML 元素的显示方式，通过 CSS 可以控制颜色、字体、布局等。核心语法：选择器：类选择器主要用于选中需要添加样式的 HTML 元素。主要分为：类选择器（.class-name { ... }）、标签选择器（…...

编程日记 2026/2/2 9:26:43

JavaScript逆向WebSocket协议解析与动态数据抓取

在JavaScript逆向工程中，WebSocket协议的解析和动态数据抓取是关键技能。本文将结合Fiddler、Charles Proxy和APIfox工具，详细讲解如何解析WebSocket协议并抓取动态数据。一、WebSocket协议解析 （一）WebSocket协议的基本概念 …...

编程日记 2026/1/25 23:50:18

剑指Offer（数据结构与算法面试题精讲）C++版——day4

剑指Offer（数据结构与算法面试题精讲）C版——day4 题目一：和为k的子数组题目二：0和1个数相同的子数组题目三：左右两边子数组的和相等题目一：和为k的子数组结合前面着重阐述的双指针法这一经典的算法技巧&…...

编程日记 2026/1/30 1:52:41

从代码学习深度学习 - NLP之文本预处理 PyTorch版

文章目录前言1. 文本预处理理论知识1.1 文本清洗与标准化1.2 分词（Tokenization）1.3 词频统计与词汇表构建1.4 序列表示与批次生成1.5 预处理的意义2. 文本预处理的核心代码解析2.1 读取数据集：`read_time_machine`2.2 分词处理：`tokenize`2.3 词频统计：`count_corpus`2.…...

编程日记 2026/1/21 20:33:35

WebRTC技术简介及应用场景

写在前面本文是参考稀土掘金的文章,整理得出,版权归原作者所有!参考链接请点击跳转 WebRTC（Web Real-Time Communication） 是一项开源技术，允许浏览器和移动应用直接进行实时音视频通信和数据传输，无需安装插件或第三方软件。它…...

编程日记 2026/1/27 14:42:38

介绍几种创意登录页（含完整源码）

今天为大家收集了几种不同风格的登录页，搭配动态渐变背景，效果绝对惊艳！ CSS3实现动态渐变玻璃拟态登录页一、开篇语纯CSS实现当下最火的玻璃拟态(Morphism)风格登录页，搭配动态渐变背景，效果绝对惊艳！ …...

编程日记 2026/1/26 14:24:19

git分布式控制工具详解

1. 版本控制器的方式 1.1 集中式版本控制工具特点： 版本库集中存放在中央服务器必须联网才能工作（局域网/互联网）个人修改后提交到中央版本库举例：SVN、CVS 1.2 分布式版本控制工具特点： 无"中央服务器&qu…...

编程日记 2025/11/21 2:17:22

Uni-app入门到精通：uni-app的基础组件

1、view view是容器组件，类似于HTML中的<div></div>标签，用于包裹各种元素内容，是页面布局常用的组件。view组件的属性如下属性类型默认值说明hover-classStringnone指定按下去的样式类。当hover-class"none"时&…...

编程日记 2026/1/26 6:25:53

R语言从专家到小白

文章目录下载安装R下载安装R StudioCRAN 下载安装R Index of /bin https://cran.r-project.org/ 下载安装R Studio https://posit.co/download/rstudio-desktop/ CRAN R综合档案网络。 CRAN 镜像是一个提供 R 语言软件和包的在线服务，用户可以从不同的地区选择…...

编程日记 2025/11/21 4:09:38

显示器工艺简介

华星光电显示器的生产工艺流程介绍，从入厂原料到生产出显示器的整体工艺介绍华星光电显示器的生产工艺流程主要包括以下几个阶段，从原材料入厂到最终显示器的生产： 原材料准备玻璃基板：显示器的核心材料，通常采用超…...

编程日记 2025/12/6 6:28:26

大文件上传源码，支持单个大文件与多个大文件

大文件上传源码，支持单个大文件与多个大文件 Ⅰ 思路Ⅱ 具体代码前端--单个大文件前端--多个大文件前端接口后端 Ⅰ 思路具体思路请参考我之前的文章，这里分享的是上传流程与源码 https://blog.csdn.net/sugerfle/article/details/130829022 Ⅱ 具体代码…...

编程日记 2026/2/1 23:00:46

C语言--插入排序

插入排序：简单而高效的排序算法在计算机科学中，排序是一种常见的操作，用于将一组数据按照特定的顺序排列。插入排序（Insertion Sort）是一种简单直观的排序算法，它的工作原理类似于我们整理扑克牌的过程。…...

编程日记 2026/1/29 10:29:11

L2-024 部落 #GPLT,并查集 C++

文章目录题目解读输入格式输出格式思路Ac Code参考题目解读我们认为朋友的朋友都算在一个部落里，于是要请你统计一下，在一个给定社区中，到底有多少个互不相交的部落？并且检查任意两个人是否属于同一个部落。输入格式第一…...

编程日记 2026/1/29 4:14:20

前端面试题（三）：axios有哪些常用的方法

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 中发送 HTTP 请求。它提供了一些常用的方法来处理不同类型的请求。以下是 Axios 中常用的一些方法： 1. axios.get() 用于发送 GET 请求，从服务器获取数据。 axios.get(/api/d…...

编程日记 2026/1/19 7:16:46

JSON 基础知识（一）

第一部分：JSON 基础知识 📢 快速掌握 JSON！文章视频双管齐下 🚀 如果你觉得阅读文章太慢，或者更喜欢边看边学的方式，不妨直接观看我录制的 JSON 课程视频！🎬 视频里会用更直观…...

编程日记 2026/1/18 5:02:44

SSM框架学习(Day-1)

1.spring系统架构自底而上进行,上层依赖于下层,首先最底层是Core Container -- 核心容器, 再往上是AOP(面向切面编程)和Aspects(AOP)思想的实现, 我个人的理解是, 它可以在不惊动你原始程序的基础上, 给它增强功能，类似于反射；再往上是数据访问层。 C…...

编程日记 2026/1/26 7:15:01

使用 PyTorch 的 `GradualWarmupScheduler` 实现学习率预热

使用 PyTorch 的 GradualWarmupScheduler 实现学习率预热在深度学习中，学习率（Learning Rate, LR）是影响模型训练效果的关键超参数之一。为了提升模型的收敛速度和稳定性，学习率调度策略变得尤为重要。其中，学习率预热（Learning Rate Warmup）是一种常用的策略，它通过…...

编程日记 2026/1/27 19:46:06

Redis 中 Set（例如标签）和 ZSet（例如排行榜）的详细对比，涵盖定义、特性、命令、适用场景及总结表格

以下是 Redis 中 Set 和 ZSet 的详细对比，涵盖定义、特性、命令、适用场景及总结表格： 1. 核心定义数据类型SetZSet（Sorted Set）定义无序的、唯一的字符串集合，元素不重复。有序的、唯一的字符串集合，每个…...

编程日记 2025/11/18 2:56:32

在线记事本——支持Markdown

项目地址 https://github.com/Anyuersuper/CloudNotebook 百度网盘通过网盘分享的文件：CloudNotebook-master.zip 链接: https://pan.baidu.com/s/1_Y--aBzNkKiFRIMHYmwPdA?pwdyuer 提取码: yuer 📝 云笔记 (Cloud Notebook) 云笔记是一个简洁、安全…...

编程日记 2026/1/30 2:08:39

C# 中充血模型和‌贫血模型

在C#中，‌充血模型（Rich Domain Model）‌和‌贫血模型（Anemic Domain Model）‌是两种截然不同的领域建模方式，核心区别在于‌业务逻辑的归属‌。以下是通俗易懂的解释： 1. ‌贫血模型&#xff…...

编程日记 2025/6/24 6:21:42

Java技术生态前沿洞察：虚拟线程引领并发革命，框架创新赋能云原生时代

Java技术生态正迎来新一轮变革浪潮。虚拟线程的落地成为高并发编程范式转折点，其极低资源开销特性在电商秒杀场景中展现出3倍吞吐量提升，彻底改写传统线程模型性能边界。Spring Boot 3.2原生支持虚拟线程，结合Observation API与HTTP客户端优化…...

编程日记 2025/8/22 20:20:33

Day2：前端项目uniapp壁纸实战

先来做一个轮番图。效果如下： common-style.css view,swiper,swiper-item{box-sizing: border-box; } index.vue <template><view class"homeLayout"><view class"banner"><swiper circular indicator-dots autoplay…...

编程日记 2026/1/28 3:34:05

人工智能赋能工业制造：智能制造的未来之路

一、引言随着人工智能技术的飞速发展，其应用场景不断拓展，从消费电子到医疗健康，从金融科技到交通运输，几乎涵盖了所有行业。而工业制造作为国民经济的支柱产业，也在人工智能的浪潮中迎来了深刻的变革。智能制造&…...

编程日记 2025/11/22 19:07:36

V-SHOW和箭头函数在VUE项目的踩坑点

v-show和v-if v-show控制显示隐藏是通过控制CSS的display决定dom节点的显示和隐藏。v-if通过控制dom节点的渲染与否实现元素的显示和隐藏。在vue中，template标签不参与页面渲染，也不会破坏代码的层级结构，所以多和v-if结合控制元素的显示隐…...

编程日记 2025/11/8 6:03:30

LeetCode Hot100 刷题笔记（3）—— 链表

目录前言 1. 相交链表 2. 反转链表 3. 回文链表 4. 环形链表 5. 环形链表 II 6. 合并两个有序链表 7. 两数相加 8. 删除链表的倒数第 N 个结点 9. 两两交换链表中的节点 10. K 个一组翻转链表 11. 随机链表的复制 12. 排序链表 13. 合并 K 个升序链表 14. LRU 缓存前言一、…...

编程日记 2026/1/27 4:49:52

Spring 概念

Spring 是一个功能强大、灵活且广泛使用的 Java 企业级开发框架，它诞生于 2003 年，由 Rod Johnson 创建，初衷是简化 Java EE 的开发过程。一、Spring 是什么？ 简单来说： Spring 是一个轻量级的 Java 开发框架&#…...

编程日记 2026/1/29 5:09:19

状态机思想编程

1. LED流水灯的FPGA代码在这个任务中，首先我们会使用状态机的思想来设计一个LED流水灯的控制逻辑。LED流水灯一般需要依次点亮不同的LED，并且循环播放。我们将其分为几个状态，每个状态控制一个或一组LED灯。状态机设计假设我们有8个LED…...

编程日记 2026/1/29 5:12:46

第二十八章:Python可视化图表扩展-和弦图、旭日图、六边形箱图、桑基图和主题流图

一、引言在数据可视化领域，除了常见的折线图、柱状图和散点图，还有一些高级图表类型可以帮助我们更直观地展示复杂数据关系。本文将介绍五种扩展图表：和弦图、旭日图、六边形箱图、桑基图和主题流图。这些图表在展示数据关系、层次结构和流量…...

编程日记 2026/1/30 5:17:25

基于vue框架的重庆美食网站的设计与实现kt945（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。

系统程序文件列表项目功能：用户,美食分类,美食菜品开题报告内容基于Vue框架的重庆美食网站的设计与实现开题报告一、选题背景与意义 （一）选题背景重庆，作为中国西南地区的璀璨明珠，以其独特的地理位置和丰富…...

编程日记 2026/1/30 18:16:31

Metal学习笔记十三：阴影

在本章中，您将了解阴影。阴影表示表面上没有光。当另一个表面或对象使对象与光线相遮挡时，您会看到对象上的阴影。在项目中添加阴影可使您的场景看起来更逼真，并提供深度感。阴影贴图阴影贴图是包含场景阴影信息的纹理。当光线照射到物体…...

编程日记 2026/2/2 6:00:26

CSS:

核心语法：

选择器：

属性和值：

颜色、背景和边框：

相关文章：