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

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

news 2026/2/6 18:24:23

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

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/30 10:10:55

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/12/16 18:04:55

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2026/2/6 1:00:25

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2026/1/26 14:15:48

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/12/19 19:15:39

​​企业大模型服务合规指南：深度解析备案与登记制度​​

伴随AI技术的爆炸式发展&#xff0c;尤其是大模型&#xff08;LLM&#xff09;在各行各业的深度应用和整合&#xff0c;企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者&#xff0c;还是积极拥抱AI转型的传统企业&#xff0c;在面向公众…...

编程新知 2026/2/1 16:46:37

Appium下载安装配置保姆教程（图文详解）

目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...

编程新知 2026/1/30 22:33:08