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

CSS底层基础：小白速来

news 文章来源：https://blog.csdn.net/Cwayhome/article/details/144199912 2025/5/17 18:18:48

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

idea中git的将A分支某次提交记录合并到B分支

一 实操案例 1.1 背景描述 在开发过程中&#xff0c;有时候需要将A分支某次提交记录功能合并到B分支上。主要原理用到git的cherry pick功能。 1.2 案例 实现的功能&#xff1a; master分支的11.24提交记录合并到feature_A分支&#xff1b; 1.master分支提交的记录 2.fea…...

编程日记 2024/12/3 22:07:43

华为关键词覆盖应用市场ASO优化覆盖技巧

在我国的消费者群体当中&#xff0c;华为的品牌形象较高&#xff0c;且产品质量过硬&#xff0c;因此用户基数也大。与此同时&#xff0c;随着影响力的增大&#xff0c;华为不断向外扩张&#xff0c;也逐渐成为了海外市场的香饽饽。作为开发者和运营者&#xff0c;我们要认识到…...

编程日记 2024/12/3 22:06:41

蓝桥杯第 23 场 小白入门赛

一、前言 好久没打蓝桥杯官网上的比赛了&#xff0c;回来感受一下&#xff0c;这难度区分度还是挺大的 二、题目总览 三、具体题目 3.1 1. 三体时间【算法赛】 思路 额...签到题 我的代码 // Problem: 1. 三体时间【算法赛】 // Contest: Lanqiao - 第 23 场 小白入门赛 …...

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

rest-assured multiPart上传中文名称文件，文件名乱码

rest-assured是一个基于java语言的REST API测试框架&#xff0c;在使用rest-assured的multipart 上传文件后&#xff0c;后端获取的文件名称乱码。截图如下&#xff1a; 原因是rest-assured multipart/form-data默认的编码格式是US-ASCII&#xff0c;需要设置为UTF-8。 Befo…...

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

CSFramework.EF高级应用： ASP.NETCore/WebApi使用动态代理技术创建多个IDatabase数据库实例

通过DI依赖注入IDatabase扩展接口&#xff0c;在.NET项目中使用多个数据库实例 目录 内容简介创建数据库扩展接口&#xff08;继承IDatabase接口&#xff09;注入IDatabase扩展接口 AddDatabase 扩展方法UseDatabase 扩展方法数据库配置文件 appsettings.json 配置文件Databas…...

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

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

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

编程日记 2024/12/3 21:59:23

Unity网络框架对比 Mirror|FishNet|NGO

在Unity中制作非单机项目常用的免费网络框架&#xff0c;这里选取了三款比较火的网络框架&#xff0c;Mirror、FishNet和Netcode for GameObject(NGO)。 比较了最常用的免费网络解决方案。可能还有值得探索的付费选项。您需要对此进行自己的研究。数据表格更新日志截止到&#…...

编程日记 2024/12/3 21:55:17

深入了解阿里云 OSS：强大的云存储解决方案

在现代互联网应用中&#xff0c;数据存储是一个不可忽视的环节。随着数据量的不断增长&#xff0c;传统的存储方式已经无法满足高速、低成本、大容量的需求。阿里云 OSS&#xff08;对象存储服务&#xff09;作为一种高性能、低成本且具备高度扩展性的云存储服务&#xff0c;已…...

编程日记 2024/12/3 21:54:16

ansible使用说明

将安装包拷贝到主控端主机 在主控端主机安装ansible&#xff0c;sh setup.sh 确认安装成功后&#xff0c;编辑hosts文件&#xff08;按步骤逐个添加主机组&#xff0c;不要一开始全部配置好&#xff09; [site-init]下的主机列表为被控制的主机&#xff08;按照当前ai建模方案…...

编程日记 2024/12/3 21:53:15

Qt 2D绘图之四：绘图中的其他问题

参考文章链接： Qt 2D绘图之四：绘图中的其他问题 重绘事件 前面讲到的所有绘制操作都是在重绘事件处理函数paintEvent()中完成的，是QWidget类中定义的函数。一个重绘事件用来重绘一个部件的全部或者部分区域，下面几个原因中的任意一个都会发生重绘事件： repaint()函数或者…...

编程日记 2024/12/3 21:47:09