当前位置：首页 > CSS

网页制作css文档

2026-01-28 13:21:05CSS

CSS 文档的基本结构

CSS（层叠样式表）用于控制网页的样式和布局。一个标准的CSS文档通常包含以下部分：

选择器：指定需要样式化的HTML元素（如 p、.class、#id）。
属性和值：定义样式规则（如 color: red;）。

示例：

/* 注释：设置段落文本颜色和字体大小 */
p {
  color: blue;
  font-size: 16px;
}

/* 类选择器 */
.header {
  background-color: #f0f0f0;
  padding: 20px;
}

/* ID选择器 */
#main-content {
  width: 80%;
  margin: 0 auto;
}

常用的CSS属性

CSS属性涵盖文本、布局、背景、边框等样式控制：

文本样式

font-family: Arial, sans-serif; /* 字体 */
font-size: 14px; /* 字号 */
font-weight: bold; /* 加粗 */
text-align: center; /* 对齐 */
line-height: 1.5; /* 行高 */

盒模型

width: 100px; /* 宽度 */
height: 50px; /* 高度 */
padding: 10px; /* 内边距 */
margin: 20px; /* 外边距 */
border: 1px solid black; /* 边框 */

背景与颜色

background-color: #ffffff; /* 背景色 */
background-image: url("image.jpg"); /* 背景图 */
color: #333333; /* 文本颜色 */

CSS 布局技术

现代网页布局常使用 Flexbox 和 Grid：

Flexbox

.container {
  display: flex;
  justify-content: space-between; /* 水平对齐 */
  align-items: center; /* 垂直对齐 */
}

Grid

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
  gap: 10px; /* 间距 */
}

响应式设计

通过媒体查询适配不同设备屏幕：

@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 小屏幕改为垂直布局 */
  }
}

CSS 预处理器（如 Sass）

Sass 提供变量、嵌套等高级功能：

$primary-color: #3498db; /* 定义变量 */

.button {
  background: $primary-color;
  &:hover { /* 嵌套伪类 */
    background: darken($primary-color, 10%);
  }
}