【Web前端笔记】CSS常用属性

在CSS中，有许多常用的属性，这些属性可以用来控制网页中元素的样式。以下是一些常用的CSS属性：

1. 字体属性：

   • font-family：设置字体类型。
   • font-size：设置字体大小。
   • font-weight：设置字体粗细。
   • font-style：设置字体风格（如斜体）。

2. 文本属性：

   • color：设置文本颜色。
   • text-align：设置文本对齐方式。
   • text-decoration：设置文本装饰（如下划线）。
   • text-transform：设置文本大小写。
   • letter-spacing：设置字符之间的间距。
   • line-height：设置行高。

3. 背景属性：

   • background-color：设置背景颜色。
   • background-image：设置背景图片。
   • background-repeat：设置背景图片是否和重复。
   • background-position：设置背景图片的位置。
   • background-size：设置背景图片的大小。

4. 边框属性：

   • border：设置边框的宽度、样式和颜色。
   • border-radius：设置边框圆角。

5. 盒模型属性：

   • margin：设置外边距。
   • padding：设置内边距。
   • width：设置元素的宽度。
   • height：设置元素的高度。
   • box-shadow：设置盒子阴影。

6. 布局属性：

   • display：设置元素的显示类型（如块级或内联）。
   • position：设置元素的定位方式（如相对、绝对或固定）。
   • top、right、bottom、left：设置元素的定位偏移。
   • float：设置元素的浮动方向。
   • clear：清除浮动影响。
   • overflow：设置元素的溢出处理。

7. 其他属性：

   • opacity：设置元素的透明度。
   • cursor：设置鼠标指针悬停时的光标形状。
   • z-index：设置元素的堆叠顺序。

以下是一个简单的示例代码，展示了如何使用这些属性：

/* 设置字体类型和大小 */
p {
  font-family: "Arial", sans-serif;
  font-size: 16px;
}
 
/* 设置文本颜色、对齐方式和装饰 */
h1 {
  color: #333333;
  text-align: center;
  text-decoration: underline;
}
 
/* 设置背景颜色、图片、是否重复以及位置 */
body {
  background-color: #f0f0f0;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: center;
}
 
/* 设置边框的宽度、样式和颜色 */
div {
  border: 2px solid #000000;
  border-radius: 5px;
}
 
/* 设置元素的外边距、内边距、宽度和高度 */
.box {
  margin: 10px;
  padding: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 5px 5px 10px #888888;
}
 
/*