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

news2024/11/26 14:36:44

什么是 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>