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

CSS底层基础：小白速来

news 2025/8/25 16:10:06

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

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/8/24 18:38:30

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/8/24 13:23:03

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/8/22 3:57:22

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/7/7 9:09:17

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

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

编程新知 2025/8/22 5:00:36

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/8/24 22:20:35

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/7/20 15:22:30

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/8 23:32:56

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/7/26 12:16:34

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/8/22 3:42:09