一、CSS概述
CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档样式的样式表语言。它能够精确控制网页元素的布局、颜色、字体等视觉属性，是网页设计中不可或缺的一部分。
1.1 什么是CSS
CSS通过选择器和样式信息来定义网页元素的样式。选择器用于指定要应用样式的元素，而样式信息则定义了元素的视觉表现。
1.2 CSS语法
CSS的基本语法由选择器和样式信息组成，如下所示：
选择器 {
属性: 值;
属性: 值;
}
例如：
h1 {
color: red;
font-size: 20px;
}
在这个例子中，
h1
是选择器，表示所有
h1
标签的元素；
color
和
font-size
是属性，分别表示颜色和字体大小；
red
和
20px
是对应的值。
二、CSS的三种引入方式
CSS可以通过以下三种方式引入到HTML文档中：
2.1 内联样式
内联样式直接在HTML标签内通过
style
属性定义。这种方式适用于简单的样式调整，但不推荐用于复杂的样式表。
这是一段文本。
2.2 内部样式表
内部样式表将CSS代码放在HTML文档的
部分内的
2.3 外部样式表
外部样式表将CSS代码保存在单独的文件中，并通过
标签引入到HTML文档中。这种方式适用于网站级别的样式调整，便于维护和更新。
三、CSS常用选择器
CSS选择器用于指定要应用样式的元素。以下是一些常用的CSS选择器：
3.1 标签选择器
标签选择器通过HTML标签名选择元素。
p {
color: green;
}
3.2 类选择器
类选择器通过元素的类属性选择元素。
.class-name {
color: orange;
}
3.3 ID选择器
ID选择器通过元素的ID属性选择唯一的元素。
#id-name {
color: purple;
}
四、CSS常用样式
CSS提供了丰富的样式属性，以下是一些常用的CSS样式：
4.1 文字样式
文字样式包括字体、颜色、大小等。
p {
font-family: Arial, sans-serif;
color: black;
font-size: 14px;
}
4.2 背景样式
背景样式包括背景颜色、背景图片等。
body {
background-color: #f0f0f0;
background-image: url('background.jpg');
}
4.3 盒子模型
盒子模型包括边距、边框、内边距和外边距等。
div {
margin: 10px;
border: 1px solid black;
padding: 20px;
width: 200px;
}
五、总结
掌握CSS标签样式，可以帮助你打造美观、易用的网页设计。通过学习CSS的基本语法、选择器和样式属性，你可以灵活地调整网页元素的视觉表现，提升用户体验。