代码预览 HTML CSS 标签 - CSS

在网页设计中，CSS标签是一种用于控制HTML元素样式和布局的样式表语言。本篇文章将向您介绍CSS常用的标签和属性。

基础语法

CSS代码以选择器开始，选择器是指定待样式化元素的标签（如div、p）或其它属性（如class、id等）组成的字符串。

然后，在花括号内，您可以列出一系列希望应用于该选择器的样式属性和值列表。如下所示：

selector {
  property1: value1;
  property2: value2;
  propertyn: valuen;
}

例如，使用font-size属性设置文本大小（单位通常是像素px）：

p {
  font-size: 14px;
}

常用CSS标签

文本样式

属性 | 描述 --- | --- color | 文本颜色 font-size | 字号大小 font-family | 字体 font-weight | 字重

背景样式

属性 | 描述 --- | --- background-color | 背景颜色 background-image | 背景图片 background-repeat | 背景图片重复方式 background-position | 背景图片位置

盒子模型样式

属性 | 描述 --- | --- width | 盒子宽度 height | 盒子高度 padding | 内边距 margin | 外边距 border | 边框 box-shadow | 盒子阴影

定位样式

属性 | 描述 --- | --- position | 定位方式 top | 距离顶部距离 bottom | 距离底部距离 left | 距离左侧距离 right | 距离右侧距离 z-index | 元素层级

简单示例

以下示例设置了h1元素的字体颜色为蓝色，背景为灰色，给它的内部添加了50px的上外边距和20px的下内边距：

h1 {
  color: blue;
  background-color: gray;
  margin-top: 50px;
  padding-bottom: 20px;
}

总结

以上是CSS标签和属性的简单介绍，希望能帮助读者更好地了解如何使用CSS控制网页元素样式和布局。