CSS是一种用于描述网页样式的语言，可以使网页的内容更加美观。以下是一些关于CSS的基本概念和使用方法：
内联样式：
内联样式是在HTML元素的style属性中直接写CSS代码。这种方法直接且简单，但是不利于后期的维护和修改。
<p style="color:blue;">这是一个蓝色的段落。</p>
内部样式表：
内部样式表是在HTML文档的<head>标签中使用<style>标签来写CSS代码。这种方法可以使样式和HTML分开，但是只对所在的HTML页面有效。
<head>
<style>
p { color: red; }
</style>
</head>
<body>
<p>这是一个红色的段落。</p>
</body>
外部样式表：
外部样式表是将CSS代码写在单独的.css文件中，然后在HTML文档的<head>标签中使用<link>标签来引用这个CSS文件。这种方法可以使样式和HTML分开，并且可以在多个HTML页面中共享，是最推荐的使用方式。
<!-- 在<head>中链接外部CSS文件 -->
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
/* styles.css文件 */
p {
color: green;
}
CSS选择器：
CSS选择器用于选择需要应用样式的HTML元素。常用的选择器有标签选择器、类选择器、ID选择器和属性选择器等。
/* 标签选择器 */
p {
color: orange;
}
/* 类选择器，使用.开头 */
.center {
text-align: center;
}
/* ID选择器，使用#开头 */
#title {
font-size: 24px;
}
/* 属性选择器 */
input[type="text"] {
background-color: yellow;
}
CSS的层叠性和优先级：
当多个选择器选中同一个元素，并且都指定了相同的属性时，CSS的层叠性会决定哪个选择器的样式会被应用。优先级高的选择器会覆盖优先级低的选择器。
优先级顺序：内联样式 > 内部样式表和外部样式表（就近原则）。ID选择器 > 类选择器 > 标签选择器。
CSS的盒模型：
CSS的盒模型包括内容区域（content）、填充区域（padding）、边框区域（border）、和外边距区域（margin）。
div {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
CSS的Flexbox布局：
Flexbox布局提供了一种更灵活的方式来布置容器内的项目，适用于移动端开发。
.container {
display: flex; /* 使用Flex布局 */
flex-direction: row; /* 设置主轴方向 */
}
.item {
flex: 1; /* 使所有子项等分父容器 */
}
CSS的Grid布局：
Grid布局是一个基于网格的二维布局系统，非常适合创建复杂的布局。
.container {
display: grid; /* 使