CSS底层基础：小白速来
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通过选择器来指定要应用样式的元素，并定义这些元素的具体样式属性。 基本结构示例： …...
【MySQL 进阶之路】索引概述
第06章_索引 1.什么是索引 索引是存储引擎用于快速找到数据记录的一种数据结构，就好比一本教科书的目录部分，通过目录中找到对应文章的页码，便可快速定位到需要的文章。MySQL中也是一样的道理，进行数据查找时，首先查…...
【C++boost::asio网络编程】有关异步读写api的笔记
异步读写api 异步写操作async_write_someasync_send 异步读操作async_read_someasync_receive 定义一个Session类，主要是为了服务端专门为客户端服务创建的管理类 class Session { public:Session(std::shared_ptr<asio::ip::tcp::socket> socket);void Conn…...
Elasticsearch 的存储与查询
Elasticsearch 的存储与查询 在搜索系统领域，数据的存储与查询是两个最基础且至关重要的环节。Elasticsearch(ES) 在这两方面进行了深度优化，使其在关系型数据库或非关系型数据库中脱颖而出，成为搜索系统的首选。 映射 (Mapping) 映射 (Ma…...
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 …...
SystemUI 下拉框 Build 版本信息去掉
需求及场景 去掉SystemUI 下拉框 Build 版本信息 如下图所示：去掉 12 （SP1A.201812.016) 了解 去掉之前我们先了解它是个什么东西:其实就是一个Build RTM 信息显示 Android_12_build_SP1A.210812.016 修改文件 /frameworks/base/packages/Syste…...
【JS】栈内存、堆内存、事件机制区别、深拷贝、浅拷贝
js中，内存主要分为两种类型：栈内存（stack）、堆内存（heap），两种内存区域在存储和管理数据时有各自的特点和用途。 栈内存 访问顺序 栈是先进后出、后进先出的数据结构，栈内存是内存用…...
如何确保Java爬虫获得1688商品详情数据的准确性
在数字化商业时代，数据的价值日益凸显，尤其是对于电商平台而言。1688作为中国领先的B2B电子商务平台，提供了海量的商品数据接口，这些数据对于市场分析、库存管理、价格策略制定等商业活动至关重要。本文将详细介绍如何使用Java编写…...
【蓝牙通讯】iOS蓝牙开发基础介绍
1. iOS 蓝牙开发基础 在 iOS 中，蓝牙的操作主要是通过 Core Bluetooth 框架来实现。理解 Core Bluetooth 的基本组件和工作原理是学习 iOS 蓝牙开发的第一步。 核心知识点： Core Bluetooth 框架：这是 iOS 系统提供的专门用于蓝牙低功耗&am…...
Vue 90 ，Element 13 ，Vue + Element UI 中 el-switch 使用小细节解析，避免入坑（获取后端的数据类型自动转变）
目录 前言 在开发过程中，我们经常遇到一些看似简单的问题，但有时正是这些细节问题让我们头疼不已。今天，我就来和大家分享一个我在开发过程中遇到的 el-switch 使用的小坑，希望大家在使用时能够避免。 一. 问题背景 二. 问题分…...
echarts的双X轴，父级居中的相关配置
前言：折腾了一个星期，在最后一天中午，都快要放弃了，后来坚持下来，才有下面结果。 这个效果就相当是复合表头，第一行是子级，第二行是父级。 子级是奇数个时，父级label居中很简单&…...
)
RuoYi-Vue部署到Linux服务器(Jar+Nginx)
一、本地环境准备 源码下载、本地Jdk及Node.js环境安装，参考以下文章。 附：RuoYi-Vue下载与运行 二、服务器环境准备 1.安装Jdk 附：JDK8下载安装与配置环境变量(linux) 2.安装MySQL 附：MySQL8免安装版下载安装与配置(linux) 3.安装Redis 附：Redis下载安装与配置(…...
Linux firewalld常用命令
启动防火墙 systemctl start firewalld 停止防火墙 systemctl stop firewalld 防火墙开机自启动 systemctl enable firewalld 禁止防火墙开机自启动 systemctl disable firewalld 检查防火墙的状态 systemctl status firewalld 重新加载防火墙的配置 firewall-cmd -…...
Vue 组件之间的通信方式
Vue.js 中组件之间的通信是构建复杂应用的关键部分。以下是一些常见的Vue组件通信方式： 1. Props 和 Emit（父子组件通信） Props：父组件通过props向子组件传递数据。Emit：子组件通过emit触发事件，向父组件…...
el-select 修改样式
这样漂亮的页面，搭配的却是一个白色风格的下拉框 ，这也过于刺眼。。。 调整后样式为： 灯红酒绿总有人看着眼杂，但将风格统一终究是上上选择。下面来处理这个问题。 分为两部分。 第一部分：是修改触发框的样式 第二部…...
Java项目实战II基于微信小程序的亿家旺生鲜云订单零售系统的设计与实现（开发文档+数据库+源码）
目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发，CSDN平台Java领域新星创作者，专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 随着移动互联网技术的不断…...
)
算法训练营day27(回溯算法03:组合总和,组合总和2,分割回文串)
第七章 回溯算法part03● 39. 组合总和 ● 40.组合总和II ● 131.分割回文串详细布置 39. 组合总和 本题是 集合里元素可以用无数次，那么和组合问题的差别 其实仅在于 startIndex上的控制题目链接/文章讲解：https://programmercarl.com/0039.%E7%BB%84%E…...
【青牛科技】D8331 流量计电路芯片，兼容 CTs，电阻分流器和罗氏线圈传感器
概述： D8331 系列超低功耗混合信号处理器由多种设备组成，具有针对电能表应用的不 同外围设备。它们集成了模拟前端和固定功能 DSP 解决方案与一个增强型 8052 单片 机核心，RTC 和 LCD 驱动程序集成在一个单一部件中。测量内核包括有功、无功…...
R语言森林生态系统结构、功能与稳定性分析与可视化实践高级应用
在生态学研究中，森林生态系统的结构、功能与稳定性是核心研究内容之一。这些方面不仅关系到森林动态变化和物种多样性，还直接影响森林提供的生态服务功能及其应对环境变化的能力。森林生态系统的结构主要包括物种组成、树种多样性、树木的空间分布与密度…...
【IntelliJ IDEA 中 Run Dashboard 不显示端口号问题解决办法】
IntelliJ IDEA 中 Run Dashboard 不显示端口号问题解决办法 解决 IntelliJ IDEA Run Dashboard 不显示端口号问题方法一：删除临时文件方法二：设置启动参数方法三：编辑 Run/Debug Configurations方法四：检查端口占用情况方法五&…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
)
Angular微前端架构：Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例，其中使用的是 Module Federation 和 npx-build-plus 实现了主应用（Shell）与子应用（Remote）的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域，无损检测（NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统，以非接触式光学麦克风技术为核心，打破传统检测瓶颈，为半导体、航空航天、汽车制造等行业提供了高灵敏…...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中，return 语句的使用是另一个关键概念，它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别：不同层级的事件处理 方…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力：训练时既扩散也回归，但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说，在叠衣服的过程中，我会带着团队对比各种模型、方法、策略，毕竟针对各个场景始终寻找更优的解决方案，是我个人和我司「七月在线」的职责之一 且个人认为，…...
VisualXML全新升级 | 新增数据库编辑功能
VisualXML是一个功能强大的网络总线设计工具，专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑（如DBC、LDF、ARXML、HEX等），并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下： avformat_open_input 精简后的代码如下： int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...