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

从SS到CSS：探索网页样式设计的奥秘

news 来源：原创 2025/7/7 4:10:34

一、什么是CSS

CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述HTML（超文本标记语言）或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。

从结构和功能的角度来看：

样式与内容分离：这是CSS最核心的概念之一。在传统的HTML中，如果要设置一个段落的样式（如字体颜色、大小、对齐方式等），通常需要直接在HTML标签内部使用一些内嵌的格式属性。例如<p color="red">这是一个红色文字的段落</p>。然而，这种方式存在很多弊端。CSS将这些样式信息从HTML内容中分离出来，单独定义在一个或多个独立的.css文件中。这样HTML就专注于内容的结构本身，而CSS负责样式的设置。
选择器机制：CSS通过选择器来标识要应用样式的HTML元素。常见的选择器有元素选择器（如p表示所有的段落元素）、类选择器（以“.”开头，如.main - title）、ID选择器（以“#”开头，如#header）以及更复杂的关系选择器（如ul li表示位于<ul>中的<li>元素）等。例如：

p {font - size: 16px;
}
.main - title {color: blue;
}
#header {background - color: #333;
}
ul li {margin - bottom: 5px;
}

层叠与继承：“层叠”是CSS名字的来源之一。当一个HTML元素被多个样式规则所涉及时，浏览器会按照一定的规则来决定使用哪个样式。在层叠规则中，后定义的样式往往会覆盖前面定义的同类型样式（除非前面样式有更高的优先级）。同时，CSS中也存在继承机制，一些CSS属性（如文字相关的属性）会从父元素继承到子元素。例如在一个设置了字体大小的<div>中的<p>元素会继承<div>的字体大小属性，除非自己在<p>中重新定义了这个属性。

二、为什么要使用CSS

提高页面的可维护性
- 在大型项目中，HTML文件往往包含大量的标签。如果在每个标签内部通过内嵌样式来设置外观，那么当需要对样式进行修改时，就如同大海捞针。例如，一个网站有成千上万个段落元素，如果想要统一修改字体颜色，使用CSS可以在一个样式表文件中轻松地更改定义语句，而不需要在每个HTML段落标签中去逐个修改。
增强页面的可复用性
- 可以将一套样式定义在一个CSS文件中，然后在多个HTML页面中进行引用。比如一个企业网站，其所有的页面都有统一的品牌风格（相同的导航栏样式、按钮样式等）。通过CSS，可以将这些公共样式定义起来，方便地应用到各个页面，节省大量的开发时间。
提升网页的加载速度
- 当样式内嵌在HTML文件中时，会增加HTML文件的体积。而CSS文件可以被浏览器缓存起来。如果一个用户在访问一个网站的不同页面时，这些页面共享同一个CSS文件，那么这个CSS文件只需要在首次加载时下载，后续页面加载时可以直接使用缓存的文件，减少了网络传输的数据量，从而加快了页面的加载速度。
改善页面布局的灵活性
- CSS提供了丰富的布局方式，如浮动布局、定位布局等。以浮动布局为例，可以轻松地实现元素的左右浮动，组合出各种复杂的布局结构。这种灵活性是传统的HTML内嵌样式难以达到的。

三、如何使用CSS

内联样式（Inline Styles）
- 这是最直接的使用方式，但也是不推荐的方式。在HTML元素内部通过style属性来设置样式。例如：

<p style="color: green; font - size: 18px;">这是一个使用内联样式的段落</p>

这种方式破坏了样式与内容分离的原则，并且不便于维护和修改。

内部样式表（Internal Stylesheet）
- 在HTML文件的<head>标签内部，通过<style>标签来定义CSS样式。例如：

<head><style>h1 {text - align: center;}p {line - height: 1.5;}</style>
</head>

这种方式只在当前HTML文件中有效，适用于单个文件内部样式的管理。

外部样式表（External Stylesheet）
- 最推荐的使用方式。创建一个独立的.css文件，在HTML文件中通过<link>标签来引用这个文件。例如，创建一个名为styles.css的文件，里面有如下样式：

.button {border: 1px solid #ccc;padding: 5px 10px;background - color: #f0f0f0;
}.header - section {background - image: url('header - bg.jpg');height: 200px;
}

然后在HTML文件中引用：

<head><link rel="stylesheet" href="styles.css">
</head>

多个HTML文件可以共享同一个外部样式表，实现样式的统一管理。

在CSS中，对元素样式的定义主要包括以下几个方面：

文本样式：如font - family（字体家族，如Arial, SimSun等）、font - size（字体大小，可以是像素、百分比等不同的度量单位）、font - weight（字体粗细，如normal、bold）、color（文字颜色）等。
容器样式：例如margin（外边距）、padding（内边距）、width和height（宽度和高度）等。
背景样式：background - color（背景颜色）、background - image（背景图片）、background - repeat（背景图片的重复方式，如no - repeat、repeat - x、repeat - y）、background - position（背景图片的位置）等。
列表样式：像list - style - type（列表项的样式类型，如disk、circle、square或者自定义图片）等。

总之，CSS是现代网页开发中不可或缺的一部分。它为提高网页的可维护性、可复用性、加载速度和布局灵活性等方面提供了强大的解决方案。通过合理地使用内联样式、内部样式表和外部样式表等方式，并熟练掌握CSS的各种语法和属性，就可以创建出美观、高效的网页样式。

从SS到CSS：探索网页样式设计的奥秘

一、什么是CSS CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述HTML（超文本标记语言）或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。从结构和功能的…...

编程日记 2025/7/7 4:10:34

[Git] git reset --hard / git reset --soft

git reset --hard 功能：重置索引（暂存区）和工作目录到指定的提交状态。这意味着它会丢弃所有未提交的更改和已暂存的更改。适用场景：当你想要完全放弃当前工作目录中的所有更改并回退到某个特定提交状态时，可以使用这…...

编程日记 2025/7/2 7:54:07

OIDC IdentityServer4》》授权码模式+刷新令牌

认证服务 new Client {ProtocolType "oidc",ClientName "测试",ClientId "zen",//定义客户端 Id 要唯一ClientSecrets { new Secret("abc123zenabres89jijkomnlj".Sha256()) },//Client用来获取token// 混合模式AllowedGrantTyp…...

编程日记 2025/7/4 11:53:44

Sql 创建用户

Sql server 创建用户 Sql server 创建用户SQL MI 创建用户修改其他用户密码 Sql server 创建用户在对应的数据库执行，该用户得到该库的所有权限 test.database.chinacloudapi.cn DB–01 DB–02 创建服务器登录用户 CREATE LOGIN test WITH PASSWORD zDgXI7rsafkak…...

编程日记 2025/7/2 13:50:24

vscode开启调试模式,结合Delve调试器调试golang项目详细步骤

1.前期准备 (1).在vs code中的扩展程序中搜索并安装Go扩展程序 (2).安装 Delve 调试器 go install github.com/go-delve/delve/cmd/dlvlatest (3).打开vs code的命令面板，输入Go: Install/Update Tools，并单击该命令执行，安装或更新Go语…...

编程日记 2025/7/2 15:34:41

搭建Hadoop分布式集群

软件和操作系统版本 Hadoop框架是采用Java语言编写，需要java环境（jvm） JDK版本：JDK8版本 ，本次使用的是 Java: jdk-8u431-linux-x64.tar.gz Hadoop: hadoop-3.3.6.tar.gz 三台Linux虚拟节点: CentOS-7-x86_64-DVD-2…...

编程日记 2025/7/6 5:52:06

网络安全应急响应技术原理与应用

网络安全应急响应概述 “居安思危，思则有备，有备无患。”网络安全应急响应是针对潜在发生的网络安全事件而采取的网络安全措施。本节主要阐述网络安全响应的概念、网络安全应急响应的发展、网络安全应急响应的相关要求。 17.1.1 网络安全应急响应概念网…...

编程日记 2025/7/5 16:37:27

01 Oracle自学环境搭建

1 Oracle12C安装 1.1 下载官网地址：https://www.oracle.com/ 解压安装包运行安装程序 1.2 安装配置安全更新软件更新安装选项系统类 Oracle主目录用户选择使用现有windows用户：如果选择该项，则需要指定没有管理权限的用户。创建新Wi…...

编程日记 2025/7/2 7:08:09

MYSQL----------MySQL权限管理

1 MySQL权限管理 .1.1 权限系统的工作原理查看用户权限 -- 查看用户的权限 SHOW GRANTS FOR usernamelocalhost;解释：这条SQL语句用于查看指定用户在本地主机上的权限。其中username是要查看权限的用户。 .1.2 权限表的存取查询权限表（以user表为例&a…...

编程日记 2025/7/3 5:13:52

学习HLS.js

前言 HTTP 实时流（也称为HLS（.m3u8））是一种基于HTTP的自适应比特率流通信协议。HLS.js依靠HTML5视频和MediaSource Extensions进行播放，其特点：视频点播和直播播放列表、碎片化的 MP4 容器、加密媒体扩展 …...

编程日记 2025/7/6 20:38:40

Zustand selector 发生 infinate loops的原因以及解决

Zustand selector 发生 infinate loops 做zustand tutorial project的时候，使用选择器方法引入store，出现Maximum update depth exceeded,也就是组件一直重新渲染，改成直接使用store就没有不会出现这个问题。如下： // const [xIs…...

编程日记 2025/7/2 21:33:47

1.参考链接 2.应用 target并设置多选编辑添加[CanEditMultipleObjects] using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEditor;[CustomEditor(typeof(LightsState))] [CanEditMultipleObjects] public class TestInspector :…...

编程日记 2025/7/7 3:41:46

donet （MVC）webAPI 的接受json 的操作

直接用对象来进行接收，这个方法还不错的。 public class BangdingWeiguiJiluController : ApiController{/// <summary>/// Json数据录入错误信息/// </summary>/// <param name"WeiguiInfos"></param>/// <returns></r…...

编程日记 2025/7/2 8:08:19

GitHub 新手入门指南

一、GitHub 简介 GitHub 是全球最大的代码托管平台，它基于 Git 版本控制系统，为开发者提供了一个集中存储、管理和协作开发代码的空间。在这里，你可以找到无数开源项目，也可以将自己的项目与全球开发者社区共享，促进知…...

编程日记 2025/7/3 11:17:40

Django后端相应类设计

通用的ApiResponse类：用于生成统一的 API 响应格式。每个响应都包含以下字段（每个接口最终的返回数据格式）： status_code：HTTP 状态码（如 200、400、500 等）message：响应的描述信息…...

编程日记 2025/6/28 13:45:32

完美解决VMware 17.0 Pro安装ubuntu、Deepin等虚拟机后卡顿、卡死问题

这两天在 VM 17 Pro 中安装了ubuntu 24.1 和Deepin 23.9 等Linux操作系统，在使用过程中出现过数次卡顿、卡死问题，现记录整理解决方法如下： 一、问题描述安装虚拟机时、以及安装完成后正常使用时出现鼠标点击卡顿、系统反应慢、卡死等问题…...

编程日记 2025/7/7 4:08:51

前端图片上鼠标画矩形框，标注文字，任意删除

效果： 页面描述： 对给定的几张图片，每张能用鼠标在图上画框，标注相关文字，框的颜色和文字内容能自定义改变，能删除任意画过的框。实现思路： 1、对给定的这几张图片，用分页器绑定…...

编程日记 2025/7/7 2:36:29

【Oracle篇】深入了解执行计划中的访问路径(含表级别、B树索引、位图索引、簇表四大类访问路径)

💫《博主介绍》：✨又是一天没白过，我是奈斯，从事IT领域✨ 💫《擅长领域》：✌️擅长阿里云AnalyticDB for MySQL(分布式数据仓库)、Oracle、MySQL、Linux、prometheus监控；并对SQLserver、NoSQL(…...

编程日记 2025/7/5 6:40:47

ROS2+OpenCV综合应用--11. AprilTag标签码跟随

1. 简介 apriltag标签码追踪是在apriltag标签码识别的基础上，增加了小车车体运动的功能，控制车体从而使摄像头会保持标签码在视觉中间左右运动，在根据物体在摄像头成像近大远小的原理根据这一特性，从而实现标签码跟随功能。 2. 启…...

编程日记 2025/7/4 19:06:04

第四、五章图论和网络爬虫+网络搜索

第四章图论和网络爬虫 4.1 构建网络爬虫工程重点构建网络爬虫的重点用BFS还是DFS 在不考虑时间的情况下，这两种不同的搜索方法都可以在相同的时间下爬下整个静态的互联网内容，但是在现实中肯定是需要考虑时间以及互联网动态变化的。所以重点应该是如…...

编程日记 2025/7/6 22:23:25

PyMysql 01|（包含超详细项目实战）连接数据库、增删改查、异常捕获

目录一、数据库操作应用场景二、安装PyMysql 三、事务的概念四、数据库的准备五、PyMysql连接数据库 1、建立连接方法 2、入门案例六、PyMysql操作数据库 1、数据库查询 1️⃣查询操作流程 2️⃣cursor游标 3️⃣查询常用方法 4️⃣案例 5️⃣异常捕获 …...

编程日记 2025/7/6 16:29:05

(No space left on device )

错误日志： org.springframe tipart.MultipartException: Failed to parse multipart servlet request: nested excepti /ROOT/upload_e5046403_6cd4_4673_3313_479fb76773fe_00000004.tmp (No space left on device ) 分析： (No space left on devi…...

编程日记 2025/7/7 3:52:15

Conmi的正确答案——Cordova使用“src-cordova/config.xml”编辑“Android平台”的“uses-permission”

Cordova版本：12.0.0 (cordova-lib12.0.1) 1、配置例程： <platform name"android"><config-file target"AndroidManifest.xml" parent"/manifest"><uses-permission android:name"android.permission…...

编程日记 2025/7/6 18:32:44

LLaMA-Factory web微调大模型并导出大模型

LLaMA-Factory 开源大模型如LLaMA，Qwen，Baichuan等主要都是使用通用数据进行训练而来，其对于不同下游的使用场景和垂直领域的效果有待进一步提升，衍生出了微调训练相关的需求，包含预训练（pt）&am…...

编程日记 2025/7/5 8:52:19

针对数据库系统安全的漏洞扫描加固工具【WebSocket + MySQL】

一、系统背景随着信息技术的迅猛发展和互联网的普及，数据库作为存储、管理和检索大量数据的关键组件，其安全性对于企业和组织来说至关重要。然而，由于网络环境的复杂性和攻击手段的多样性，数据库面临着越来越多的安全威胁&#…...

编程日记 2025/7/3 1:18:20

汽车基础软件AutoSAR自学攻略(三)-AutoSAR CP分层架构(2)

汽车基础软件AutoSAR自学攻略(三)-AutoSAR CP分层架构(2) 下面我们继续来介绍AutoSAR CP分层架构，下面的文字和图来自AutoSAR官网目前最新的标准R24-11的分层架构手册。该手册详细讲解了AutoSAR分层架构的设计，下面让我们来一起学习一下。 Introductio…...

编程日记 2025/7/2 7:21:35

《PC 上的开源神经网络多模态模型：开启智能交互新时代》

《PC 上的开源神经网络多模态模型：开启智能交互新时代》一、引言二、多模态模型基础剖析（一）核心概念解读（二）技术架构探秘三、开源多模态模型的独特魅力（一）开源优势尽显（二&…...

编程日记 2025/7/4 8:48:23

Docker Desktop 构建java8基础镜像jdk安装配置失效解决

Docker Desktop 构建java8基础镜像jdk安装配置失效解决文章目录 1.问题2.解决方法3.总结 1.问题之前的好几篇文章中分享了在Linux(centOs上)和windows10上使用docker和docker Desktop环境构建java8的最小jre基础镜像，前几天我使用Docker Desktop环境重新构建了一个…...

编程日记 2025/7/1 17:11:47

【算法】八大排序算法

这篇文章是对数据结构中八大经典排序算法的详解，包括其原理、实现过程、时间复杂度、空间复杂度及其适用场景。最后两种排序不常见，但仍收录了进来保持文章结构的完整性。排序(Sort)是将无序的记录序列（或称文件）调整成有序的…...

编程日记 2025/7/6 21:28:52

pytest+allure 入门

使用allure如何生成自动化测试报告 ？一文详解allure的使用。_allure测试报告-CSDN博客例子： import allure import pytest import osallure.epic("闹钟") allure.feature("闹钟增删") class TestSchedule():def setu…...

编程日记 2025/7/4 18:42:30

算法--最大公约数，最小公倍数

1. 求两个数的最大公约数，最小公倍数解释：这里Mymin和Mymax函数是自定义用于获取两数最大值和最小值的求最大公约数的时候只需要得到两数之中最小的一项，向下逐个判断直到等于1 求最小公倍数的时候只需要得到两数之中最大的一项&#xf…...

编程日记 2025/7/6 19:55:46

【跨域问题】

跨域问题官方概念： 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域本质来说，是前端请求给到后端时候，请求头里面，有一个 Origin ，会带上协议域名端口号等；后端接受到请求&…...

编程日记 2025/7/4 20:48:42

为什么在二维卷积操作中，将宽度（W）维度放在高度（H）之前会破坏空间局部性原则，并影响缓存性能

空间局部性原则空间局部性指的是程序倾向于访问与最近访问过的内存位置接近的内存位置。对于深度学习模型中的张量数据，这意味着当处理图像或特征图时，如果能够连续地访问相邻像素的数据，那么可以最大化利用CPU/GPU缓存，因为缓存…...

编程日记 2025/7/6 8:17:01

【C语言】_函数指针数组/转移表与回调函数

目录 1. 示例1：函数指针数组的简单使用 2. 示例2：多同类型函数调用 2.1 switch-case实现 2.2 switch-case函数指针 2.3 函数指针数组实现 3. 回调函数关于函数指针，专栏文章链接如下：【C语言】_函数指针变量-CSDN博客https…...

编程日记 2025/7/1 20:20:08

《通过财报看企业》

“借贷关系”“净资产收益率”“财务报表”、净利润、盈利能力、现金流第1章净利润：决定一家公司的股价能涨多高企业经营：存货周转率企业市值：市值净利润市盈率龙头企业：行业内收入规模最大、盈利能力最强，…...

编程日记 2025/7/4 18:26:49

年度技术突破奖｜中兴微电子引领汽车芯片新变革

随着以中央计算区域控制为代表的新一代整车电子架构逐步成为行业主流，车企在电动化与智能化之后，正迎来以架构创新为核心的新一轮技术竞争。中央计算SoC，作为支撑智驾和智舱高算力需求的核心组件，已成为汽车电子市场的重要新增量。…...

编程日记 2025/7/6 21:36:40

力扣经典题目之912.排序数组（使用希尔排序解决）

今天继续给大家分享一道力扣的做题心得今天这道题目是 912.排序数组题目链接：912. 排序数组 - 力扣（LeetCode） 题目：给你一个整数数组 nums，请你将该数组升序排列。你必须在不使用任何内置函数的情况下解决问题…...

编程日记 2025/7/1 19:15:48

QT升级及下载缓慢的问题解决办法

QT升级及下载缓慢的问题解决办法 QT安装慢解决办法： 官方下载地址: https://www.qt.io/download-dev 点开后点击download 填写相关信息后即可下载完成线上安装工具。安装工具（qt-online-installer-windows-x64-4.8.1.exe） 如下图: 此时不…...

编程日记 2025/7/2 19:13:23

List详解 - 双向链表的操作

在C中，std::list是标准模板库（STL）中的一个容器，它实现了双向链表的数据结构。与数组或向量（std::vector）不同，std::list允许在常数时间内进行插入和删除操作，尤其是在链表的任意位置…...

编程日记 2025/7/1 4:48:45

公众号如何通过openid获取unionid

通过接口 https://api.weixin.qq.com/cgi-bin/user/info?access_tokenxxxxxxx&langzh_CN 返回的数据如下： 前提是必须绑定微信开放平台 token如何获取呢代码如下： String tokenUrl "https://api.weixin.qq.com/cgi-bin/token"; …...

编程日记 2025/7/3 18:28:21

AIP-1 AIP目的和指南

原文AIP-1: AIP Purpose and Guidelines 随着Google API数量不断增加，API治理团队不断扩张，以满足API维护工作需求。越来越有必要为API生产者、审查者和其他相关方提供一套参考文档。API风格指南和一站式介绍文档简洁扼要。AIP集合提供了一种产出一致性…...

编程日记 2025/7/1 23:52:20

【学习】CMMM智能制造能力成熟度评估的重要性

CMMM认证通过对企业当前生产状态的全面评估，能够精准地确定其智能化生产的程度，并将企业的智能化生产水平划分为五个等级，包括初始级、已定义级、以管理级、卓越级和顶级。这种等级划分使得不同类型的企业能够根据自身实际情况，选…...

编程日记 2025/7/2 6:37:16

WebGIS在应急灾害中对村庄、风景区、机场的影响范围应用-以日喀则市定日县地震为例

目录前言一、关于影响范围 1、震中距离5公里 2、震中20公里范围 3、20到80公里范围二、空间查询知识 1、相关数据介绍 2、空间数据查询三、前后端数据查询以及web可视化实现 1、后台API实现 2、WebGIS前端实现四、Web成果展示 1、空间位置分析 2、包含风景区…...

编程日记 2025/7/3 13:04:34

Flink系列知识讲解之：网络监控、指标与反压

Flink系列知识之：网络监控、指标与反压在上一篇博文中，我们介绍了 Flink 网络协议栈从高层抽象到底层细节的工作原理。本篇博文是网络协议栈系列博文中的第二篇，在此基础上，我们将讨论如何监控网络相关指标，以识别吞…...

编程日记 2025/7/4 5:05:51

Postman接口测试05|实战项目笔记

目录一、项目接口概况二、单接口测试-登录接口：POST 1、正例 2、反例 ①姓名未注册 ②密码错误 ③姓名为空 ④多参 ⑤少参 ⑥无参三、批量运行测试用例四、生成测试报告 1、Postman界面生成 2、Newman命令行生成五、token鉴权（“…...

编程日记 2025/7/2 16:12:05

人工智能学习路线全链路解析

一、基础准备阶段（预计 2-3 个月） （一）数学知识巩固与深化线性代数（约 1 个月）： 矩阵基础：回顾矩阵的定义、表示方法、矩阵的基本运算（加法、减法、乘法）&…...

编程日记 2025/7/1 1:17:11

图像处理 | 图像二值化

在图像处理领域，图像二值化是一个重要的操作，它将彩色或灰度图像转换为只有两种颜色（通常是黑白）的图像。二值化广泛应用于文字识别、图像分割、边缘检测等领域，尤其在处理简洁和高对比度的图像时非常有效。本文将深入…...

编程日记 2025/7/1 16:06:38

ASP.NET Core 中服务生命周期详解：Scoped、Transient 和 Singleton 的业务场景分析

前言在 ASP.NET Core 中，服务的生命周期直接影响应用的性能和行为。通过依赖注入容器 (Dependency Injection, DI)，我们可以为服务定义其生命周期：Scoped、Transient 和 Singleton。本文将详细阐述这些生命周期的区别及其在实际业务中的应用…...

编程日记 2025/7/6 19:03:48

鼠标自动移动防止锁屏的办公神器 —— 定时执行专家

目录 ◆ 如何设置 ◇ 方法1：使用【执行Nircmd命令】任务 ◇ 方法2：使用【模拟键盘输入】任务 ◆ 定时执行专家介绍 ◆ 定时执行专家最新版下载 ◆ 如何设置 ◇ 方法1：使用【执行Nircmd命令】任务 1、点击工具栏第一个图标【新建任务】&…...

编程日记 2025/7/6 12:20:02

开源库：jcon-cpp

说明 jcon-cpp 是一个用于 C 的 JSON-RPC 库，它允许开发者通过 JSON-RPC 协议进行进程间通信（IPC）。JSON-RPC 是一种轻量级的远程过程调用协议，基于 JSON 格式数据进行通信。基于MIT协议，最新代码基于Qt6实现。可通过…...

编程日记 2025/7/2 9:29:24

一、什么是CSS

二、为什么要使用CSS

三、如何使用CSS

相关文章：