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

CSS底层基础：小白速来

news 来源：原创 2025/5/6 21:47:08

1. CSS简介

CSS (Cascading Style Sheets) 是一种用来描述HTML或XML文档样式的语言。它使得开发者能够控制网页的布局和外观，包括字体、颜色、间距等。CSS通过选择器来指定要应用样式的元素，并定义这些元素的具体样式属性。

基本结构示例：

/*selector {property: value;
}*/
h1 {color: red;
}

2. CSS与HTML的关系

依赖性：CSS必须依附于HTML DOM来作用。DOM是HTML文档的一个对象模型，它将文档表示成树状结构。
作用机制：CSS通过选择DOM中的特定元素并应用规则来改变页面的视觉效果。

3. CSS引入方法

3.1 内联样式

直接在HTML标签内部使用style属性：

<p style="color: blue;">这是一个段落。</p>

3.2 外部样式表

使用<link>标签链接到一个独立的CSS文件：

<head><link rel="stylesheet" type="text/css" href="styles.css">
</head>

3.3 @import导入

在CSS文件中使用@import指令引用另一个CSS文件：

@import url('anotherStylesheet.css');

3.4 行内样式

在HTML文档的<head>部分使用<style>标签嵌入CSS代码：

<head><style>body { background-color: lightblue; }</style>
</head>

4. 渲染流程

浏览器首先加载CSS文件，然后解析HTML文档形成DOM树。接着，根据CSS规则生成渲染树，最后由浏览器的渲染引擎基于渲染树绘制出最终显示给用户的界面。
在这里插入图片描述

5. 优先级计算

CSS样式的优先级按以下顺序递增：

标签选择器 (权重1)
类选择器 (权重10)
ID选择器 (权重100)
行内样式 (权重1000)
!important声明 (覆盖所有其他规则)

对于复合选择器，如.container ul li:nth-child(odd)，其优先级为各个简单选择器优先级之和：10 (类) + 1 (后代) + 1 (后代) + 10 (伪类) = 22。

6. CSS选择器分类

6.1 基础选择器

标签选择器：直接针对HTML标签名设置样式，如p {}。
类选择器：以.开头，可以应用于多个元素，如.myClass {}。
ID选择器：以#开头，每个页面中唯一，如#myId {}。
通配符选择器：用*表示，匹配所有元素，但不推荐频繁使用，因为性能较差。

6.2 组合选择器

后代选择器：空格分隔的选择器，例如div p {}匹配所有作为div子元素的p。
子元素选择器：使用>符号，仅匹配直接子元素，如div > p {}。
相邻兄弟选择器：使用+连接，选择紧接在前一个元素之后的同级元素，如h1 + p {}。
普通兄弟选择器：使用~连接，选择前面有指定元素的所有后续兄弟元素，如h1 ~ p {}。

6.3 伪类选择器

链接伪类：用于定义不同状态下的链接样式，如:hover, :active, :visited等。
状态伪类：如:focus, ::before, ::after等，主要用于交互状态或内容插入。
结构伪类：如:nth-child(n), :first-child, :last-child等，依据元素在父元素中的位置进行选择。

6.4 伪元素选择器

允许向某些选择器添加特殊的效果，比如::before和::after可以在内容前后插入额外的内容。

6.5 属性选择器

允许基于元素的属性及其值来选择元素，提供了更加灵活的选择方式，如[type="text"]选择所有type属性值为text的元素。

以上内容包含了CSS的基础概念、引入方法、渲染过程以及各种类型的选择器，帮助你更深入地理解如何有效利用CSS来增强你的网页设计。

CSS底层基础：小白速来

1. CSS简介 CSS (Cascading Style Sheets) 是一种用来描述HTML或XML文档样式的语言。它使得开发者能够控制网页的布局和外观，包括字体、颜色、间距等。CSS通过选择器来指定要应用样式的元素，并定义这些元素的具体样式属性。基本结构示例： …...

编程日记 2025/5/6 21:47:08

【MySQL】库和表的基本操作

目录库库的增删查改字符集与校验集库的备份与恢复表表的创建和删除用不同的存储引擎创建表的区别查看表修改表添加删除属性修改改变属性上篇博客我们讲了数据库的基本理解，对数据库有了一个大致的概念，下面我们来介绍一下库和表的…...

编程日记 2025/5/2 20:10:17

5款AI智能办公工具丨提升办公效率‼️

办公效率低？工作压力大？别担心，这里有五款超实用的AI办公工具，帮你轻松搞定各种任务！🌟 简直不要太实用，快快收藏起来总有一天你会用得上~ 红薯通AI📝写作文案的好帮手&#xff0c…...

编程日记 2025/4/30 1:39:37

华为HarmonyOS 让应用快速拥有账号能力 -- 3 获取用户手机号

场景介绍当应用对获取的手机号时效性要求不高时，可使用Account Kit提供的手机号授权与快速验证能力，向用户发起手机号授权申请，经用户同意授权后，获取到手机号并为用户提供相应服务。以下只针对Account kit提供的手机号授权与快…...

编程日记 2025/5/6 19:36:08

一个通用的lambda stream流处理工具, 包含了工作中绝大部分场景常用的使用方式 import java.math.BigDecimal; import java.util.*; import java.util.function.BiFunction; import java.util.function.Consumer; import java.util.function.Function; import java.util.funct…...

编程日记 2025/5/5 6:38:59

Android 编译和使用libheif

项目中需要使用libheif,libde265,libyuv。一下是相应的cmakelist.txt。这里直接使用了静态库。里面涉及到c包的链接，需要stdc。 ${PROJECT_SOURCE_DIR}/../jniLibs/${ANDROID_ABI}/liblibde265.a这个路径由于操作过程中copy出现问题，多了一层路径&…...

编程日记 2025/5/6 4:51:36

新一代零样本无训练目标检测

🏡作者主页：点击！ 🤖编程探索专栏：点击！ ⏰️创作时间：2024年12月2日21点02分神秘男子影, 秘而不宣藏。泣意深不见, 男子自持重, 子夜独自沉。论文链接点击开启你的论文编程之旅h…...

编程日记 2025/5/5 14:27:24

神经网络入门实战：（九）分类问题 → 神经网络模型搭建模版和训练四步曲

(一) 神经网络模型搭建官方文档每一层基本都有权重和偏置，可以仔细看官方文档。 pytorch 官网的库：torch.nn — PyTorch 2.5 documentation Containers库：用来搭建神经网络框架（包含所有的神经网络的框架）&#xff1b…...

编程日记 2025/4/29 1:16:00

写NFC微信小程序跳转Uri标签

本示例使用的发卡器：https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.52de2c1b8bEEGz&ftt&id615391857885 Dim dispstr As String Dim status As Byte Dim status1 As Byte Dim afi As Byte Dim myctrlword As Byte Dim mypiccserial(0 To 7) …...

编程日记 2025/5/3 15:39:21

Gradle vs. Maven: 到底哪个更适合java 项目?

ApiHug ApiHug - API Design & Develop New Paradigm.ApiHug - API Design & Develop New Paradigm.https://apihug.com/ 首先 ApiHug 整个工具链是基于 gradle 构建,包括项目模版， 插件； 说到 Java 项目管理，有两个巨头脱颖而出&a…...

编程日记 2025/4/30 19:04:17

【赛博保安】安全日记之常用术语(一)

"企业的信息安全治理水平，直接取决于安全团队人员的技术专业度，而非运营经验值。所谓的技术，并非指渗透和挖洞的能力，而是指软件开发、IT 架构、网络拓扑相关的知识和经验。站在乙方的角度来看，技术薄弱的安全人…...

编程日记 2025/5/3 16:35:58

设计模式更新ing

设计模式 1、六大原则1.1 单一设计原则 SRP1.2 开闭原则1.3 里氏替换原则1.4 迪米特法则1.5 接口隔离原则1.6 依赖倒置原则 2、工厂模式 1、六大原则 1.1 单一设计原则 SRP 一个类应该只有一个变化的原因比如一个视频软件，区分不同的用户级别包括访客&#xff0…...

编程日记 2025/4/29 22:46:57

008静态路由-特定主机路由

按照如上配置，用192.168.0.1 电脑ping 192.168.1.1 发现能够ping通用192.168.0.1 电脑ping 192.168.2.1 发现不能ping通这是因为192.168.0.1 和 192.168.1.1 使用的是同一个路由器R1。 192.168.0.1 和 192.168.2.1 通信需要先经过R1，再经过R2 &#xf…...

编程日记 2025/5/5 5:03:04

MySQL 慢查询日志记录 SQL优化性能优化日志查询 Explain

介绍慢查询日志记录了所有执行时间超过指定参数(long_query_time，单位:秒，默认10秒)的所有SQL语句的日志。MySQL的慢查询日志默认没有开启，需要在MySQL的配置文件(/etc/my.cnf)中配置针对这些慢查询的SQL语句进行优化。 #开启慢查询开关 s…...

编程日记 2025/5/2 1:04:02

VINS_MONO视觉导航算法【三】ROS基础知识介绍

文章目录其他文章说明ROSlaunch文件基本概念定义用途文件结构根标签常用标签\<node>\<param>\<rosparam>\<remap>\<include>\<arg>\<group> 示例基本示例嵌套示例使用方法启动 *.launch 文件传递参数总结 ROS topicTopic 的基本…...

编程日记 2025/5/4 17:41:25

Python 3 教程第13篇（集合）

Python3 集合集合（set）是一个无序的不重复元素序列。集合中的元素不会重复，并且可以进行交集、并集、差集等常见的集合操作。可以使用大括号 { } 创建集合，元素之间用逗号 , 分隔， 或者也可以使用 set() 函数创建集…...

编程日记 2025/4/30 20:39:58

cesium 3dtile ClippingPlanes 多边形挖洞ClippingPlaneCollection

原理就是3dtiles里面的属性clippingPlanes 采用ClippingPlaneCollection，构成多边形来挖洞。其次就是xyz法向量挖洞 clippingPlanes: new this.ffCesium.Cesium.ClippingPlaneCollection({unionClippingRegions: true, // true 表示多个切割面能合并为一个有效的…...

编程日记 2025/5/5 7:53:24

开发者如何使用GCC提升开发效率GUI操作

看此篇前请先阅读https://blog.csdn.net/qq_20330595/article/details/144139026?spm1001.2014.3001.5502 先上效果图找到对应的环境版本配置环境目录结构 CtrlShiftP c_cpp_properties.json {"configurations": [{"name": "Win32","i…...

编程日记 2025/5/3 22:02:56

什么是隐式类型转换？

隐式类型转换（Implicit Type Conversion）是指编译器在没有明确要求的情况下，自动地将一种类型的值转换为另一种类型。C 语言支持隐式类型转换，这通常发生在表达式运算或函数调用中，以确保操作数或参数的类型兼容性。隐…...

编程日记 2025/5/1 7:45:36

爬虫专栏第三篇：Python 实战：运用 requests 突破京东商品评论获取难题（含 cookie 处理与编码设置技巧

简介：本文以京东商品评论为例，详细介绍了使用requests库获取网页数据的过程，包括从打开商品评价页面、抓包分析找到评论接口，到处理cookie参数、解决cookie字符串解析问题，以及设置正确的编码以成功获取评论数据&#…...

编程日记 2025/5/5 21:19:43

HCIE：详解OSPF，从基础到高级特性再到深入研究

目录前言一、OSPF协议基本原理简介基本原理 OSPF路由器类型 OSPF网络类型 OSPF报文类型和封装 OSPF邻居的建立的维护 DR和BDR的选举伪节点 LSDB的更新 OSPF的配置二、OSPF的高级特性虚连接（Virtual-Link） OSPF的LSA和路由选择 OSPF…...

编程日记 2025/4/30 22:55:23

第六十六条：谨慎使用本地方法

其实在java中有很多都是采用C或C语言实现的比如native这种的本地方法，感兴趣的可以找源代码看看。 Java Native Interface (JNI) 允许Java应用程序可以调用本地方法（native method），所谓本地方法是指使用本地程序设计语言&#xf…...

编程日记 2025/4/30 23:12:24

neo4j如何存储关于liquidity structure的层次和关联结构

在 Neo4j 中存储关于流动性结构（liquidity structure）的层次和关联结构非常适合，因为 Neo4j 是一个基于图的数据库，能够自然地建模和存储复杂的关系和层次结构。下面是如何在 Neo4j 中设计和实现这样的数据模型的详细步骤和示例。…...

编程日记 2025/5/2 21:48:16

45 基于单片机的信号选择与温度变化

目录一、主要功能二、硬件资源三、程序编程四、实现现象一、主要功能基于51单片机，采用DS18B20检测温度，通过三种LED灯代表不同状态。采用DAC0832显示信号脉冲，通过8位数码管显示温度。信号脉冲可以根据两个按键分别调整为正弦…...

编程日记 2025/5/4 11:14:26

2、Three.js初步认识场景Scene、相机Camera、渲染器Renderer三要素

三要素之间关系： 有了虚拟场景Scene，相机录像Camera，在相机小屏幕上看到的Renderer Scene当前空间 Mesh人在场景 Camera相机录像 Renderer显示器上首先先描述下Scene： 这个场景为三要素之一，一切需要展示的东西都需…...

编程日记 2025/5/4 21:15:09

Java基础面试题06：hashCode()和equals()方法的重要性体现在什么地方？

前言 Java中的hashCode()和equals()方法看似是干同一件事，但它们的使用场景和作用却大有不同。为了让程序更高效、更准确地运行，我们需要对这两者有深入的了解，并掌握它们的重写规则。 hashCode()和equals()的基础知识什么是hashCode&…...

编程日记 2025/5/6 8:07:17

Matlab Simulink HDL Coder开发流程（一）— 创建HDL兼容的Simulink模型

创建HDL兼容的Simulink模型一、使用Balnk DUT模板二、从HDL Coder库中选择模块三、为DUT开发算法/功能四、为设计创建Testbench五、仿真验证设计功能六、Simulink模型生成HDL代码这个例子说明了如何创建一个用于生成HDL代码的Simulink模型。要创建兼容HDL代码生成的MATLAB算法…...

编程日记 2025/5/6 17:41:20

C#基础之方法

文章目录 1 方法1.1 定义方法1.2 参数传递1.2.1 按值传递参数1.2.2 按引用传递参数1.2.3 按输出传递参数1.2.4 可变参数 params1.2.5 具名参数1.2.6 可选参数 1.3 匿名方法1.3.1 Lambda 表达式1.3.1.1 定义1.3.1.2 常用类型1.3.1.3 Lambda 表达式与 LINQ1.3.1.4 Lambda 表达式的…...

编程日记 2025/5/6 14:06:13

Pytest框架学习19--参数化2

1、数据源是yaml 安装yaml，使用safe_load方法读取文件，解析出数据 pip install PyYAML # test_data.yaml test_case_1:a: 2b: 3expected_result: 5test_case_2:a: -1b: 10expected_result: 9test_case_3:a: 0b: 0expected_result: 0# test_code.pyimpor…...

编程日记 2025/5/5 13:42:16

VSCode中“Run Code”运行程序时，终端出现中文乱码解决方法

问题描述在VSCode中“Run Code”运行程序时，终端输出结果出现中文乱码现象： 解决方法 1. 检查系统cmd的默认编码查看Windows终端当前编码方式的命令： chcp输出结果是一段数字代码，如936，这说明当前的cmd编码方式…...

编程日记 2025/5/2 4:43:06

HarmonyOS 5.0应用开发——列表（List）

【高心星出品】文章目录列表（List）列表介绍列表布局设置主轴方向设置交叉轴方向列表填充分组列表填充滚动条位置设置滚动位置滚到监听列表项侧滑列表（List） 列表介绍列表作为一种容器，会自动按其滚动方向排列…...

编程日记 2025/5/1 21:09:10

C++设计模式外观模式（Facade）

什么是桥接模式？ 桥接模式（Bridge Pattern）是一种结构型设计模式，它的核心目的是解耦抽象部分和实现部分，让它们可以独立变化。在简单的描述中，桥接模式可以让你在不修改原有代码的情况下，分别…...

编程日记 2025/5/5 6:35:58

《Python基础》之Numpy库

目录简介一、创建数组 1、根据列表创建数组 2、创建全0数组 3、创建全1数组 4、创建单位矩阵 5、创建随机数数组二、查看数组的属性三、数组的操作 1、索引和切片 2、变形 3、拼接 （1）、vstack() 纵向拼接 （2）、hs…...

编程日记 2025/5/3 4:32:12

Python异步编程与API调用：提高效率与性能的实践指南

引言在当今的软件开发领域，异步编程已成为提高应用程序性能和响应能力的关键技术。特别是在处理I/O密集型任务，如API调用时，异步编程能够显著提升效率。本文将通过一个具体的示例——使用Python的asyncio和aiohttp库来异步调用API&#xff…...

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

Zookeeper3.4.14集群安装

Zookeeper3.4.14三节点集群安装为保证集群高可用，Zookeeper 集群的节点数最好是奇数，最少有三个节点，所以这里搭建一个三个节点的集群。(在一个节点模拟三节点，真实的三节点把ip替换一下即可，按照hadoop案件把网络打…...

编程日记 2025/5/6 2:29:08

电机驱动MCU介绍

电机驱动MCU是一种专为电机控制设计的微控制器单元，它集成了先进的控制算法和高性能的功率输出能力。电机驱动MCU采用高性能的处理器核心，具有快速的运算速度和丰富的外设接口。它内置了专业的电机控制算法，包括PID控制、FOC（Fi…...

编程日记 2025/5/3 16:18:01

Python 面向对象编程详解

Python 面向对象编程详解面向对象编程（OOP）是一种编程范式，它使用“对象”来设计软件。在 Python 中，面向对象编程非常强大，允许开发者通过类（class）和对象（object）来模…...

编程日记 2025/5/5 10:24:31

网络技术-不使用K8S情况下哪些方法可搭建服务链编排

在不使用Kubernetes（k8s）（或不使用Docker环境技术的）情况下，搭建服务链编排环境需要依赖其他服务编排和容器化技术，或者采用传统的虚拟机和服务管理方法。以下是一些可能的解决方案： 一、使用其…...

编程日记 2025/5/4 12:54:06

JVM_总结详解

1、CPU和内存的交互了解jvm内存模型前，了解下cpu和计算机内存的交互情况。【因为Java虚拟机内存模型定义的访问操作与计算机十分相似】有篇很棒的文章，从cpu讲到内存模型:[什么是java内存模型？] 在计算机中，cpu和内存的交互最…...

编程日记 2025/5/2 14:06:25

go语言 Pool实现资源池管理数据库连接资源或其他常用需要共享的资源

go Pool Pool用于展示如何使用有缓冲的通道实现资源池，来管理可以在任意数量的goroutine之间共享及独立使用的资源。这种模式在需要共享一组静态资源的情况（如共享数据库连接或者内存缓冲区）下非常有用。如果goroutine需要从池里得到这些资…...

编程日记 2025/5/2 0:41:02

初级数据结构——邻接表

目录前言一、定义与结构二、特点与性质三、构建方式四、操作与应用五、代码模版六、经典例题[1.——LCP 07. 传递信息](https://leetcode.cn/problems/chuan-di-xin-xi/description/)代码题解 [2.——547. 省份数量](https://leetcode.cn/problems/number-of-provinces/)代码题…...

编程日记 2025/4/30 16:58:18

思维导图+实现一个登录窗口界面

QQ2024122-205851 import sys from PyQt6.QtGui import QIcon, QPixmap, QMovie from PyQt6.QtWidgets import QApplication, QWidget, QLineEdit, QPushButton, QLabel, QVBoxLayout# 封装我的窗口类 class LoginWidget(QWidget):# 构造函数def __init__(self):# 初始化父类su…...

编程日记 2025/5/6 11:27:57

多级缓存设计实践

缓存是什么？ 缓存技术是一种用于加速数据访问的优化策略。它通过将频繁访问的数据存储在高速存储介质（如内存）中，减少对慢速存储设备（如硬盘或远程服务器）的访问次数，从而提升系统的响应速度和…...

编程日记 2025/4/29 3:35:11

ElasticSearch学习笔记一

目录 1.ElasticSearch-Head如何启动 2.ElasticSearch-Head创建索引 2.1创建索引时的“分片数”和“副本数”是什么意思？ 类比 1：图书馆的书架与备份类比 2：快递分拣中心与包裹副本总结编辑 2.2如何查看现有索引的分片数和备份数 …...

编程日记 2025/5/1 11:13:17

A058-基于Spring Boot的餐饮管理系统的设计与实现

🙊作者简介：在校研究生，拥有计算机专业的研究生开发团队，分享技术代码帮助学生学习，独立完成自己的网站项目。代码可以查看项目链接获取⬇️，记得注明来意哦~🌹 赠送计算机毕业设计600个选题ex…...

编程日记 2025/5/5 11:56:20

代码设计：设计模式：应对变化

文章目录概述1.拆分代码2.解耦3.扩展总结概述代码的设计模式主要为了应对变化三种代码设计中应对变化的方式 1.拆分代码 2.解耦 3.扩展 1.拆分代码减小变化对代码的影响需要拆分代码的几种情况 1.类或方法的代码量巨大，导致代码可读性降低 2.存在复杂的代码，如…...

编程日记 2025/4/23 19:42:16

《Vue 路由导航：打造流畅的单页应用一》

一、Vue Router 简介 Vue Router 是什么？ Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页面应用并实现页面间导航。它基于 Vue 的组件系统构建，通过配置路由将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面…...

编程日记 2025/5/5 9:39:56

【xshell连接失败】

xshell用pem连接失败 Warning: Identity file ”open_api_test.ssh not accessible: No such file or directory. Warning: Identity file open_api_test2.pem not accessible: No such file or directory. Permission denied (publickey,gssapi-keyex,gssapi-with-mic). 搞了半…...

编程日记 2025/5/6 15:28:33

说说Elasticsearch拼写纠错是如何实现的？

大家好，我是锋哥。今天分享关于【说说Elasticsearch拼写纠错是如何实现的？】面试题。希望对大家有帮助； 说说Elasticsearch拼写纠错是如何实现的？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网在 Elasticsearch 中&…...

编程日记 2025/5/6 10:06:42

实例讲解MATLAB绘图坐标轴标签旋转

在进行绘图时需要在图片上添加上做标轴的标签，但是当数据量比较多时，例如一天24小时的数据，这时把每个小时显示在左边轴的标签上，文字内容放不下，因此需要将坐标轴标签旋转一定的角度，这样可以更好在图形上…...

编程日记 2025/5/6 13:14:25