基础CSS入门指南

网站美化

CSS

1周前 0 41

一、CSS的定义与作用

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML文档视觉表现的语言。其核心作用在于分离内容与表现形式，通过控制字体、颜色、布局、动画等视觉效果，实现网页的美化和布局优化。

— CSS的作用

美化界面：精确控制文本（字体、颜色、对齐）和图片（边框、边距）等元素。

布局控制：通过浮动、定位等技术实现页面元素的精准排列。

可维护性：外部样式表可被多个页面复用，修改样式无需逐个调整HTML文件。

浏览器兼容性：标准化样式规则减少不同浏览器的显示差异。

CSS语法由选择器、属性和值三部分构成，遵循以下格式：

选择器 {
  属性1: 值1;
  属性2: 值2;
}

选择器：定位HTML元素，常见类型包括：
- 标签选择器（如div、p）
- 类选择器（以.开头，如.menu）
- ID选择器（以#开头，如#header）
属性与值：
- 属性：如color（文字颜色）、margin（外边距）等
- 值：如blue（颜色值）、20px（像素单位）等
- 声明块：多个属性-值对组成一个声明块，如{ color: red; font-size: 16px; }

示例：

h1 {
  color: #333;
  font-family: Arial;
  margin-bottom: 20px;
}

方式	描述	示例	适用场景
内联样式	直接写在HTML元素的`style`属性中	`<p style="color: blue; font-size: 14px;">文本</p>`	快速测试或单个元素的简单样式
内部样式表	在HTML的`<style>`标签内定义样式	`html <style> body { background: #f0f0f0; } </style>`
单页面专用样式
外部样式表	通过`<link>`标签引入独立的`.css`文件	`html <link rel="stylesheet" href="styles.css">`
多页面共享样式，便于维护

优先级：内联样式 > 内部样式 > 外部样式（相同选择器下）

字体与文本：
- font-family（字体类型）、font-size（字号）
- text-align（对齐）、line-height（行高）
颜色与背景：
- color（文字颜色）、background-color（背景色）
- background-image（背景图片）
盒模型相关：
- 外边距：margin-top、margin-right
- 内边距：padding-left、padding-bottom
- 边框：border-width（宽度）、border-style（样式）
布局属性：
- width/height（尺寸）
- float（浮动）、position（定位）

示例：

.box {
  width: 300px;
  padding: 20px;
  margin: 10px auto;
  border: 1px solid #ccc;
  background: white;
}

盒模型组成：
- 内容区（Content）：元素的实际内容（如文本、图片）
- 内边距（Padding）：内容与边框之间的空白
- 边框（Border）：围绕内容和内边距的线条
- 外边距（Margin）：元素与其他元素之间的间隔

布局技术：
- 浮动（Float） ：实现多栏布局（如左图右文）
```
.img { float: left; margin-right: 20px; }
```
- 定位（Position）：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

通过掌握以上核心概念，差不多也能够独立完成网页的样式设计与布局美化了，为进一步学习响应式设计、动画等高级主题奠定基础。