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

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

news 2026/2/9 20:30:46

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

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2026/2/5 17:57:20

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2026/1/4 5:19:25

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2026/1/30 3:24:00

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

编程新知 2026/2/4 17:42:50