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

【web前端开发】CSS--CSS简介及其编写位置（上）

article 2026/3/23 10:10:54

1、CSS简介

（1）CSS的全称为：层叠式样式表（Cascading  Style   Sheets）

（2）CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽度等等。

剖析层叠式样式表：

层叠：一层一层“涂”上去

样式：文字大小、背景颜色、元素宽度等等

表：列表

简单理解：CSS可以美化HTML，让HTML更漂亮。

核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。

2、CSS的编写位置

（1）行内样式

示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS_行内样式</title>
</head>
<body><h1 style="color:green;font-size: 60px;">好好学习，天天向上</h1>
</body></html>

结果：

所谓的行内样式就是与HTML的标签搭配使用。

在HTML中，名值对之间用“=”相连；

例如：

而在CSS中，名与值之间用“：”相连，末尾加";"

总结：

（1）CSS的行内样式是写在标签的style属性中（行内样式又称：内联样式）

（2）语法：

<h1 style="color: blue;">锄禾日当午</h1>
<h1 style="color: red;">汗滴禾下土</h1>

运行结果：

（3）注意点：

1))style属性的值不能随便写，写时要符合CSS语法规范：是名：值；的形式

2))行内样式表，只能控制当前标签的样式，对其他标签无效

例如：

存在的问题:

书写繁琐，样式不能复用，并且没有体现出结构与样式分离的思想，不推荐大量使用，只有对当前元素添加样式时，才偶尔使用。

相关文章：

【web前端开发】CSS--CSS简介及其编写位置（上）

1、CSS简介 &#xff08;1&#xff09;CSS的全称为&#xff1a;层叠式样式表&#xff08;Cascading Style Sheets&#xff09; &#xff08;2&#xff09;CSS也是一种标记语言&#xff0c;用于给HTML结构设置样式&#xff0c;例如&#xff1a;文字大小、颜色、元素宽度等等…...

编程日记 2026/3/21 12:39:57

云原生时代的技术桥梁

在数字化转型的大潮中&#xff0c;企业面临着数据孤岛、应用间集成复杂、高成本与低效率等问题。这些问题不仅阻碍了企业内部信息的流通和资源的共享&#xff0c;也影响了企业对外部市场变化的响应速度。当前&#xff0c;这一转型过程从IT角度来看&#xff0c;已然迈入云原生时…...

编程日记 2026/3/17 6:11:45

【数据结构】什么是栈||栈的经典应用||分治递归||斐波那契问题和归并算法||递归实现||顺序栈和链栈的区分

文章目录 &#x1f967;栈的初步理解&#xff1a;&#x1f967;易错&#xff1a;如何判断栈满&#x1f967;栈满理解&#x1f967;栈的基本运算&#x1f4da;栈操作的伪代码逻辑&#xff08;顺序和链栈&#xff09;&#x1f4d5;顺序栈运算实现&#xff1a;顺序栈的表示&#x…...

编程日记 2026/3/21 14:33:11

雷池WAF的为什么选择基于Docker

Docker 是一种开源的容器化平台&#xff0c;可以帮助开发人员将应用程序及其所有依赖项打包到一个称为容器的独立、可移植的环境中。Docker 的核心概念包括以下几点&#xff1a; 容器&#xff1a;Docker 使用容器来封装应用程序及其依赖项&#xff0c;使其能够在任何环境中都能…...

编程日记 2026/3/19 7:41:18

Ubuntu20.04双系统安装及软件安装（七）：Anaconda3

Ubuntu20.04双系统安装及软件安装&#xff08;七&#xff09;&#xff1a;Anaconda3 打开Anaconda官网&#xff0c;在右侧处填写邮箱&#xff08;要真实有效&#xff01;&#xff09;&#xff0c;然后Submit。会出现如图示的Success界面。 进入填写的邮箱&#xff0c;有一封Ana…...

编程日记 2026/3/10 2:58:30

文件上传漏洞：upload-labs靶场11-20

目录 pass-11 pass-12 pass-13 pass-14 pass-15 pass-16 pass-17 pass-18 pass-19 pass-20 pass-11 分析源代码 &#xff0c;发现上传文件的存放路径可控 if(isset($_POST[submit])){$ext_arr array(jpg,png,gif);$file_ext substr($_FILES[upload_file][name],st…...

编程日记 2026/2/28 16:01:01

HTTP协议（20250305）

1. 万维网 WWW(World Wide Web)世界范围内的&#xff0c;联机式的信息储藏所&#xff0c;万维网解决了获取互联网上的数据时需要解决的以下问题&#xff1a; 怎样标识分布在整个互联网上的文档 URL用什么样的协议实现万维网上的各种链接 HTTP怎么使用户能够方便的查看文档数…...

编程日记 2026/3/23 4:40:45

Qt中txt文件输出为PDF格式

main.cpp PdfReportGenerator pdfReportGenerator;// 加载中文字体if (QFontDatabase::addApplicationFont(":/new/prefix1/simsun.ttf") -1) {QMessageBox::warning(nullptr, "警告", "无法加载中文字体");}// 解析日志文件QVector<LogEntr…...

编程日记 2026/3/23 7:06:07

《大语言模型的原理发展与应用》：此文为AI自动生成

《大语言模型的原理发展与应用》&#xff1a;此文为AI自动生成 一、引言&#xff1a;大语言模型&#xff0c;AI 时代的 “新引擎” 在当今数字化浪潮中&#xff0c;大语言模型宛如一颗璀璨的明星&#xff0c;照亮了人工智能发展的道路&#xff0c;成为推动各领域变革的核心驱…...

编程日记 2026/3/15 20:20:07

FPGA 高速接口Aurora8B/10B 协议详解与仿真

FPGA 高速接口Aurora8B/10B 协议详解与IP仿真 1 摘要 Aurora 8B/10B 是一种用于高速串行通信的协议&#xff0c;通常用于 FPGA 设计和其他数字通信应用。即一种编码方案&#xff0c;旨在在传输数据时提供可靠性、时钟恢复和错误检测。主要用于在点对点串行链路间移动数据的可…...

编程日记 2026/3/23 4:42:45

大白话Vue 源码

大白话Vue 源码 整体介绍 Vue 源码就像是一个超厉害的“魔法工具箱”&#xff0c;它能帮咱们轻松地做出各种漂亮又好用的网页。这个工具箱里有好几个关键的“魔法道具”&#xff0c;分别是响应式系统、虚拟 DOM、模板编译、组件系统和生命周期钩子&#xff0c;下面咱一个一个…...

编程日记 2026/3/13 22:59:27

grpc工具使用

工具安装 protoc 访问protoc release&#xff0c;根据系统型号&#xff0c;下载对应版本的protoc工具&#xff0c;并将下载到的可执行文件存放于$path中 安装完成后&#xff0c;可通过protoc --version指令校验是否安装成功 protoc --version # 输出&#xff1a; # libprotoc…...

编程日记 2026/3/21 3:25:58

ESP8266连接网络实时上传数据

要实现这个功能，可以按照以下步骤进行编程。我们将使用Arduino IDE来编写代码，并结合ESP8266的WiFi库、MQTT库以及Web服务器库来实现。 1. 准备工作 硬件：ESP8266开发板、温度传感器（如DS18B20）、显示屏（如OLED）。软件：Arduino IDE、ESP8266库、PubSubClient库（MQTT）…...

编程日记 2026/3/9 4:52:22

【手撕算法】支持向量机（SVM）从入门到实战：数学推导与核技巧揭秘

摘要 支持向量机&#xff08;SVM&#xff09;是机器学习中的经典算法&#xff01;本文将深入解析最大间隔分类原理&#xff0c;手撕对偶问题推导过程&#xff0c;并实战实现非线性分类与图像识别。文中附《统计学习公式手册》及SVM调参指南&#xff0c;助力你掌握这一核心算法…...

编程日记 2026/3/1 16:14:40

定制化开发的WooCommerce独立站商城更安全

定制化开发的WooCommerce独立站商城在安全性、交易风险控制以及整体用户体验方面有显著优势。以下是定制化开发在这些方面的具体表现&#xff1a; 1. 安全性更高 定制化开发允许开发者从底层架构开始设计和优化&#xff0c;确保网站的安全性。以下是具体表现&#xff1a; (1…...

编程日记 2026/2/21 3:42:22

AORO P9000 PRO三防平板携手RTK高精度定位，电力巡检效率倍增

电网系统覆盖幅员辽阔&#xff0c;每年因设备故障导致的巡检耗时超过百万工日。传统巡检模式受限于定位误差、设备防护不足和作业效率低下三大核心痛点&#xff0c;亟需智能化工具的突破性革新。为了满足这一需求&#xff0c;遨游通讯推出AORO P9000 PRO三防平板&#xff0c;以…...

编程日记 2026/3/22 20:48:19

游戏引擎学习第135天

仓库:https://gitee.com/mrxiao_com/2d_game_3 回顾 game_asset.cpp 的创建 在开发过程中&#xff0c;不使用任何现成的游戏引擎或第三方库&#xff0c;而是直接基于 Windows 进行开发&#xff0c;因为 Windows 目前仍然是游戏的标准平台&#xff0c;因此首先在这个环境中进行…...

编程日记 2026/3/14 23:56:52

安全渗透测试的全面解析与实践

引言 随着网络安全威胁的日益增加&#xff0c;企业和组织对自身系统的安全性提出了更高的要求。安全渗透测试&#xff08;Penetration Testing&#xff0c;简称渗透测试&#xff09;作为主动发现和修复系统安全漏洞的重要手段&#xff0c;已成为安全防护体系中的关键环节。本文…...

编程日记 2026/2/15 23:53:02

关联封号率降70%！2025最新IP隔离方案实操手册

高效运营安全防护&#xff0c;跨境卖家必看的风险规避指南 跨境账号管理的核心挑战&#xff1a;关联封号风险激增 2024年&#xff0c;随着全球电商平台对账号合规的审查日益严苛&#xff0c;“关联封号”已成为跨境卖家最头疼的问题之一。无论是同一IP登录多账号、员工操作失误…...

编程日记 2026/3/16 0:20:40

【深度学习CV】【图像分类】从CNN(卷积神经网络)、ResNet迁移学习到GPU高效训练优化【案例代码】详解

摘要 本文分类使用的是resNet34,什么不用yolo v8&#xff0c;yolo v10系列,虽然他们也可以分类&#xff0c;因为yolo系列模型不纯粹&#xff0c;里面包含了目标检测的架构&#xff0c;所以分类使用的是resNet 本文详细介绍了三种不同的方法来训练卷积神经网络进行 CIFAR-10 图…...

编程日记 2026/3/13 18:44:54

【Java基础-51.5】字节流与字符流的转换：Java I/O 中的桥梁

在 Java 的 I/O 操作中&#xff0c;字节流和字符流是两种常见的数据处理方式。字节流以字节为单位进行读写&#xff0c;适合处理二进制数据&#xff08;如图片、音频等&#xff09;&#xff1b;而字符流以字符为单位进行读写&#xff0c;适合处理文本数据。在实际开发中&#x…...

编程日记 2026/2/18 3:59:21

如何设置爬虫的访问频率？

设置爬虫的访问频率是确保爬虫行为合法且不给目标网站服务器造成过大压力的重要措施。合理的访问频率可以有效避免被网站封禁IP&#xff0c;同时也能保证爬虫的效率。以下是一些设置爬虫访问频率的方法和策略&#xff1a; 一、设置请求间隔 &#xff08;一&#xff09;固定间隔…...

编程日记 2026/3/16 7:24:54

如何排查服务器内存泄漏问题

服务器内存泄漏是一种常见的问题&#xff0c;可能导致系统性能下降甚至系统崩溃。以下是一般情况下用于排查服务器内存泄漏问题的步骤&#xff1a; 排查服务器内存泄漏问题的步骤&#xff1a; 监控系统资源&#xff1a; 使用系统监控工具&#xff08;如top、htop、free&#x…...

编程日记 2026/3/19 20:27:22

Ubuntu20.04双系统安装及软件安装（九）：谷歌浏览器

Ubuntu20.04双系统安装及软件安装&#xff08;九&#xff09;&#xff1a;谷歌浏览器 打开终端&#xff0c;下载谷歌浏览器软件包&#xff1a; wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb下载完成后直接在原终端执行&#xff1a; sudo…...

编程日记 2026/3/18 11:40:24

有关Java中的集合(1):List＜T＞和Set＜T＞

学习目标 核心掌握List集合了解Set集合 1.List<T> ● java.util.List。有序列表。 ● List集合元素的特点&#xff1a;有序表示存取有序&#xff08;因为有索引&#xff09;而且可以重复 ● List常用实现类&#xff1a; ArrayList、LinkedList、Vector等 1.1 常用方法…...

编程日记 2026/3/18 16:02:21

【C++STL之vector】vector容器浅析

文章目录 &#x1f31f; 深入探索C vector&#xff1a;从青铜到王者的动态数组进阶指南 &#x1f31f;&#x1f680; 开篇&#xff1a;为什么vector是C程序员的瑞士军刀&#xff1f;&#x1f50d; 一、vector的本质解密&#xff1a;不只是智能数组那么简单1.1 动态数组的华丽蜕…...

编程日记 2026/3/18 8:49:24

如何通过卷积神经网络（CNN）有效地提取图像的局部特征，并在CIFAR-10数据集上实现高精度的分类？

目录 1. CNN 提取图像局部特征的原理 2. 在 CIFAR - 10 数据集上实现高精度分类的步骤 2.1 数据准备 2.2 构建 CNN 模型 2.3 定义损失函数和优化器 2.4 训练模型 2.5 测试模型 3. 提高分类精度的技巧 卷积神经网络&#xff08;Convolutional Neural Network, CNN&#…...

编程日记 2026/2/15 4:04:33

Redis的持久化-RDBAOF

文章目录 一、 RDB1. 触发机制2. 流程说明3. RDB 文件的处理4. RDB 的优缺点 二、AOF1. 使用 AOF2. 命令写⼊3. 文件同步4. 重写机制5 启动时数据恢复 一、 RDB RDB 持久化是把当前进程数据生成快照保存到硬盘的过程&#xff0c;触发 RDB 持久化过程分为手动触发和自动触发。 …...

编程日记 2026/3/17 19:39:56

Redis 的几个热点知识

前言 Redis 是一款内存级的数据库&#xff0c;凭借其卓越的性能&#xff0c;几乎成为每位开发者的标配工具。 虽然 Redis 包含大量需要掌握的知识&#xff0c;但其中的热点知识并不多。今天&#xff0c;『知行』就和大家分享一些 Redis 中的热点知识。 Redis 数据结构 Redis…...

编程日记 2026/3/18 6:35:51

Rust WebAssembly 入门教程

一、开发环境搭建 1. 基础工具安装 # 安装 Rust curl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh# 安装 wasm-pack cargo install wasm-pack# 安装开发服务器 cargo install basic-http-server# 安装文件监听工具 cargo install cargo-watch2. VSCode 插件安装…...

编程日记 2026/2/16 1:24:10