CSS是一种用于描述网页样式和布局的语言。以下是一些常见的CSS代码示例，这些代码可以帮助你创建和设计网页。请注意，这只是CSS的一个子集，你可以根据需要调整和扩展它们。
**基本样式**
```css
body {
background-color: #f0f0f0; /* 设置背景颜色 */
font-family: Arial, sans-serif; /* 设置字体 */
margin: 0; /* 设置边距 */
padding: 0; /* 设置内边距 */
}
h1 {
color: #333; /* 设置文字颜色 */
text-align: center; /* 设置文本居中对齐 */
}
p {
color: #666; /* 设置段落文字颜色 */
font-size: 16px; /* 设置字体大小 */
line-height: 1.6; /* 设置行高 */
}
```
**布局和定位**
```css
.container {
display: flex; /* 使用Flex布局 */
justify-content: center; /* 水平居中对齐 */
align-items: center; /* 垂直居中对齐 */
}
.box {
width: 200px; /* 设置宽度 */
height: 200px; /* 设置高度 */
border: 1px solid #ccc; /* 设置边框 */
margin: 10px; /* 设置外边距 */
padding: 20px; /* 设置内边距 */
}
```
**响应式设计**
```css
/* 针对移动设备 */
@media (max-width: 768px) {
body {
font-size: 18px; /* 调整字体大小以适应小屏幕 */
}
}
/* 针对桌面设备 */
@media (min-width: 769px) {
body {
font-size: 16px; /* 恢复正常的字体大小 */
}
}
```
**伪类和伪元素**
伪类用于选择特定状态的元素，如悬停状态或活动状态。伪元素用于选择元素的特定部分，如元素的第一个字或第一个字母。例如： `:hover` 是一个伪类，`::before` 是一个伪元素。下面是它们的一些例子：鼠标悬停改变颜色： `a:hover { color: red }`。在段落前添加装饰性引号： `p::before { content: "“"; }`。请注意，伪元素常常与 `content` 属性一起使用。这只是CSS的冰山一角，还有许多其他样式和属性可以学习和使用。我建议你查看一些在线教程或书籍以深入了解CSS的更多内容。