CSS 示例

CSS 是一种用于控制网页上元素样式和布局的样式表语言。在本示例中，我们将演示一些常见的 CSS 属性和用法。

选择器

使用选择器可以选择页面上的元素，并对其样式进行定义。以下是一些常见的选择器示例：

元素选择器

p {
  color: blue;
}

上述代码将应用 blue 样式于所有段落元素。

类选择器

.warning {
  color: red;
}

上述代码将应用 red 样式于所有带有 class="warning" 的元素。

ID选择器

#header {
  font-size: 24px;
}

上述代码将应用 24px 字体大小于 ID 为 "header" 的元素。

样式属性

以下是一些常见的 CSS 样式属性示例：

背景图片

body {
  background-image: url("background.png");
}

上述代码将设置网页背景为名为 "background.png" 的图像。

颜色

h1 {
  color: #ff0000;
}

上述代码将设置

元素的颜色为红色。

边框

button {
  border: 2px solid black;
}

上述代码将为所有按钮元素添加 2px 宽度的黑色实线边框。

布局

使用 CSS 还可以调整元素的布局。以下是一些常见的 CSS 布局示例：

盒子模型

div {
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

上述代码将定义一个 div 元素的边距为 10px，内边距为 10px，边框为 1px 实线黑色边框。

定位

#sidebar {
  position: absolute;
  top: 50px;
  right: 10px;
}

上述代码将使 ID 为 "sidebar" 的元素相对于其父元素定位，并置于网页顶部下方 50 像素、右边距离 10 像素的位置。

以上是一些常用的 CSS 示例。对于更多 CSS 属性和用法，请参考 CSS 文档。