一、CSS的概念
CSS（Cascading Style Sheets）是一种用于描述文档展示样式的语言。它是W3C创立的标准语言，旨在分离文档结构与表现层。
使用CSS，可以在不改变文档结构的情况下改变文档的样式。这使得Web开发变得更加容易、灵活和可维护。
二、CSS的基础语法
CSS的基础语法由3个部分组成：
1. 选择器：选择具有特定样式的元素。
2. 属性：确定元素的样式属性。
3. 值：属性的值可以是颜色、大小、字体等。
2.1 选择器
选择器是CSS中最重要的部分之一。它是用于选择要应用样式的元素的标识符。
常用的选择器有：元素选择器、类选择器、ID选择器等。
2.2 属性和值
CSS属性描述了元素的特征，如背景颜色、字体大小、边框等。
属性的值是要应用于属性的样式，如红色、14像素、实线等。
/* 示例代码 */
p {
color: red;
font-size: 14px;
border: 1px solid black;
}
上面的例子选择了所有的p元素，并给它们设置了红色字体、14像素大小和1像素实线边框。
三、CSS的应用
CSS可以让我们更好地控制网页的展示效果，提高用户的体验。
3.1 控制页面布局
CSS可以控制页面的布局，如设置元素的位置、大小、排列等。
/* 示例代码 */
.container {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
上面的例子设置了一个具有80%宽度、居中对齐、水平、垂直居中的容器。
3.2 定制页面样式
CSS可以让我们定制页面的样式，如字体、颜色、背景、边框等。
/* 示例代码 */
h1 {
font-size: 24px;
color: #333;
background-color: #fff;
border-bottom: 1px solid #333;
}
上面的例子设置了一个标题样式，具有24像素的字体大小、黑色的文字颜色、白色的背景颜色和黑色的1像素底边框。
3.3 响应式布局
CSS还可以帮助我们创建响应式布局，以适应不同的设备屏幕大小。
/* 示例代码 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
上面的例子定义了在屏幕宽度小于768像素时，把容器布局改为垂直排列。
总结
CSS是Web开发中不可或缺的一部分。了解CSS的基础语法和用途可以帮助我们更好地控制网页的展示效果。
通过选择器、属性和属性值，可以实现很多页面效果，包括布局、字体、颜色等。
除此之外，CSS还支持响应式布局等功能，以适应不同大小的设备屏幕。