CSS（Cascading Style Sheets，层叠样式表）用于描述HTML或XML（包括如SVG, MathML之类的XML语言）文档的外观和格式。CSS能够使网页的布局更加灵活，样式更加美观，并且可以通过减少HTML结构的复杂性来提高网页的可维护性。
CSS基础概念
- 「选择器（Selector）」：用于选择需要应用样式的HTML元素。
- 「属性（Property）」：你想要改变的样式特性。
- 「值（Value）」：赋予属性的具体值。
示例代码：简单CSS样式
下面是一个简单的HTML页面，以及与之关联的CSS样式表，展示了如何使用CSS来改变网页的外观。
HTML代码（index.html）
<!DOCTYPE html>
<html lang="zh-CN">
<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"> <!-- 链接到外部CSS文件 -->
</head>
<body>
<h1>欢迎来到CSS入门示例</h1>
<p>这是一个使用CSS进行样式设置的段落。</p>
<a href="https://www.example.com">这是一个链接</a>
</body>
</html>
CSS代码（styles.css）
/* 选择器为h1的所有元素设置样式 */
h1 {
color: blue; /* 文本颜色设置为蓝色 */
text-align: center; /* 文本对齐方式设置为居中 */
}
/* 选择器为p的所有元素设置样式 */
p {
font-size: 16px; /* 字体大小设置为16像素 */
line-height: 1.5; /* 行高设置为1.5倍 */
color: green; /* 文本颜色设置为绿色 */
}
/* 选择器为a的所有元素设置样式 */
a {
text-decoration: none; /* 移除下划线 */
color: red; /* 文本颜色设置为红色 */
}
/* 选择器为a元素，并且当鼠标悬停在其上时应用样式 */
a:hover {
text-decoration: underline; /* 鼠标悬停时添加下划线 */
}
代码解释
-
「HTML部分」：
- 使用了
<link>标签来链接外部的CSS文件styles.css。 - 包含了一个一级标题（
<h1>），一个段落（<p>）和一个链接（<a>）。
- 使用了
-
「CSS部分」：
- 使用选择器
h1来选择所有的一级标题元素，并设置它们的文本颜色为蓝色，文本对齐方式为居中。 - 使用选择器
p来选择所有的段落元素，并设置它们的字体大小为16像素，行高为1.5倍，文本颜色为绿色。 - 使用选择器
a来选择所有的链接元素，并移除它们的下划线，设置文本颜色为红色。 - 使用伪类选择器
a:hover来选择当鼠标悬停在链接元素上时的样式，并添加下划线。
- 使用选择器
如何运行
- 将HTML代码保存为
index.html文件。 - 将CSS代码保存为
styles.css文件，并确保它与index.html文件在同一目录下。 - 使用任何现代浏览器打开
index.html文件。
你将看到一个简单的网页，其中包含了一个蓝色的居中标题，一个绿色的段落，以及一个红色的链接，当鼠标悬停在链接上时，链接会添加下划线。
进一步学习
- 学习CSS选择器的高级用法，如类选择器、ID选择器、属性选择器、后代选择器、子选择器等。
- 了解CSS盒模型（Box Model），它对于布局和间距控制至关重要。
- 学习如何使用CSS进行网页布局，如使用浮动（float）、定位（positioning）、Flexbox和Grid布局等。
- 探索CSS3的新特性，如动画（animations）、过渡（transitions）、媒体查询（media queries）等，以创建更加动态和响应式的网页。
