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

CSS 创建与使用学习笔记

article 2026/2/6 20:33:52

一、CSS 的作用

CSS（层叠样式表）用于控制 HTML 文档的样式和布局。当浏览器读取一个样式表时，它会根据样式表中的规则来格式化 HTML 文档，从而实现页面的美化和布局调整。

二、插入样式表的方法

CSS 可以通过以下三种方式插入到 HTML 文档中：

（一）外部样式表（External style sheet）

外部样式表是将 CSS 代码保存在一个单独的 .css 文件中，然后通过 HTML 文档中的 <link> 标签引入。这种方式适用于需要在多个页面中应用相同样式的情况，便于维护和更新。

示例代码

HTML复制

<head><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

预览

在 mystyle.css 文件中，可以定义如下样式：

css复制

hr { color: sienna; }
p { margin-left: 20px; }
body { background-image: url("/images/back40.gif"); }

注意：在属性值与单位之间不要留有空格，例如正确的写法是 margin-left: 20px，而不是 margin-left: 20 px。

（二）内部样式表（Internal style sheet）

内部样式表是将 CSS 代码放在 HTML 文档的 <head> 部分的 <style> 标签中。这种方式适用于单个文档需要特殊样式的情况。

示例代码

HTML复制

<head><style>hr { color: sienna; }p { margin-left: 20px; }body { background-image: url("images/back40.gif"); }</style>
</head>

预览

（三）内联样式（Inline style）

内联样式是直接在 HTML 元素的 style 属性中定义样式。这种方式会将表现和内容混杂在一起，损失样式表的许多优势，但适用于样式仅需要在一个元素上应用一次的情况。

示例代码

HTML复制

<p style="color: sienna; margin-left: 20px;">这是一个段落。</p>

预览

三、多重样式的优先级

当不同的样式表或样式定义冲突时，CSS 会根据以下优先级规则来决定最终应用的样式：

内联样式（Inline style）
内部样式表（Internal style sheet）
外部样式表（External style sheet）
浏览器默认样式

示例

假设外部样式表 style.css 中定义了如下样式：

css复制

h3 {color: blue;
}

而内部样式表定义了如下样式：

css复制

h3 {color: green;
}

那么在 HTML 文档中，<h3> 元素的样式将取决于它们的定义顺序：

如果外部样式表在内部样式表之前定义，则 <h3> 元素的颜色将是绿色（内部样式表的规则覆盖外部样式表的规则）。
如果外部样式表在内部样式表之后定义，则 <h3> 元素的颜色将是蓝色（外部样式表的规则覆盖内部样式表的规则）。

示例代码

HTML复制

<head><link rel="stylesheet" type="text/css" href="style.css"><style>h3 { color: green; }</style>
</head>
<body><h3>显示绿色，是内部样式</h3>
</body>

预览

如果外部样式表在内部样式表之后定义：

HTML复制

<head><style>h3 { color: green; }</style><link rel="stylesheet" type="text/css" href="style.css">
</head>
<body><h3>显示蓝色，是外部样式</h3>
</body>

CSS 创建与使用学习笔记

一、CSS 的作用 CSS（层叠样式表）用于控制 HTML 文档的样式和布局。当浏览器读取一个样式表时，它会根据样式表中的规则来格式化 HTML 文档，从而实现页面的美化和布局调整。二、插入样式表的方法 CSS 可以通过以下三种方式插入到…...

编程日记 2026/1/26 4:08:08

使用Expo框架开发APP——详细教程

在移动应用开发日益普及的今天，跨平台开发工具越来越受到开发者青睐。Expo 是基于 React Native 的一整套工具和服务，它能够大幅降低原生开发的门槛，让开发者只需关注业务逻辑和界面实现，而不用纠结于复杂的原生配置。本文将从零开…...

编程日记 2026/1/15 14:03:53

Android Dagger 2 框架的注解模块深入剖析 (一)

本人掘金号，欢迎点击关注：https://juejin.cn/user/4406498335701950 一、引言在 Android 开发中，依赖注入（Dependency Injection，简称 DI）是一种强大的设计模式，它能够有效降低代码的耦合度&…...

编程日记 2025/12/26 20:33:05

流媒体协议基础

流媒体协议基础全文-流媒体协议基础全文大纲流媒体协议分类 RTMP：应用层协议，依赖Flash播放器插件，支持推、拉流。RTSP：应用层控制协议，用于播放、暂停、终止等指令控制，支持推、拉流。RTP&#xff1a…...

编程日记 2026/2/5 23:01:19

Java全栈面试宝典：线程安全机制与Spring Boot核心原理深度解析

目录一、Java线程安全核心原理 🔥 问题1：线程安全的三要素与解决方案线程安全风险模型线程安全三要素 synchronized解决方案 🔥 问题2：synchronized底层实现全解析对象内存布局 Mark Word结构（64位系统&…...

编程日记 2026/2/5 20:28:55

Linux开发工具——apt

📝前言： 在之前我们已经讲解了有关的Linux基础命令和Linux权限的问题，这篇文章我们来讲讲Linux的开发工具——apt。 🎬个人简介：努力学习ing 📋个人专栏：Linux 🎀CSDN主页愚润求学 …...

编程日记 2026/2/5 3:23:35

2025-4-4-python算法题（OD算法题-最长合法表达式）

文章目录几个常用库函数的使用1. functools 模块2. sys 模块3. collections 模块4. copy 模块5. itertools 模块6. re 模块7. math 模块 OD算法题-最长合法表达式学习python的内置函数 eval(expr) 几个常用库函数的使用 import functools import sys from collections import…...

编程日记 2026/1/23 20:49:55

嵌入式——Linux系统的使用以及编程练习

目录一、Linux的进程、线程概念 （一）命令控制进程 1、命令查看各进程的编号pid 2、命令终止一个进程pid 二、初识Linux系统的虚拟机内存管理 （一）虚拟机内存管理 （二）与STM32内存管理对比三、Lin…...

编程日记 2026/2/2 20:19:56

（回滚莫队）洛谷 P10268 符卡对决题解

居然还没调出来？感觉是数据类型的问题，真是吓人。先把思路写一下吧。题意灵梦一共有 n n n 张符卡，每张卡都有一个能力值，对于第 i i i 张卡，它的能力值为 a i a_i ai，现在她想从中选出两张符卡并…...

编程日记 2026/1/21 23:54:36

在MacOS 10.15上使用MongoDB

这次是在MacOS 10.15上使用MongoDB。先在豆包问支持MacOS 10.15的MongoDB最新版是什么，答案是MongoDB 5.0。抱着谨慎怀疑的态度去官方网站查询了一下，答案如下 MongoDB 7.x支持的最低版本MacOS是11MongoDB 6.x支持的最低版本MacOS是10.14 又找deepsee…...

编程日记 2026/2/1 20:17:42

思二勋：未来所有的业务都将生于AI、长于AI、成于AI

每个时代都有其标志性的技术，每个技术的产生或极大地解放了个体的劳动力，提高了个体与组织之间的协作效率，或极大地促进了生产效率或使用体验，或将极大地优化了资源配置和供需匹配效率，从而提高人们的生活水平。从青铜…...

编程日记 2026/2/1 13:52:35

混合专家模型（MoE）：助力大模型实现高效计算

引言近年来，大模型的参数规模不断攀升，如何在保证性能的前提下降低计算成本和显存消耗，成为业界关注的重点问题。混合专家模型（Mixture of Experts, MoE）应运而生，通过“分而治之”的设计理念&#xff0c…...

编程日记 2026/2/1 13:52:36

【学习笔记】计算机网络（七）—— 网络安全

第7章网络安全文章目录第7章网络安全7.1 网络安全问题概述7.1.1 计算机网络面临的安全性威胁7.1.2 安全的计算机网络7.1.3 数据加密模型 7.2 两类密码体制7.2.1 对称密钥密码体制7.2.2 公钥密码体制 7.3 鉴别7.3.1 报文鉴别7.3.2 实体鉴别 7.4 密钥分配7.4.1 对称密钥的分配…...

编程日记 2026/2/1 13:52:36

预测分析（四）：面向预测分析的神经网络简介

文章目录面向预测分析的神经网络简介神经网络模型1. 基本概念2. 前馈神经网络3. 常见激活函数4. 循环神经网络（RNN）5. 卷积神经网络（CNN） MPL结构工作原理激活函数训练方法基于神经网络的回归——以钻石为例构建预测钻石价格的M…...

编程日记 2026/2/1 13:52:37

Debezium日常分享系列之：Debezium 3.1.0.Final发布

Debezium日常分享系列之：Debezium 3.1.0.Final发布重大改变Debezium Core事件源块现在带有版本号稀疏向量逻辑类型重命名更改了模式历史配置的默认值 Debezium Storage moduleJDBC 存储配置命名约定变更 Debezium for Oracle多个 Oracle LogMiner JMX 指标被移除重…...

编程日记 2026/1/16 17:26:28

LLaMA-Factory大模型微调全流程指南

该文档为LLaMA-Factory大模型微调提供了完整的技术指导，涵盖了从环境搭建到模型训练、推理和合并模型的全流程，适用于需要进行大模型预训练和微调的技术人员。一、docker 容器服务请参考如下资料制作 docker 容器服务，其中，挂…...

编程日记 2026/2/2 22:15:44

为什么芯片半导体行业需要全星APQP系统？--行业研发项目管理软件系统

为什么芯片半导体行业需要全星APQP系统？--行业研发项目管理软件系统在芯片半导体行业，严格的合规性要求、复杂的供应链协同及高精度质量管理是核心挑战。全星研发项目管理APQP系统专为高门槛制造业设计，深度融合APQP五大阶段（从设…...

编程日记 2026/2/1 13:52:46

Linux make 检查依赖文件更新的原理

1. 文件的时间戳 make 主要依靠文件的时间戳来判断依赖文件是否有更新。每个文件在文件系统中都有一个时间戳，记录了文件的三种重要时间： 访问时间（Accesstime）：文件最后一次被访问的时间。修改时间&…...

编程日记 2026/1/31 9:05:46

vulkanscenegraph显示倾斜模型(5.6)-vsg::RenderGraph的创建

前言上一章深入分析了vsg::CommandGraph的创建过程及其通过子场景遍历实现Vulkan命令录制的机制。本章将在该基础上，进一步探讨Vulkan命令录制中的核心封装——vsg::RenderGraph。作为渲染流程的关键组件，RenderGraph封装了vkCmdBeginRenderPass和vkCmd…...

编程日记 2026/2/1 13:52:41

解锁 Python 多线程的潜力：全局解释器锁（GIL）深度解析与优化之道

解锁 Python 多线程的潜力：全局解释器锁（GIL）深度解析与优化之道引言 Python，这门以简洁和优雅著称的编程语言，自诞生以来在 Web 开发、数据分析、人工智能等领域大放异彩。然而，Python 的多线程性能却常被诟病，其核心原因之一便是全局解释器锁（Global Interpreter …...

编程日记 2026/1/26 7:26:37

基于阿里云可观测产品构建企业级告警体系的通用路径与最佳实践

前言 1.1 日常生活中的告警任何连续稳定运行的生产系统都离不开有效的监控与报警机制。通过监控，我们可以实时掌握系统和业务的运行状态；而报警则帮助我们及时发现并响应监控指标及业务中的异常情况。在日常生活中，我们也经常遇到各种各样…...

编程日记 2026/2/1 13:52:40

二叉树的ACM板子（自用）

package 二叉树的中序遍历;import java.util.*;// 定义二叉树节点 class TreeNode {int val; // 节点值TreeNode left; // 左子节点TreeNode right; // 右子节点// 构造函数TreeNode(int x) {val x;} }public class DMain {// 构建二叉树（层序遍历方式&…...

编程日记 2026/2/1 13:52:39

架构思维：查询分离 - 表数据量大查询缓慢的优化方案

文章目录 Pre引言案例何谓查询分离？何种场景下使用查询分离？查询分离实现思路1. 如何触发查询分离？方式一： 修改业务代码：在写入常规数据后，同步建立查询数据。方式二：修改业务代码：…...

编程日记 2026/2/1 13:52:43

Qt进阶开发：QFileSystemModel的使用

文章目录一、QFileSystemModel的基本介绍二、QFileSystemModel的基本使用2.1 在 QTreeView 中使用2.2 在 QListView 中使用2.3 在 QTableView 中使用三、QFileSystemModel的常用API3.1 设置根目录3.2 过滤文件3.2.1 仅显示文件3.2.2 只显示特定后缀的文件3.2.3 只显示目录四…...

编程日记 2026/2/1 15:27:54