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

CSS底层基础：小白速来

news 2026/4/1 12:09:24

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文档样式的语言。它使得开发者能够控制网页的布局和外观&#xff0c;包括字体、颜色、间距等。CSS通过选择器来指定要应用样式的元素&#xff0c;并定义这些元素的具体样式属性。 基本结构示例&#xff1a; …...

编程日记 2024/12/3 22:51:56

【MySQL 进阶之路】索引概述

第06章_索引 1.什么是索引 索引是存储引擎用于快速找到数据记录的一种数据结构&#xff0c;就好比一本教科书的目录部分&#xff0c;通过目录中找到对应文章的页码&#xff0c;便可快速定位到需要的文章。MySQL中也是一样的道理&#xff0c;进行数据查找时&#xff0c;首先查…...

编程日记 2024/12/3 22:48:54

【C++boost::asio网络编程】有关异步读写api的笔记

异步读写api 异步写操作async_write_someasync_send 异步读操作async_read_someasync_receive 定义一个Session类&#xff0c;主要是为了服务端专门为客户端服务创建的管理类 class Session { public:Session(std::shared_ptr<asio::ip::tcp::socket> socket);void Conn…...

编程日记 2024/12/3 22:47:53

Elasticsearch 的存储与查询

Elasticsearch 的存储与查询 在搜索系统领域&#xff0c;数据的存储与查询是两个最基础且至关重要的环节。Elasticsearch(ES) 在这两方面进行了深度优化&#xff0c;使其在关系型数据库或非关系型数据库中脱颖而出&#xff0c;成为搜索系统的首选。 映射 (Mapping) 映射 (Ma…...

编程日记 2024/12/3 22:46:51

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

按照如上配置&#xff0c;用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&#xff0c;再经过R2 &#xf…...

编程日记 2024/12/3 22:42:46

SystemUI 下拉框 Build 版本信息去掉

需求及场景 去掉SystemUI 下拉框 Build 版本信息 如下图所示&#xff1a;去掉 12 &#xff08;SP1A.201812.016) 了解 去掉之前我们先了解它是个什么东西:其实就是一个Build RTM 信息显示 Android_12_build_SP1A.210812.016 修改文件 /frameworks/base/packages/Syste…...

编程日记 2024/12/3 22:40:42

【JS】栈内存、堆内存、事件机制区别、深拷贝、浅拷贝

js中&#xff0c;内存主要分为两种类型&#xff1a;栈内存&#xff08;stack&#xff09;、堆内存&#xff08;heap&#xff09;&#xff0c;两种内存区域在存储和管理数据时有各自的特点和用途。 栈内存 访问顺序 栈是先进后出、后进先出的数据结构&#xff0c;栈内存是内存用…...

编程日记 2024/12/3 22:35:36

如何确保Java爬虫获得1688商品详情数据的准确性

在数字化商业时代&#xff0c;数据的价值日益凸显&#xff0c;尤其是对于电商平台而言。1688作为中国领先的B2B电子商务平台&#xff0c;提供了海量的商品数据接口&#xff0c;这些数据对于市场分析、库存管理、价格策略制定等商业活动至关重要。本文将详细介绍如何使用Java编写…...

编程日记 2024/12/3 22:34:34

【蓝牙通讯】iOS蓝牙开发基础介绍

1. iOS 蓝牙开发基础 在 iOS 中&#xff0c;蓝牙的操作主要是通过 Core Bluetooth 框架来实现。理解 Core Bluetooth 的基本组件和工作原理是学习 iOS 蓝牙开发的第一步。 核心知识点&#xff1a; Core Bluetooth 框架&#xff1a;这是 iOS 系统提供的专门用于蓝牙低功耗&am…...

编程日记 2024/12/3 22:33:32

Vue 90 ，Element 13 ，Vue + Element UI 中 el-switch 使用小细节解析，避免入坑（获取后端的数据类型自动转变）

目录 前言 在开发过程中&#xff0c;我们经常遇到一些看似简单的问题&#xff0c;但有时正是这些细节问题让我们头疼不已。今天&#xff0c;我就来和大家分享一个我在开发过程中遇到的 el-switch 使用的小坑&#xff0c;希望大家在使用时能够避免。 一. 问题背景 二. 问题分…...

编程日记 2024/12/3 22:25:20

echarts的双X轴，父级居中的相关配置

前言&#xff1a;折腾了一个星期&#xff0c;在最后一天中午&#xff0c;都快要放弃了&#xff0c;后来坚持下来&#xff0c;才有下面结果。 这个效果就相当是复合表头&#xff0c;第一行是子级&#xff0c;第二行是父级。 子级是奇数个时&#xff0c;父级label居中很简单&…...

编程日记 2024/12/3 22:23:18

RuoYi-Vue部署到Linux服务器(Jar+Nginx)

一、本地环境准备 源码下载、本地Jdk及Node.js环境安装，参考以下文章。 附：RuoYi-Vue下载与运行 二、服务器环境准备 1.安装Jdk 附：JDK8下载安装与配置环境变量(linux) 2.安装MySQL 附：MySQL8免安装版下载安装与配置(linux) 3.安装Redis 附：Redis下载安装与配置(…...

编程日记 2024/12/3 22:21:14

Linux firewalld常用命令

启动防火墙 systemctl start firewalld 停止防火墙 systemctl stop firewalld 防火墙开机自启动 systemctl enable firewalld 禁止防火墙开机自启动 systemctl disable firewalld 检查防火墙的状态 systemctl status firewalld 重新加载防火墙的配置 firewall-cmd -…...

编程日记 2024/12/3 22:20:12

Vue 组件之间的通信方式

Vue.js 中组件之间的通信是构建复杂应用的关键部分。以下是一些常见的Vue组件通信方式&#xff1a; 1. Props 和 Emit&#xff08;父子组件通信&#xff09; Props&#xff1a;父组件通过props向子组件传递数据。Emit&#xff1a;子组件通过emit触发事件&#xff0c;向父组件…...

编程日记 2024/12/3 22:19:11

el-select 修改样式

这样漂亮的页面&#xff0c;搭配的却是一个白色风格的下拉框 &#xff0c;这也过于刺眼。。。 调整后样式为&#xff1a; 灯红酒绿总有人看着眼杂&#xff0c;但将风格统一终究是上上选择。下面来处理这个问题。 分为两部分。 第一部分&#xff1a;是修改触发框的样式 第二部…...

编程日记 2024/12/3 22:18:09

Java项目实战II基于微信小程序的亿家旺生鲜云订单零售系统的设计与实现（开发文档+数据库+源码）

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着移动互联网技术的不断…...

编程日记 2024/12/3 22:17:08

算法训练营day27(回溯算法03:组合总和,组合总和2,分割回文串)

第七章 回溯算法part03● 39. 组合总和 ● 40.组合总和II ● 131.分割回文串详细布置 39. 组合总和 本题是 集合里元素可以用无数次&#xff0c;那么和组合问题的差别 其实仅在于 startIndex上的控制题目链接/文章讲解&#xff1a;https://programmercarl.com/0039.%E7%BB%84%E…...

编程日记 2024/12/3 22:12:57

【青牛科技】D8331 流量计电路芯片，兼容 CTs，电阻分流器和罗氏线圈传感器

概述&#xff1a; D8331 系列超低功耗混合信号处理器由多种设备组成&#xff0c;具有针对电能表应用的不 同外围设备。它们集成了模拟前端和固定功能 DSP 解决方案与一个增强型 8052 单片 机核心&#xff0c;RTC 和 LCD 驱动程序集成在一个单一部件中。测量内核包括有功、无功…...

编程日记 2024/12/3 22:10:54

R语言森林生态系统结构、功能与稳定性分析与可视化实践高级应用

在生态学研究中&#xff0c;森林生态系统的结构、功能与稳定性是核心研究内容之一。这些方面不仅关系到森林动态变化和物种多样性&#xff0c;还直接影响森林提供的生态服务功能及其应对环境变化的能力。森林生态系统的结构主要包括物种组成、树种多样性、树木的空间分布与密度…...

编程日记 2024/12/3 22:09:45

【IntelliJ IDEA 中 Run Dashboard 不显示端口号问题解决办法】

IntelliJ IDEA 中 Run Dashboard 不显示端口号问题解决办法 解决 IntelliJ IDEA Run Dashboard 不显示端口号问题方法一&#xff1a;删除临时文件方法二&#xff1a;设置启动参数方法三&#xff1a;编辑 Run/Debug Configurations方法四&#xff1a;检查端口占用情况方法五&…...

编程日记 2024/12/3 22:08:44

新手入门指南：在快马平台用AI生成代码理解云桌面基础概念

今天想和大家分享一个特别适合新手理解云桌面基础概念的实践方法。作为一个刚接触云计算的小白&#xff0c;我最初对"一台主机创建多个云桌面"这个概念也是一头雾水&#xff0c;直到在InsCode(快马)平台上尝试用AI生成代码来模拟这个过程&#xff0c;才真正搞明白其中…...

编程新知 2026/4/1 10:24:50

Win10/Win11磁盘合并全攻略：第三方工具 vs 系统自带功能实测对比

Win10/Win11磁盘合并全攻略&#xff1a;第三方工具 vs 系统自带功能深度解析 当你的电脑硬盘空间告急时&#xff0c;合并磁盘分区可能是最直接的解决方案之一。不同于简单的删除文件或清理垃圾&#xff0c;磁盘合并能从根本上重组存储空间&#xff0c;让系统运行更加流畅。本文…...

编程新知 2026/4/1 9:23:47

还在用老方法显示数据？手把手教你用MFC的CListCtrl打造一个带图标的学生信息查询系统

实战MFC&#xff1a;用CListCtrl构建可视化学生管理系统 在桌面应用开发领域&#xff0c;数据展示一直是用户体验的核心环节。传统的表格控件虽然能完成基本功能&#xff0c;但缺乏视觉层次和交互灵活性。MFC中的CListCtrl控件提供了四种视图模式&#xff0c;特别适合需要同时呈…...

编程新知 2026/4/1 9:15:41

S2-Pro在Windows系统的一键部署与简易客户端开发

S2-Pro在Windows系统的一键部署与简易客户端开发 1. 引言 如果你是一名Windows用户&#xff0c;想要快速体验S2-Pro的强大能力&#xff0c;但又不想折腾复杂的命令行操作&#xff0c;这篇文章就是为你准备的。我们将从零开始&#xff0c;带你完成两个关键步骤&#xff1a; 在…...

编程新知 2026/4/1 8:26:23

基于 LlamaFactory 与 LoRA 微调开源大模型：构建高效文本分类系统的实践指南

1. 为什么选择LlamaFactoryLoRA做文本分类&#xff1f; 最近在做一个政务工单分类项目时&#xff0c;我发现传统BERT模型遇到三个头疼问题&#xff1a;标注成本高&#xff08;需要上万条数据&#xff09;、领域迁移难&#xff08;换个场景就失效&#xff09;、小样本表现差&…...

编程新知 2026/4/1 7:33:21

GLM-4.1V-9B-Base成本优化指南：GPU显存管理与推理性能调优

GLM-4.1V-9B-Base成本优化指南&#xff1a;GPU显存管理与推理性能调优 1. 为什么需要关注大模型推理成本 大模型在带来强大能力的同时&#xff0c;也伴随着高昂的GPU算力成本。GLM-4.1V-9B-Base作为一款9B参数量的视觉语言大模型&#xff0c;在实际部署中常常面临显存不足、推…...

编程新知 2026/4/1 7:31:21

神州数码无线网络（AC+AP）实战部署与优化指南

1. 神州数码ACAP无线网络部署前的规划准备 第一次接触神州数码无线网络方案时&#xff0c;我被它简洁的架构设计惊艳到了。AC&#xff08;无线控制器&#xff09;AP&#xff08;接入点&#xff09;的组网模式&#xff0c;特别适合500-2000平米的中型企业办公环境。但在真正动手…...

编程新知 2026/4/1 6:37:56

GLM-4.1V-9B-Base开发入门：PyCharm专业版连接远程解释器进行模型调试

GLM-4.1V-9B-Base开发入门&#xff1a;PyCharm专业版连接远程解释器进行模型调试 1. 为什么需要远程调试 在AI模型开发过程中&#xff0c;我们经常遇到一个典型问题&#xff1a;本地机器性能不足&#xff0c;无法高效运行大型语言模型。GLM-4.1V-9B-Base这类模型通常需要GPU加…...

编程新知 2026/4/1 6:35:56

忍者像素绘卷：天界画坊Python入门实战，3步搭建AI绘画环境

忍者像素绘卷&#xff1a;天界画坊Python入门实战&#xff0c;3步搭建AI绘画环境 1. 前言&#xff1a;当Python遇见像素艺术 还记得小时候玩过的8-bit游戏吗&#xff1f;那些由一个个小方块组成的像素世界&#xff0c;如今正以全新的方式回归。天界画坊是一个开源的AI绘画工具…...

编程新知 2026/4/1 6:01:20

OffscreenCanvas黑科技：让你的网页动画性能提升300%的配置指南

OffscreenCanvas黑科技&#xff1a;让你的网页动画性能提升300%的配置指南 当网页动画开始卡顿&#xff0c;用户的体验就会直线下降。传统Canvas渲染在主线程执行&#xff0c;复杂的图形运算很容易阻塞UI响应。OffscreenCanvas的出现彻底改变了这一局面——它允许你将绘制逻辑转…...

编程新知 2026/4/1 5:51:09