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

CSS基础概念：什么是 CSS ? CSS 的组成

news 2025/7/9 0:42:51

什么是 CSS？

CSS（层叠样式表，Cascading Style Sheets）是一种用于控制网页外观的样式表语言。通过定义样式规则，CSS 可以指定 HTML 页面中各个元素的显示方式，包括颜色、布局、字体、间距等。

与 HTML 专注于内容结构不同，CSS 的主要作用是美化和布局 HTML 页面，使网页在视觉上更具吸引力和一致性，帮助开发者定义 HTML 元素的颜色、字体、间距、位置、大小等视觉属性，使页面符合预期的设计效果。

CSS 通过选择器为特定 HTML 元素定义样式，开发者可以将 CSS 规则与 HTML 内容分离，便于网页内容和样式的独立管理。

可以说，CSS 是网页的“美化工具”，通过与 HTML 和 JavaScript 组合使用，CSS 使得网页不仅具有清晰的结构，还能呈现出丰富多样的视觉效果和动态交互体验。

在这里插入图片描述

CSS（层叠样式表）诞生于上世纪90年代，由Håkon Wium Lie提出。他在1994年首次提出了CSS的概念，并与万维网联盟（W3C）合作，将其发展成为正式标准。W3C在1996年发布了CSS1的正式规范，随后，CSS经历了多个版本的演进，成为现代网页设计中不可或缺的技术。

其初衷是解决HTML页面样式无法与内容分离的问题，这一分离对于提升网页设计的灵活性和可维护性至关重要。随着CSS的发展，它逐渐成为现代网页设计的基石之一。

通过层叠性、继承性和优先级等核心特性，CSS不仅提供了强大的样式控制能力，还允许开发者在不同层级上灵活地管理和应用样式，从而实现一致的视觉表现和高效的页面布局。CSS的出现推动了网页设计的创新，成为构建美观、响应式用户界面的关键技术。

CSS的组成

CSS 由 选择器、声明块、属性和值组成：

选择器（Selector）：选择器用于选定要应用样式的 HTML 元素。比如，可以选择特定的标签（如 <p> 表示段落）、类（以 . 开头，如 .header ）、ID（以 # 开头，如 #main-content ）等。选择器决定了 CSS 样式应用到哪些元素上。
声明块：用大括号包围，包含一个或多个声明。每个声明由属性名和属性值组成，二者之间用冒号分隔，以分号结束。
属性（Property）：属性用于定义 HTML 元素的样式特征，如 color 表示颜色，font-size 表示字体大小，margin 表示外边距等。每个属性都具有特定的功能，开发者可以根据需要设置不同的样式属性。
值（Value）：值用于指定属性的具体样式设置。比如，color: red; 中的 red 就是值，它定义了颜色属性的具体样式。属性和值通常用冒号（:）分隔，整个样式规则以分号（;）结束。

在这里插入图片描述

选择器 {属性名: 属性值;属性名: 属性值;
}

以下是一个简单的 CSS 规则集示例：

h1 {color: red; /* 设置字体颜色为蓝色 */
}

选择器 h1 选中了所有的一级标题，规则集中的声明将其字体颜色设置为红色。CSS 规则集的使用，使得网页的视觉效果得以灵活控制，极大地增强了网页设计的表现力。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS 简介</title><style>h1{color: red;}</style>
</head>
<body><h1>好好学习，天天向上</h1>
</body>
</html>

效果如下：

CSS基础概念：什么是 CSS ? CSS 的组成

什么是 CSS？

CSS的组成

相关文章：

CSS基础概念：什么是 CSS ? CSS 的组成

鸿蒙next版开发：ArkTS组件自定义事件分发详解

计算机图形学论文 | 多边形中的点可见性快速算法

程序员输入问题

雨晨 23H2 Windows 11 企业版 IE VCDX 适度 22631.4445 （VIP有限开放版本）

如何评估焊机测试负载均衡性能

【卷积基础】CNN中一些常见卷积（1*1卷积、膨胀卷积、组卷积、深度可分离卷积）

组合（DFS）

linux盘扩容缩容

mysql中REPLACE语句使用说明

分享：文本转换工具：PDF转图片，WORD转PDF，WORD转图片

mac crontab 不能使用问题简记

Python 自动化测试应用

Python-安装与PyCharm的安装配置(1)

操作系统概念（一）——IOMMU学习

通过 Windows IIS 服务访问腾讯云 CFS 文件系统

如何电脑连接电视，实现大屏自由！

闭包的概念及使用场景介绍

qt5将程序打包并使用

软件设计师-上午题-15 计算机网络(5分)

Java多线程实现之Callable接口深度解析

PL0语法，分析器实现！

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

【Oracle】分区表

LeetCode - 199. 二叉树的右视图

C#学习第29天：表达式树（Expression Trees）

【网络安全】开源系统getshell漏洞挖掘

从面试角度回答Android中ContentProvider启动原理

Chrome 浏览器前端与客户端双向通信实战

Vue ③-生命周期 || 脚手架