【CSS】入门详解

news2024/10/29 3:09:56

你是否曾经浏览网页时，被一些网站精美的布局、炫酷的动画和赏心悦目的色彩所吸引？这背后神奇的力量就是 CSS（层叠样式表）。CSS 就像网页的化妆师，它负责网页的样式和布局，让原本枯燥的 HTML 结构变得生动有趣。

一、什么是 CSS？

CSS 是一种用于描述网页呈现方式的样式表语言。它控制着网页的布局、字体、颜色、背景、动画等等。通过 CSS，你可以将网页的内容和样式分离，使得网页更易于维护和修改。

二、如何使用 CSS？

CSS 可以通过三种方式添加到 HTML 文档中：

内联样式 (Inline Styles): 直接在 HTML 标签内使用 style 属性。
```
<p style="color: blue; font-size: 18px;">这段文字是蓝色的，字体大小为 18px。</p>
```
- 优点: 修改方便快捷，作用范围精确到单个元素。
- 缺点: 不利于代码复用，难以维护，不推荐大规模使用。
- 优先级: 最高
内部样式表 (Internal Stylesheet): 在 HTML 文档的 <head> 部分使用 <style> 标签。
```
<head>
  <style>
    p {
      color: green;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>这段文字是绿色的，并且加粗。</p>
</body>
```
- 优点: 适用于单个页面的样式定义，比内联样式更容易管理。
- 缺点: 不能跨页面复用。
- 优先级: 中等
外部样式表 (External Stylesheet): 创建一个独立的 CSS 文件 (例如 style.css)，然后在 HTML 文档的 <head> 部分使用 <link> 标签链接到该文件。
```
<head>
  <link rel="stylesheet" href="style.css">
</head>
```
```
/* style.css */
p {
  color: red;
  font-style: italic;
}
```
- 优点: 最常用也最推荐，可以实现样式的复用，方便维护和管理，易于团队协作。
- 缺点: 需要额外加载 CSS 文件。
- 优先级: 最低

三、CSS 的基本语法

CSS 规则由选择器和声明块组成。

选择器 (Selector): 指示要样式化的 HTML 元素。
声明块 (Declaration Block): 包含一个或多个声明，每个声明由属性和值组成，用冒号分隔，以分号结尾。

/* 选择器 { 属性: 值; 属性: 值; ... } */
h1 {
  color: blue;  /* 文本颜色为蓝色 */
  font-size: 36px; /* 字体大小为 36 像素 */
}

四、CSS 选择器优先级详解

当多个 CSS 规则应用于同一个 HTML 元素时，最终应用的样式取决于选择器的优先级。优先级可以理解为一个计分系统，分数越高，优先级越高。

!important: 拥有最高的优先级，会覆盖所有其他样式。慎用！过度使用会使 CSS 难以维护。
内联样式: 优先级仅次于 !important。
ID 选择器 (#id): 例如 #myElement。
类选择器 (.class)、属性选择器 ([attribute])、伪类 (:pseudo-class): 例如 .highlight, [type="text"], :hover。
元素选择器 (element) 和伪元素 (::pseudo-element): 例如 p, div, ::before。
通配符选择器 (*): 优先级最低。

五、计算优先级

可以将选择器的优先级表示为四个数字 (a, b, c, d)：

a: 如果声明中有 !important，则 a = 1，否则 a = 0。
b: ID 选择器的数量。
c: 类选择器、属性选择器和伪类的数量。
d: 元素选择器和伪元素的数量。

比较两个选择器的优先级时，从左到右依次比较 a、b、c、d 的值。哪个数字先出现更大的值，哪个选择器的优先级就更高。

示例

<div id="myDiv" class="highlight">
  <p>This is a paragraph.</p>
</div>

#myDiv p { color: red; }  /* (0, 1, 0, 1) */
div.highlight p { color: green; } /* (0, 0, 1, 1) */
p { color: blue; } /* (0, 0, 0, 1) */

最终段落文字颜色为红色，因为 #myDiv p 的优先级最高。

六、案例

为了更好地理解 CSS 的应用，我们来看一个具体的案例。我们将创建一个简单的网页，包含一个标题、一个段落和一个按钮，并使用 CSS 设置它们的样式。

HTML 结构 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 入门案例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>欢迎来到我的网页</h1>
  </header>
  <main>
    <p>这是一段简单的文本，我们将使用 CSS 设置它的样式。</p>
    <button>点击我</button>
  </main>
</body>
</html>

CSS 样式 (style.css)

/* 全局样式 */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

/* 标题样式 */
h1 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

/* 段落样式 */
p {
  font-size: 18px;
  line-height: 1.6;
  color: #666;
}

/* 按钮样式 */
button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer; /* 鼠标悬停时显示小手 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}

button:hover {
  background-color: #0056b3; /* 鼠标悬停时改变背景颜色 */
}

/*  媒体查询示例，当屏幕宽度小于 768px 时应用 */
@media (max-width: 768px) {
  body {
    padding: 10px;
  }
  h1 {
    font-size: 24px;
  }
}

代码解释:

body 选择器: 设置了全局字体、去除默认外边距、添加内边距和背景颜色。
h1 选择器: 设置了标题颜色、居中对齐和底部外边距。
p 选择器: 设置了段落字体大小、行高和颜色。
button 选择器: 设置了按钮的背景颜色、文本颜色、内边距、去除边框、设置圆角边框、鼠标样式和过渡效果。
button:hover 伪类选择器: 设置鼠标悬停在按钮上时的样式，改变背景颜色。
@media (max-width: 768px): 这是一个媒体查询的例子，当屏幕宽度小于 768px 时，会应用其中的样式，例如调整 body 的内边距和 h1 的字体大小，以适应 smaller screens.

运行结果:

学习要点:

选择器的使用: 这个例子使用了元素选择器 (body, h1, p, button) 和伪类选择器 (button:hover)。
CSS 属性: 学习了常用的 CSS 属性，例如 color, font-size, background-color, margin, padding, border, border-radius, cursor, transition 等.
层叠性: 如果在 HTML 中使用内联样式，它会覆盖 CSS 文件中的样式。
优先级: 理解不同选择器的优先级，例如 button:hover 的优先级高于 button。
响应式设计: 通过媒体查询 @media 可以根据不同的屏幕尺寸应用不同的样式。