css 常用样式(分享)

1. CSS 常用样式

CSS（层叠样式表）是一种用于描述网页样式的语言。通过为 HTML 文档应用样式，可以实现网页的美化和布局。本文将介绍一些常用的 CSS 样式。

1.1 字体样式

字体样式是指网页中文字的样式。可以设置字体的类型、大小、颜色、加粗等属性，例如：

/* 设置段落中的文字为红色 */
p {
  color: red;
}
/* 设置标题为粗体 */
h1 {
  font-weight: bold;
}
/* 设置链接的文字为蓝色 */
a {
  color: blue;
}
/* 设置文字大小为14像素 */
p {
  font-size: 14px;
}

通过以上样式的设置，可以改变网页中文字的显示效果。

1.2 背景样式

背景样式是指网页元素的背景样式。可以设置背景的颜色、图片、重复方式等属性，例如：

/* 设置页面背景颜色为浅灰色 */
body {
  background-color: lightgray;
}
/* 设置元素的背景图片 */
div {
  background-image: url("background.jpg");
}
/* 设置背景图片平铺 */
div {
  background-repeat: repeat;
}

通过以上样式的设置，可以为网页元素添加背景，并调整背景效果。

1.3 边框样式

边框样式是指网页元素的边框样式。可以设置边框的宽度、颜色、样式等属性，例如：

/* 设置元素的边框宽度为2像素 */
div {
  border-width: 2px;
}
/* 设置边框颜色为红色 */
div {
  border-color: red;
}
/* 设置边框样式为虚线 */
div {
  border-style: dashed;
}

通过以上样式的设置，可以为网页元素添加边框，并调整边框的样式。

1.4 布局样式

布局样式是指网页中元素的排列方式和位置。可以设置元素的宽度、高度、浮动、定位等属性，例如：

/* 设置元素宽度为300像素 */
div {
  width: 300px;
}
/* 设置元素相对于父元素左对齐 */
div {
  float: left;
}
/* 设置元素相对于页面绝对定位 */
div {
  position: absolute;
  top: 100px;
  left: 50px;
}

通过以上样式的设置，可以实现网页中元素的自适应排列和定位。

2. 总结

本文介绍了一些常用的 CSS 样式，包括字体样式、背景样式、边框样式和布局样式。这些样式可以帮助我们实现网页的美化和布局。在实际使用中，可以根据需要组合使用这些样式，以达到预期的效果。

要注意的是，样式的设置可以通过选择器来指定作用的元素。例如，可以使用标签选择器、类选择器或 ID 选择器来控制样式的应用范围。

通过学习和运用这些常用的 CSS 样式，我们可以打造出更具吸引力和可读性的网页。