【web前端HTML+CSS+JS】--- CSS学习笔记02

在CSS中，我们可以使用不同的属性来改变元素的样式。以下是一些常用的CSS属性：

1. 字体属性：

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

2. 文本属性：

   • color：定义文本颜色。
   • text-align：定义文本对齐方式。
   • text-decoration：定义文本装饰（如下划线）。
   • text-transform：定义文本大小写。

3. 背景属性：

   • background-color：定义背景颜色。
   • background-image：定义背景图片。
   • background-repeat：定义背景图片是否重复。
   • background-position：定义背景图片的位置。

4. 边框属性：

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

5. 盒模型属性：

   • margin：设置外边距。
   • padding：设置内边距。
   • width和height：控制元素的宽度和高度。

6. 布局属性：

   • display：设置元素的显示类型（如块级或内联）。
   • position：设置元素的定位方式（静态、相对、绝对或固定）。
   • top、right、bottom和left：用于绝对定位的元素，设置其距离四边的距离。

7. 其他属性：

   • opacity：设置元素的不透明度。
   • filter：应用滤镜效果（如模糊或阴影）。

示例代码：

/* 设置字体类型、大小和颜色 */
p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333333;
}
 
/* 设置文本对齐和装饰 */
a {
  text-align: center;
  text-decoration: none;
}
 
/* 设置背景颜色和图片 */
body {
  background-color: #f0f0f0;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: center;
}
 
/* 设置边框 */
div {
  border: 1px solid #000000;
}
 
/* 设置外边距、内边距和宽度 */
.box {
  margin: 10px;
  padding: 20px;
  width: 300px;
  height: 200px;
}
 
/* 设置元素的显示类型和定位 */
.fixed-box {
  display: block;
  position: fixed;
  bottom: 0;
  right: 0;
}
 
/* 设置不透明度 */
.transparent-box {
  opacity: 0.5;
}

这些CSS属性可以应用于HTML文档中的任何元素，以改变其样式。通过组合使用这些属性，开发者可以创建出丰富多样的网页布局和设计。