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

“CSS”第一步——WEB开发系列13

news 2026/2/8 7:41:45

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

一、什么是 CSS？

CSS，即层叠样式表，是一种样式表语言，用于描述文档的视觉呈现。简单来说，CSS 用于调整 HTML 元素的外观和布局，使得网页不仅仅具有结构，而是更加美观和用户友好。

CSS 最早在 1996 年被引入，随着网页技术的不断发展，它也在不断地演变和改进。CSS 允许网页设计师和开发者将样式与内容分离，从而使得网页的结构更加清晰，维护更加方便。

二、CSS 用来干什么？

CSS 的主要用途包括：

  1. 样式化文本：通过 CSS，你可以轻松调整字体、颜色、字号、行高等。这使得内容阅读起来更加友好。
  2. 布局控制：CSS 提供多种布局选项，比如流式布局、网格布局和灵活布局（Flexbox），使得开发者能够将元素有效地排列在网页上。
  3. 视觉效果：CSS 允许你添加背景图像、边框、阴影、渐变等视觉效果，使网页更加吸引用户。
  4. 响应式设计：使用 CSS 媒体查询，开发者可以针对不同的设备和屏幕尺寸调整网页布局，从而实现良好的跨设备使用体验。
  5. 动画效果：CSS 还可以实现简单的动画和过渡效果，增强用户互动体验。

CSS 实例

为了更好地理解 CSS 的应用，我们可以通过一个简单的例子来演示如何使用 CSS 来美化一个基本的 HTML 页面。

1）HTML 代码

首先，我们创建一个简单的 HTML 页面，内容包含一个标题和一段文本：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个 CSS 页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是我的第一个 CSS 示例。通过 CSS 我可以美化我的网页。</p>
</body>
</html>

2）CSS 代码

接下来，创建一个名为 ​​styles.css​​​ 的 CSS 文件，对 HTML 中的元素进行样式化：

body {
background-color: #f0f0f0; /* 背景颜色 */
font-family: Arial, sans-serif; /* 字体 */
margin: 0; /* 去除默认边距 */
padding: 20px; /* 增加内边距 */
}h1 {
color: #333; /* 文字颜色 */
text-align: center; /* 文字居中 */
}p {
color: #666; /* 文字颜色 */
font-size: 18px; /* 字体大小 */
line-height: 1.5; /* 行间距 */
}

将这个 CSS 文件与 HTML 文件链接后，打开 HTML 页面，你将看到一个简洁、现代、色调相协调的网页。这正是 CSS 的魅力所在，通过简单的样式表就能实现网页的美化。

三、CSS 语法

CSS 的基本语法结构是由选择器和声明块组成，具体的构成如下：

selector {
property: value;
property: value;
}

1、选择器

选择器用于选择和应用样式到指定的 HTML 元素。常见的选择器包括：

  • 元素选择器：直接选择 HTML 标签，如 ​​h1​​​, ​​p​​​, ​​div​​。
  • 类选择器：选择具有特定类的元素，类选择器以 ​​.​​​ 开头。例如，​​.header​​​ 选择所有具有 ​​header​​ 类的元素。
  • ID 选择器：选择具有特定 ID 的元素，ID 选择器以 ​​#​​​ 开头。例如，​​#main​​​ 选择 ID 为 ​​main​​ 的元素。
  • 组合选择器：可以组合多个选择器，如 ​​h1, p​​​ 会选择所有的 ​​<h1>​​​ 和 ​​<p>​​ 元素。

2、声明块

声明块包含了CSS属性和对应的值，通常以分号结束。属性指定了想要改变的样式，例如：

  • ​​color​​：文本颜色
  • ​​background-color​​：背景颜色
  • ​​font-size​​：字体大小
  • ​​margin​​：外边距
  • ​​padding​​：内边距

以下是一个简单的 CSS 代码示例，它使用选择器和声明块来设定页面的样式：

h2 {
color: blue; /* 设置 h2 的文字颜色为蓝色 */
font-size: 36px; /* 设置字体大小 */
margin-top: 20px; /* 设置上外边距 */
}

3、CSS 注释

在 CSS 中，注释用于添加解释性说明，但不会被浏览器解析。注释用 ​​/*​​​ 开始，用 ​​*/​​ 结束。它们可以放在CSS代码的任何地方，非常方便。

/* 这是一个注释，它不会影响页面样式 */
body {
background-color: #ffc4c4; /* 设置背景色 */
}

相关文章：

“CSS”第一步——WEB开发系列13

CSS (Cascading Style Sheets&#xff0c;层叠样式表&#xff09;&#xff0c;是一种用来为结构化文档&#xff08;如 HTML 文档或 XML 应用&#xff09;添加样式&#xff08;字体、间距和颜色等&#xff09;的计算机语言&#xff0c;CSS 文件扩展名为 .css。 一、什么是 CSS&a…...

编程日记 2024/8/19 21:37:38

IEEE802网络协议和标准

IEEE802网络协议和标准 802委员会IEEE 802介绍现有标准 IEEE 802.3介绍物理媒介类型MAC子层与LLC子层主要内容通讯标准POE供电标准802.3af、802.3at、802.3btIEEE802.3af的工作过程&#xff1a;IEEE802.3af主要供电参数&#xff1a;IEEE802.3af的分级参数&#xff1a;为什么会有…...

编程日记 2024/8/19 21:32:33

vulnhub靶机 DC-9（渗透测试详解）

一、靶机信息收集 1、靶机下载 https://download.vulnhub.com/dc/DC-9.zip 2、靶机IP扫描 3、探测靶机主机、端口、服务版本信息 4、靶机目录扫描 二、web渗透测试 1、访问靶机IP 查看页面功能点&#xff0c;发现一个搜索框和登录框 2、测试一下是否存在sql注入 查看当前数…...

编程日记 2024/8/19 21:29:30

javaweb的新能源充电系统pf

TOC springboot339javaweb的新能源充电系统pf 第1章 绪论 1.1 课题背景 二十一世纪互联网的出现&#xff0c;改变了几千年以来人们的生活&#xff0c;不仅仅是生活物资的丰富&#xff0c;还有精神层次的丰富。在互联网诞生之前&#xff0c;地域位置往往是人们思想上不可跨域…...

编程日记 2024/8/19 21:28:28

如何在桌面同时展示多个窗口

一、实现2分屏显示 win箭头 二、实现3分屏显示 1. 在实现2分屏显示的基础上&#xff0c;再次点击箭头图标&#xff0c;这次选择屏幕的上方或下方。 2. 点击后&#xff0c;第三个窗口将会出现在你选择的区域。现在&#xff0c;你可以在三个窗口之间自由切换&#xff0c;提高工…...

编程日记 2024/8/19 21:26:25

The Sandbox 游戏制作教程（第 5 部分）：创建基于分类的系统

欢迎回到我们的系列&#xff0c;我们将记录 The Sandbox Game Maker 的 “On-Equip”&#xff08;装备&#xff09;功能的多种用途。 如果你刚加入 The Sandbox&#xff0c;装备功能是 “可收集组件”&#xff08;Collectable Component&#xff09;中的一个多功能工具&#x…...

编程日记 2024/8/19 21:25:24

HTML浏览器缓存（Browser Cache）

介绍&#xff1a; 浏览器缓存是Web缓存中最直接、最常见的一种形式。当浏览器首次请求某个资源时&#xff0c;如果服务器响应中包含了缓存控制指令&#xff08;如Cache-Control、Expires等&#xff09;&#xff0c;浏览器就会将这些资源存储在本地缓存中。后续请求相同资源时&a…...

编程日记 2024/8/19 21:24:22

短剧APP系统，推动短剧市场发展

近年来&#xff0c;短剧作为一直火爆的新兴行业&#xff0c;凭借着剧情进奏、爽、时长短等优势&#xff0c;深受大众欢迎&#xff0c;成为了大众碎片化时间的解压神器。 目前&#xff0c;随着短剧市场的快速发展&#xff0c;各个类型的短剧层出不穷&#xff0c;也推动了短剧AP…...

编程日记 2024/8/19 21:23:20

嵌入式 | 嵌入式 Linux 系统使用摄像头

点击上方"蓝字"关注我们 01、引言 >>> 在嵌入式 Linux 系统使用摄像头 俗话说“眼见为实”，这或许是为什么近年来摄像头在嵌入式系统上快速增长的原因。它们被用于不同的场景，如： 远程监控：典型的例子是闭路电视，监控人员在监视环境（或许你所在的大楼…...

编程日记 2024/8/19 21:22:18

C 开源库之cJSON

cJSON简介 CJSON库是一个用于解析和生成JSON数据的C语言库。 它提供了一组函数&#xff0c;使得在C语言中操作JSON数据变得简单而高效。 您可以使用CJSON库来解析从服务器返回的JSON数据&#xff0c;或者将C语言数据结构转换为JSON格式以进行传输。 cJSON 使用 官网地址&…...

编程日记 2024/8/19 21:21:16

ROW_NUMBER(), RANK(), DENSE_RANK() SQL排序函数图文详解

ROW_NUMBER(), RANK(), DENSE_RANK() ROW_NUMBER(): 为结果集中的每一行分配唯一的连续编号。即使有重复的值&#xff0c;ROW_NUMBER() 也会为它们分配不同的序号。 SELECT column_name, ROW_NUMBER() OVER (ORDER BY column_name) AS row_num FROM table_name;2. RANK(): 对结…...

编程日记 2024/8/19 21:20:14

Spring IoCDI（下）—DI的尾声

我们之前学习了控制反转IoC&#xff0c;接下来就开始学习依赖注入DI的细节。 依赖注入是一个过程&#xff0c;是指IoC容器在创建Bean时&#xff0c;去提供运行时所依赖的资源&#xff0c;而资源指的就是对象。我们使用 Autowired 注解&#xff0c;完成依赖注入的操作。简单来说…...

编程日记 2024/8/19 21:19:12

仕考网：考外省公务员可以调回本地吗?

一般情况下&#xff0c;公务员岗位是固定不可随意更换的&#xff0c;因为每个职位都对应特定的职责和要求。一旦考到外地的岗位&#xff0c;想要调回本地几乎是不可能的。因为这样的操作可能导致职位空缺&#xff0c;进而需要通过公共招聘流程来填补&#xff0c;而不是简单地从…...

编程日记 2024/8/19 21:18:11

《工厂模式在软件开发中的深度剖析与应用》

工厂模式 在软件开发的领域中&#xff0c;设计模式充当着解决常见问题的高效且可复用的策略角色。其中&#xff0c;工厂模式作为创建对象的重要设计模式&#xff0c;具有不可小觑的应用价值。接下来&#xff0c;我们将深入探讨简单工厂模式、工厂方法模式和抽象工厂模式。 一…...

编程日记 2024/8/19 21:16:09

双向通信之Websocket

介绍 Websocket是一种在单个TCP连接上进行全双工通信的协议。与传统的HTTP协议不同&#xff0c;websocket允许客户端与服务器之间的双向通信&#xff0c;可以在同一条连接上进行多次消息的快速传递。我之前在做一个线上刷题网站的时候&#xff0c;需要设计一个社区讨论模块&am…...

编程日记 2024/8/19 21:15:07

git学习使用碰到的问题1

本来在B站上看到的关于stash的使用时视频末尾讲到git stash drop 编号 会删除暂存记录 确实也是这么回事&#xff0c;但是末尾说到git stash pop 编号时up主说在恢复工作进度的时候我们可以直接删除掉这个工作记录可以直接使用 git stash pop stash{0} 使用完以后却出现了如上图…...

编程日记 2024/8/19 21:11:02

JavaScript初级——Math

一、Math 和其他的对象不同&#xff0c;它不是一个构造函数。它属于一个工具类&#xff0c;不用创建对象&#xff0c;里边封装了数学运算相关的属性和方法。 比如&#xff1a; Math.PI 表示圆周率。 二、Math.abs&#xff08;&#xff09; —— 可以用来计算一个数的绝对值。 三…...

编程日记 2024/8/19 21:07:59

ffmpeg的基础命令

文章目录 ffmpeg/ffplay/ffprobe区别ffmpeg 的作用ffplay的作用ffprobe的作用 ffmpeg使用概述功能概述转码过程简单使用FFMPEG -i常用的 -i例子 ff***工具之间共享的选项ffmpeg主要选项ffmpeg提取音视频数据ffmpeg命令修改原有的视频格式ffmpeg命令裁剪和合并视频拼接视频的方式…...

编程日记 2024/8/19 21:06:57

二建机电工程实务试题内附答案

1.下列有色金属材料中&#xff0c;不属于铜合金的是()。 A.紫铜 B.青铜 C.黄铜 D.白铜【答案】A 2.用于完成介质间热量交换的换热设备是()。 A.分离器 B.反应器 C.冷凝器 D.分解锅【答案】C 3.工程测量的核心是()。 A.测量精度 B.设计要求 C.减少误差累积 D.检核【答案】D 4.吊…...

编程日记 2024/8/19 21:05:56

Redis的热key以及Big（大）key是什么？如何解决Redis的热key以及Big（大）key问题？

一、先讲讲什么是redis的热key问题 在Redis中&#xff0c;我们把访问频率高的Key&#xff0c;称为热Key。比如突然有几十万的请求去访问redis中某个特定的Key&#xff0c;那么这样会造成redis服务器短时间流量过于集中&#xff0c;很可能导致redis的服务器宕机。那么接下来对这…...

编程日记 2024/8/19 21:04:54

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2026/1/2 23:01:24

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/1/30 20:05:06

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2026/2/1 21:58:45

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/12/4 0:13:33

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

编程新知 2026/1/31 9:49:23

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2026/2/6 12:27:51

【深度学习新浪潮】什么是credit assignment problem？

Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...

编程新知 2026/1/30 14:23:04

论文阅读：Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

编程新知 2026/1/27 19:36:39

sshd代码修改banner

sshd服务连接之后会收到字符串&#xff1a; SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢&#xff1f; 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

编程新知 2026/2/5 22:05:56