zh-CN/web_development/css_examples

CSS 是网页开发中用于美化网页样式的重要工具。以下是一些 CSS 的示例，可以帮助您更好地理解和使用 CSS。

CSS 基础示例

1. 设置背景颜色

   body {
     background-color: #f2f2f2;
   }
   

2. 设置文字样式

   h1 {
     color: #333;
     font-family: Arial, sans-serif;
   }
   

3. 设置边框

   div {
     border: 1px solid #ccc;
     padding: 10px;
   }
   

4. 设置内联样式

   <p style="color: red;">这是一个红色的段落。</p>
   

CSS 高级示例

1. 响应式设计 使用媒体查询来适应不同屏幕尺寸。

   @media (max-width: 600px) {
     body {
       background-color: #e0e0e0;
     }
   }
   

2. 动画效果 使用 CSS3 的 @keyframes 实现动画。

   @keyframes example {
     from {background-color: red;}
     to {background-color: yellow;}
   }
   div {
     width: 100px;
     height: 100px;
     animation-name: example;
     animation-duration: 4s;
   }
   

3. Flexbox 布局 使用 Flexbox 实现复杂布局。

   .flex-container {
     display: flex;
     justify-content: space-around;
   }
   .flex-item {
     width: 100px;
     height: 100px;
     background-color: #f00;
   }
   

扩展阅读

如果您想了解更多关于 CSS 的知识，可以访问我们的 CSS 教程。

CSS 示例图片