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

前端快速入门学习3——CSS介绍与选择器

news 来源：原创 2025/9/6 3:55:00

1.概述

CSS全名是cascading style sheets,中文名层叠样式表。
用于定义网页样式和布局的样式表语言。
通过 CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。

HTML与CSS的关系：HTML相当于毛坯房，CSS是装修。

CSS 通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式

选择器的声明中可以写无数条属性
声明的每一行属性，都需要以英文分号结尾;
声明中的所有属性和值都是以键值对这种形式出现的;

CSS三种导入方式：
1.内联样式（Inline Styles）
2.内部样式表（Internal Stylessheet）
3.外部样式表（External Stylesheet）
三种导入方式的优先级：内联样式>内部样式表>外部样式表
内联样式：

<head><link rel="stylesheet" href="style.css"><style>h2{color: red;font-size: 30px;}</style>
</head>
<body>
<h1 style="color: yellowgreen;">这是一个内联样式</h1>
<h2>二级标题标签，应用内部样式</h2>
<h3>三级标题标签,使用外部样式</h3>
</body>

style.css

h3{color: aqua;font-size: 20px;
}

效果：
在这里插入图片描述

2.选择器

选择器是 CSS中的关键部分，它允许你针对特定元素或一组元素定义样式

(1)元素选择器

<head><style>h1{color: red;font-size: 30px;}</style>
</head>
<body>
<h1>这是一个元素选择器</h1>
</body>

（2）类选择器

<head><style>.highlight {color: red;font-size: 30px;}</style>
</head>
<body>
<h1 class="highlight">这是一个类选择器</h1>
</body>

（3）id选择器

<head><style>#unique {color: blue;font-size: 25px;}</style>
</head>
<body><h2 id="unique">这是一个ID选择器</h2>
</body>

（4）通用选择器

<head><style>* {font-family: KaiTi;font-size: 20px;color: green;}</style>
</head>
<body><h2 id="unique">这是一个ID选择器</h2><p>这是一个简单的HTML示例1。</p><p>这是一个简单的HTML示例2。</p>
</body>

（5）子元素选择器

<head><style>.father > .son {color: yellow;font-size: 20px;}</style>
</head>
<body><div class="father"><p class="son">这是一个子元素选择器</p></div>
</body>

（6）后代选择器

<head><style>.father .grandson {color: orange;font-size: 10px;}</style>
</head>
<body><div class="father"><p class="son">这是一个子元素选择器</p><div><p class="grandson">这是一个后代选择器</p></div>
</body>

（7）兄弟选择器

<head><style>h3 + p {color: pink;font-size: 18px;}</style>
</head>
<body><p>这是一个普通的标签</p><h3>这是相邻兄弟选择器示例</h3><p>这是另一个P标签</p>
</body>

（8）伪类选择器

伪类是用来添加一些选择器的特殊效果。
如链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

<head><style>#element:hover{background-color: lightblue;}</style>
</head>
<body><p id="element">这是一个伪类选择器</p>
</body>

在这里插入图片描述

前端快速入门学习3——CSS介绍与选择器

1.概述 CSS全名是cascading style sheets,中文名层叠样式表。用于定义网页样式和布局的样式表语言。通过 CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。 HTML与CSS的关系：HTML相当…...

编程日记 2025/9/6 3:55:00

示例效果和代码直接可以用 Button 按钮 | HandyOrg 1.安装 , 输入 HandyControl 2.  <ResourceDictionary Source"pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/> …...

编程日记 2025/9/6 7:01:21

【代码艺廊】pyside6桌面应用范例：homemade-toolset

在研发测试日常工作中，通常会遇到很多琐碎的事情，占用我们工作的时间和精力，从而导致我们不能把大部分的注意力放在主要的工作上面。为了解决这个问题，除了加人之外，我们通常会开发一些日常用的效率工具，比…...

编程日记 2025/9/6 8:03:38

Hive 常见面试 300 问

一、Hive 基础概念什么是 Hive？它的主要用途是什么？ Hive 与传统关系型数据库有什么区别？简述 Hive 的架构，各个组件的作用是什么？解释 Hive 中的元数据，它存储在哪里？ Hive 支持哪些数据格式？各自的特点是什么？什么是 Hive 表的分区？为什么要使用分区？什么是 …...

编程日记 2025/9/6 8:04:42

OpenMinus 源码深度解析：从 React 模式到多智能体架构实现

OpenMinus 源码深度解析：从 React 模式到多智能体架构实现本文基于 2024 年 3 月 9 日最新代码版本解析，完整代码已上传至 GitHub（附项目地址https://github.com/mannaandpoem/OpenManus） 一、项目背景与核心价值 1.1 项目定位 …...

编程日记 2025/9/4 19:33:04

【Linux网络与网络编程】04.TCP Socket编程

一、TCP Socket编程接口 // 创建套接字 int socket(int domain, int type, int protocol); // 参数： // domain：域（协议家族），这里使用 AF_INET 表示进行网络编程 // type：网络通信传输的类型&#xff0…...

编程日记 2025/9/3 20:09:27

初识数据结构——算法效率的“两面性”：时间与空间复杂度全解析

📊 算法效率的“两面性”：时间与空间复杂度全解析 1️⃣ 如何衡量算法好坏？ 举个栗子🌰：斐波那契数列的递归实现 public static long Fib(int N) {if(N < 3) return 1;return Fib(N-1) Fib(N-2); }问题&#xf…...

编程日记 2025/9/3 3:21:37

CCF GESP C++编程八级认证真题 2025年3月

C 八级 2025 年 03 月题号 1 2 3 4 5 6 7 8 答案 B C B A D D D 一、单选题第 1 题国家“以旧换新”政策仍在继续，小杨家决定在家里旧的冰箱、电视、洗衣机、微波炉中选两种换新。其中，冰箱有4种型号可选，电视有6种型号可选&#xff0c…...

编程日记 2025/9/1 16:48:38

React: hook相当于函数吗?

一、Hook 是一个函数，但不仅仅是函数函数的本质 Hook 确实是一个 JavaScript 函数，例如 useState、useEffect 或自定义 Hook 都是函数。它们可以接受参数（如初始状态值或依赖项数组），并返回结果（如状态值和…...

编程日记 2025/9/5 14:08:03

Git 从入门到精通（开源协作特别版）

🧠 Git 从入门到精通（开源协作特别版） ✅ 基础命令 🧰 高级用法 🛠️ 开源实战技巧 🌍 GitHub 社区协作适合：从0开始 → 熟练开发者 → 参与/维护开源项目 🔰 第1章：…...

编程日记 2025/9/3 12:42:58

《探索边缘计算：重塑未来智能物联网的关键技术》

最近研学过程中发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击链接跳转到网站人工智能及编程语言学习教程。读者们可以通过里面的文章详细了解一下人工智能及其编程等教程和学习方法。下面开始对正文内容的…...

编程日记 2025/9/4 4:36:39

什么是缓存穿透、缓存雪崩、缓存击穿？

什么是缓存？ 缓存就是数据交换的缓冲区，是存贮数据的临时地方，一般读写性能较高。怎么防止缓存穿透？ 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在，这样缓存永远不会生效，这些请求都会打到…...

编程日记 2025/8/27 15:23:12

洛谷题单3-P4956 [COCI 2017 2018 #6] Davor-python-流程图重构

题目描述在征服南极之后，Davor 开始了一项新的挑战。下一步是在西伯利亚、格林兰、挪威的北极圈远征。他将在 2018 年 12 月 31 日开始出发，在这之前需要一共筹集 n 元钱。他打算在每个星期一筹集 x 元，星期二筹集 xk 元，……...

编程日记 2025/9/2 11:03:37

解决浏览器报错Mixed Content

前端代码写死了访问后端的请求为：http://service.xxx.com:8080/api/，前端代码中混合内容（Mixed Content） 导致的。浏览器使用https访问站点时，这个请求会被拦截，并且浏览器打印 login.vue:151 Mixed Conten…...

编程日记 2025/9/3 1:33:04

HCIP【BGP协议（详解）】

目录 1 BGP协议产生背景 2 BGP协议特性 2.1 自治系统间路由传播 2.2 路由矢量协议 2.3 防环机制 2.4 基于TCP传输 2.5 路由更新机制 2.6 丰富的路由属性 2.7 支持CIDR和路由聚合 2.8 路由过滤和策略控制 2.9 动态对等体功能 3 BGP基本术语 4 BGP规划问题 4.1 路…...

编程日记 2025/9/3 12:00:51

集合与容器：List、HashMap（II）

一、ArrayList 是集合框架中最核心的动态数组实现，高频使用的容器之一。 1. 核心数据结构基于数组实现，维护elementData数组存储元素： transient修饰的elementData不会被默认序列化（通过自定义序列化逻辑优化存储）…...

编程日记 2025/8/27 15:23:05

mac 安装MySQL

1、打开官网，点击Downloads 2、在downloads页面选择MySQL Community Server 3、选择对应的设备和版本，点击下载 4、下载选择 5、下载完成后，点击安装 6、next 到Configguration 时要输入密码（千万别忘记） 7.最后输…...

编程日记 2025/9/1 5:29:48

Pascal语言的软件开发工具

使用Pascal语言的软件开发工具引言随着计算机科学的发展，编程语言层出不穷，程序员们在开发时可以选择多种多样的工具。而Pascal语言作为一种历史悠久的程序设计语言，尽管在当今编程语言的生态中已不再是主流，但其优雅的语法和…...

编程日记 2025/9/4 21:08:40

vue组件开发：什么是VUE组件？

什么是VUE组件在我们实际开发过程中你也许会发现有很多代码是重复的，它们可能是一个按钮、一个表单、一个列表等等，其中最为显著的应该是列表。以CSDN的首页为例： 上述截图中的文章列表可能会在多处出现，比如此截图是精选博客…...

编程日记 2025/9/6 7:37:31

如何在Springboot的Mapper中轻松添加新的SQL语句呀？

在如今的软件开发界，Spring Boot可是非常受欢迎的框架哦，尤其是在微服务和RESTful API的构建上，真的是让人爱不释手！今天，我们就来聊聊如何为Spring Boot项目中的Mapper添加新的SQL语句吧！说起来&#xff0…...

编程日记 2025/8/29 13:37:56

微服务架构: SpringCloud服务注册与发现详解

# 微服务架构: SpringCloud服务注册与发现详解一、什么是微服务架构微服务架构简介微服务架构（Microservices Architecture）是一种以一组小型服务应用程序构建系统的软件架构风格。每个服务运行在自己的进程中，通过精简的HTTP API进行通信…...

编程日记 2025/9/4 8:30:25

现代简约杂志海报包装网页设计无衬线英文字体安装包 Seriusans – Condensed Sans Display Font

Seriusans 是一种 Condensed Sans Display 字体，将现代简约与大胆融为一体。其狭窄而醒目的字体营造出强大的存在感，使其成为有影响力设计的绝佳选择，例如海报、杂志标题、品牌、包装、网页设计、运动图形、社论布局、广告活动、企业演示&…...

编程日记 2025/8/29 13:37:58

C/C++的条件编译

一、什么是条件编译？ 条件编译是指在编译阶段根据某些条件来决定是否编译某段代码。这通常通过预处理指令来实现，比如 #if、#ifdef、#ifndef、#else、#elif 和 #endif。二、为什么使用条件编译？ 跨平台开发：不同的操作…...

编程日记 2025/9/5 4:29:47

视野,，地面覆盖，重叠需求，FPS，飞行速度等的计算公式

一、计算相机视野与重叠需求 1. 相机参数 IDS UI-5280CP： 分辨率：2456x2054 像素。传感器：假设为 1/1.8" CMOS（常见型号），尺寸约 6.78 mm（宽） 5.67 mm（高&#xf…...

编程日记 2025/9/3 22:50:50

ARXML文件解析-1

目录 1 摘要2 ARXML文件2.1 作用及典型应用场景2.2 **ARXML文件的结构树**2.3 TAG（XML元素）2.4 ARXML文件关键元素解析2.4.1 XML声明与处理指令2.4.2 XML注释2.4.3 ADMIN-DATA元素2.4.3 语言相关元素2.4.5 AR-PACKAGE体系结构2.4.6. 数据转换框架2.4.7 S…...

编程日记 2025/8/31 21:00:46

传统开发者视角：智能合约与区块链数据库探秘

前言在上一篇文章：探秘区块链开发：智能合约在 DApp 中的地位及与传统开发差异中我为大家从传统开发者的角度讲解了一下什么是智能合约。简单的来说智能合约对于传统前端开发者可以说是API接口，而后端开发者则可以说是负责接口逻辑的程序。然而从传统的开发意识跳跃到D…...

编程日记 2025/9/5 14:01:33

游戏引擎学习第204天

回顾并为今天的内容做铺垫好，现在开始这一集。今天我们将进行一些用户界面编程，觉得这是一个展示如何编写这类代码的好时机。很多人对如何做用户界面代码都很好奇，所以展示一下如何编写是非常有意义的。我之所以在现在的这个地方做这些工…...

编程日记 2025/9/4 3:32:43

蓝桥杯2024年第十五届省赛真题-R 格式

题目链接： 思路： 通过数组模拟d的每一位，逐位进行计算，从而实现对d的精确处理。代码： #include<bits/stdc.h> #define int long long using namespace std; const int N 2020;int n; string s; vector<i…...

编程日记 2025/8/27 15:22:42

Haskell语言的区块链安全

Haskell语言在区块链安全中的应用引言随着区块链技术的发展，它已经成为金融、供应链管理、身份认证等多个领域的重要基础设施。然而，区块链的安全性问题一直是行业关注的焦点。为了确保区块链的安全性，开发者需要选择合适的编程语言来编写…...

编程日记 2025/8/29 15:20:12

BUUCTF-web刷题篇(11)

20.admin 这道题很可能用admin或者伪造admin进行登录，用admin进行登录，随便填写密码进不去，发现页面有register、login，用admin注册提示已经被注册。方法一：（burp爆破） 进入登陆界面&#x…...

编程日记 2025/9/5 21:36:30

TensorFlow

TensorFlow 是一个由 Google 开发并开源的机器学习和深度学习库，被广泛应用于各类机器学习项目。以下为你详细介绍： 概述 TensorFlow 最初是为了满足 Google 内部大规模机器学习需求而研发，后于 2015 年开源。它提供了一个强大且灵活的生态…...

编程日记 2025/9/1 0:21:59

分子生成的深层次层次变分自编码器 - DrugHIVE 测评

一、背景介绍 DrugHIVE 来源于南加州大学定量与计算生物学系的 Remo Rohs 为通讯作者的文章：《Structure-Based Drug Design with a Deep Hierarchical Generative Model》。文章链接：https://pubs.acs.org/doi/10.1021/acs.jcim.4c01193。该文章在 202…...

编程日记 2025/9/4 23:01:28

54.大学生心理健康管理系统(基于springboot项目)

目录 1.系统的受众说明 2.相关技术 2.1 B/S结构 2.2 MySQL数据库 3.系统分析 3.1可行性分析 3.1.1时间可行性 3.1.2 经济可行性 3.1.3 操作可行性 3.1.4 技术可行性 3.1.5 法律可行性 3.2系统流程分析 3.3系统功能需求分析 3.4 系统非功能需求分析 4.系统设计…...

编程日记 2025/8/31 10:02:19

Linux文件特殊权限管理及进程和线程

acl 权限优先级拥有者 > 特殊指定用户 > 权限多的组 >权限少的组 > 其他 mask阈值 mask是能够赋予指定用户权限的最大阀值当设定完毕文件的acl列表之后用chmod缩小了文件拥有组的权力 mask会发生变化恢复： setfacl -m m: 权限 :rwx 文件/…...

编程日记 2025/9/4 0:42:15

Vue2+Vue3 45-90集学习笔记

Vue2Vue3 45-90集学习笔记小兔鲜首页页面开发思路： 分析页面，按模块拆分组件，搭架子（局部注册或全局注册） 局部注册：App.js中导入（import），注册（compon…...

编程日记 2025/9/4 20:55:08

【Web 服务器】的工作原理

🌐 Web 服务器的工作原理 Web 服务器的主要作用是接收客户端请求（通常是浏览器发出的 HTTP/HTTPS 请求），处理请求，并返回相应的数据（如网页、图片、API 响应等）。 📌 工作流程 1️…...

编程日记 2025/9/1 22:46:55

LeetCode 5 -- 区间DP | 中心拓展算法

题目描述最长回文子串数据规模为 5e5，必须 manacher 算法 1. DP 由于 r e v e r s e ( ) reverse() reverse() 的时间复杂度是 O ( N ) O(N) O(N)，因此暴力肯定是不行的。 d p dp dp 的思路：如果 s [ l . . r ] s[l..r] s[l..r] 是一个…...

编程日记 2025/8/29 5:38:39

IntelliJ IDEA中Spring Boot 3.4.x+集成Redis 7.x：最新配置与实战指南

‌前言 Spring Boot 3.4.x作为当前‌最新稳定版本‌，全面支持Java 17与Jakarta EE 10规范。本文以‌Spring Boot 3.4.1‌和‌Redis 7.x‌为例，详解如何在IDEA中快速接入Redis，涵盖‌最新依赖配置‌、‌数据序列化优化‌、‌缓存注解‌及‌高…...

编程日记 2025/9/2 3:37:58

数仓建模中计算累计销量

在数仓建模中计算累计销量，通常需要结合时间维度和业务逻辑设计合理的模型与计算逻辑。以下是分步骤的实现思路和示例： 1. 模型设计累计销量的计算通常基于星型模型或雪花模型，核心结构包括： 事实表：记录每一笔销售…...

编程日记 2025/9/4 20:28:48

(多看) CExercise_05_1函数_1.2计算base的exponent次幂

题目： 键盘录入两个整数：底(base)和幂指数(exponent)，计算base的exponent次幂，并打印输出对应的结果。（注意底和幂指数都可能是负数） 提示：求幂运算时，基础的思路就是先无脑把指数转…...

编程日记 2025/9/3 1:05:59

Pollard‘s Rho 算法

Pollard’s Rho 算法：一场数学与计算机科学的巧妙结合在现代计算机科学中，素数分解、整数因子化问题有着广泛的应用，尤其是在密码学领域。然而，当面对一个大合数时，寻找其因子仍然是一个非常复杂的问题。我们常常依赖…...

编程日记 2025/9/5 4:02:21

8款分形长虹玻璃科幻渐变海报设计JPG背景素材 The Gradient Backgrounds Pack

天空从未如此美好 — 直到有人将日落洒在您的屏幕上。这些渐变是带有心跳的液体颜色，从熔化的金色转变为深紫色，就像地平线一样。 8 个背景中的每一个都以 45003000 像素和 300dpi 的速度脉冲，清晰到足以让您感觉自己可以直接踏入光芒中。但这…...

编程日记 2025/9/5 19:41:52

AIGC9——AIGC时代的用户体验革命：智能交互与隐私保护的平衡术

引言：当AI成为交互主角 2024年，淘宝AI客服"阿里小蜜"日均处理20亿次咨询，日本虚拟偶像"初音未来"演唱会门票3秒售罄——这些现象标志着AIGC已深度融入人机交互场景。但与此同时，过度个性化的推荐引发"信…...

编程日记 2025/9/5 1:02:45

vm虚拟机虚拟出网卡并ping通外网

在 Linux 和 Windows 系统中，即使不使用网络命名空间（namespace），也能实现虚拟网卡上网。以下是不同场景下的实现方法： 一、Linux 系统（不使用网络命名空间） 1. 直接创建虚拟网卡对&#xff08…...

编程日记 2025/9/2 8:23:28

基于时间卷积网络TCN实现电力负荷多变量时序预测(PyTorch版)

前言系列专栏:【深度学习：算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域，讨论了各种复杂的深度神经网络思想，如卷积神经网络、循环神经网络、生成对…...

编程日记 2025/9/3 18:10:56

ESXi8的部署过程

目录一、系统安装二、ESXI8的序列号三、挂载硬盘和新建VMFS数据分区四、通过数据存储浏览器上传下载文件五、Windows远程桌面端口隐射六、导出虚机一、系统安装 1、使用UtrIOS系统制作ESXI8的启动盘； 2、服务器启动F8按键进入Popup启动选项，选择U盘启动； 3、安…...

编程日记 2025/8/30 18:56:41

IntelliJ IDEA 2020~2024 创建SpringBoot项目编辑报错: 程序包org.springframework.boot不存在

目录前奏解决结尾前奏哈！今天在处理我的SpringBoot项目时，突然遇到了一些让人摸不着头脑的错误提示： java: 程序包org.junit不存在 java: 程序包org.junit.runner不存在 java: 程序包org.springframework.boot.test.context不存在 java:…...

编程日记 2025/9/5 4:27:30