css常用的样式

介绍内容：
CSS（层叠样式表）是一种用于网页设计的样式表语言，它可以让我们对 HTML 元素进行外观设定，让网页更加生动和美观。
盒模型：
在 CSS 中，盒模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。了解盒模型有助于我们更好地调整元素的大小和外观。
颜色与背景：
使用 CSS 可以轻松地为网页元素设置颜色和背景。例如：

/* 设置元素颜色 */  
color: red;
/* 设置背景颜色 */  
background-color: #fff;
/* 设置背景图片 */  
background-image: url('image.jpg');  

字体样式：
CSS 提供了丰富的字体样式，如字体、字号、字体样式（normal、italic、bold 等）和字体系列（如微软雅黑、宋体等）。以下是一个示例：

font-family: "Microsoft YaHei";  
font-size: 14px;  
font-weight: bold;  
font-style: italic;  

文本样式：
CSS 可以调整文本的各种属性，如首行缩进、字母间距、词间距等。以下是一个示例：

/* 首行缩进 */  
text-indent: 1em;
/* 字母间距 */  
letter-spacing: 5px;
/* 单词间距 */  
word-spacing: 6px;  

布局：
CSS 提供了多种布局方式，如浮动（float）、定位（position）、弹性盒子（flexbox）等。以下是一个浮动布局的示例：

.container {  
  width: 100%;  
  padding: 0 10px;  
}
.box1 {  
  float: left;  
  width: 30%;  
  height: 200px;  
  background-color: red;  
}
.box2 {  
  float: left;  
  width: 70%;  
  height: 200px;  
  background-color: blue;  
}

列表样式：
CSS 可以对列表项进行样式设置，如符号、缩进、背景等。以下是一个无序列表的示例：

ul {  
  list-style: none;  
  padding: 0;  
}
li {  
  background-color: #f0f0f0;  
  padding: 10px;  
  margin-bottom: 10px;  
}

响应式设计：
使用 CSS 媒体查询（media query），我们可以针对不同设备和屏幕尺寸创建适应性布局。以下是一个响应式设计的示例：

/* 移动端样式 */  
@media (max-width: 768px) {  
  .container {  
    width: 100%;  
  }  
}
/* 平板设备样式 */  
@media (min-width: 769px) and (max-width: 1024px) {  
  .container {  
    width: 90%;  
  }  
}
/* 桌面端样式 */  
@media (min-width: 1025px) {  
  .container {  
    width: 80%;  
  }  
}

以上仅为 CSS 常用样式的一部分，实际上 CSS 还有更多强大的功能等待我们去探索。希望本次分享对大家有所帮助，欢迎进一步学习和实践 CSS，让我们的网页更加美观和易用！
在实际开发过程中，我们可以通过查阅相关文档、学习优秀案例和参与讨论来不断提高自己的 CSS 技能。最后，祝大家在 CSS 学习的道路上越走越远，打造出一幅属于自己的技术版图！