CSS（级联样式表）是用于设置网页样式的一种语言，它允许你控制网页元素的外观和布局。以下是编写CSS的基本步骤和示例：
步骤：
创建CSS文件
新建一个文本文件，并将其重命名为 `xxx.css`。
设置编码格式
在文件的第一行，使用 `@charset "utf-8"；` 来指定文件的编码格式。
编写CSS代码
使用选择器来指定你想要样式化的HTML元素。
选择器后面跟着大括号 `{}`，里面列出你希望应用的样式属性和值。
属性名和值之间用冒号 `:` 分隔，多个样式之间用分号 `；` 分隔。
示例：
/* 设置body的样式 */body {margin: 0；background-color: f9f9f9；}/* 给带有class为shadow的元素添加样式 */.shadow {background-color: fff；box-shadow: 0 0 4px rgba（0, 0, 0, 0.2）；}/* 设置导航栏的样式 */nav {box-sizing: border-box；padding: 8px；height: 46px；}/* 设置应用区域的样式 */app {margin: 8px；min-height: 300px；}/* 设置页脚的样式 */footer {box-sizing: border-box；padding: 8px；}
在HTML中引入CSS：
你可以通过以下两种方式将CSS引入到HTML文档中：
内联样式
直接在HTML元素的`style`属性中指定CSS代码。
这是一段红色的文本。
外部样式表
使用` `标签在HTML文档的``部分引入外部CSS文件。
选择器类型：
类型选择器：直接使用HTML元素类型作为选择器。
p {color: blue；}
类选择器：使用点`.`加类名作为选择器。
.bold {font-weight: bold；}
ID选择器：使用井号``加ID名作为选择器。
example {color: green；}
属性选择器：选择具有特定属性及其值的元素。
input[type="text"] {border: 1px solid black；}
伪类选择器：用于定义元素的特殊状态。
a:hover {color: red；}
动画和过渡：
CSS3允许你使用关键帧动画和过渡效果来增强用户体验。
@keyframes animates {0% {transform: translate（0, 0）；}50% {transform: translate（50px, 50px）；}100% {transform: translate（0, 0）；}}span {height: 4px；width: 4px；background-color: white；position: absolute；left: 50%；top: 50%；border-radius: 50%；animation: animates 5s infinite linear；}
以上是编写CSS的基本指南和示例。你可以根据自己的需求来调整样式和布局。