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

CSS底层基础：小白速来

news 2025/7/8 13:45:20

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

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/7/1 20:41:53

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/6/20 17:50:34

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/7/8 12:53:45

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2025/7/5 15:17:53

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/7/7 20:47:23

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/7/4 14:40:43

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/7/7 16:25:34

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

编程新知 2025/7/7 19:29:36

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/6/21 2:52:10