目录

CSS常用标签集合汇总

2023-07-27 约 931 字预计阅读 2 分钟

目录

CSS（层叠样式表）是一种用于控制网页样式和布局的语言。以下是CSS中常用的标签及其解释和示例：

color：用于控制文本颜色。

代码示例：
```
p {
  color: red;
}
```
```

background-color：用于控制背景颜色。

代码示例：
```
body {
  background-color: #f2f2f2;
}
```
```
font-size：用于控制字体大小。

代码示例：
```
h1 {
  font-size: 36px;
}
```
```
font-family：用于控制字体样式。

代码示例：
```
body {
  font-family: Arial, sans-serif;
}
```
```
text-align：用于控制文本对齐方式。

代码示例：
```
p {
  text-align: center;
}
```
```
border：用于控制边框样式和宽度。

代码示例：
```
.box {
  border: 1px solid black;
}
```
```
padding：用于控制内边距。

代码示例：
```
.box {
  padding: 10px;
}
```
```
margin：用于控制外边距。

代码示例：
```
.box {
  margin: 10px;
}
```
```
display：用于控制元素的显示方式。

代码示例：
```
.box {
  display: inline-block;
}
```
```
float：用于控制元素的浮动方式。

代码示例：
```
.box {
  float: left;
}
```

position：用于控制元素的定位方式。

代码示例：

        
.box {
  position: relative;
  top: 50px;
  left: 50px;
}

opacity：用于控制元素的不透明度。

代码示例：
```
.box {
  opacity: 0.5;
}
```

以上是CSS中常用的标签及其解释和示例。

好的，以下是CSS中常用的标签，其中已经在之前回答中提到的标签将不再重复解释：

text-decoration：用于控制文本修饰，如下划线、删除线等。

代码示例：

        
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
```

list-style：用于控制列表样式，如圆点、数字等。

代码示例：
```
ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}
```
```
line-height：用于控制行高。

代码示例：
```
p {
  line-height: 1.5;
}
```
```

text-transform：用于控制文本大小写。

代码示例：

        
h1 {
  text-transform: uppercase;
}

p {
  text-transform: lowercase;
}
```

font-weight：用于控制字体粗细。

代码示例：

        
h1 {
  font-weight: bold;
}

p {
  font-weight: normal;
}
```

text-shadow：用于添加文本阴影效果。

代码示例：
```
h1 {
  text-shadow: 2px 2px 2px #ccc;
}
```
```
box-shadow：用于添加盒子阴影效果。

代码示例：
```
.box {
  box-shadow: 2px 2px 2px #ccc;
}
```
```
background-image：用于添加背景图片。

代码示例：
```
body {
  background-image: url("bg.jpg");
}
```
```
background-repeat：用于控制背景图片的重复方式。

代码示例：
```
body {
  background-repeat: no-repeat;
}
```
```
background-position：用于控制背景图片的位置。

代码示例：
```
body {
  background-position: center;
}
```
background-size：用于控制背景图片的大小。

代码示例：
```
body {
  background-size: cover;
}
```

以上是CSS中常用的标签及其解释和示例。