CSS 教程

CSS 教程

什么是 CSS

CSS，即层叠样式表（Cascading Style Sheets），是一种用于描述 HTML 或 XML 文档样式（布局、字体、颜色等）的语言。通过 CSS，我们可以将页面的外观和样式与页面的内容（HTML 或 XML）分离，使得页面的设计更加灵活、易于维护。

CSS 的语法

CSS 由选择器（Selector）、属性（Property）和值（Value）组成，其中：

  • 选择器指定要应用样式的 HTML 元素
  • 属性指定要设置的样式属性，例如颜色、字体等
  • 值则指定属性的具体取值

CSS 规则通常的结构如下：

selector {
  property: value;
}

例如，以下代码将 h1 元素的字体颜色设置为红色：

h1 {
  color: red;
}

需要注意的是，CSS 中的属性和值都是大小写不敏感的。例如，color 和 Color、red 和 RED 是等价的。

如何将 CSS 应用到 HTML 文档

将 CSS 应用到 HTML 文档有以下三种方式：

1. 内联样式

我们可以直接在 HTML 元素上使用 style 属性，将样式应用于该元素。例如：

<h1 style="color: red;">Hello World!</h1>

需要注意的是，内联样式的优先级最高，通常不建议使用内联样式。

2. 嵌入样式

我们可以在 HTML 文档的 head 标签中使用 style 标签，定义一组或多组样式。例如：

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
<body>

需要注意的是，嵌入样式的优先级仅次于内联样式，通常建议使用外部样式表。

3. 外部样式表

我们可以将样式定义在一个外部的 .css 文件中，然后在 HTML 文档中使用 link 标签引入该文件。例如：

  1. 在 styles.css 文件中定义样式：

    h1 {
  color: red;
}

  2. 在 HTML 文档中使用 link 标签引入样式文件：

    <head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello World!</h1>
<body>

需要注意的是，外部样式表的优先级最低，通常建议使用外部样式表。

CSS 的选择器

选择器用于指定要应用样式的 HTML 元素。CSS 中有许多种选择器，包括：

标签选择器

标签选择器用于选择指定标签名的所有元素。例如，以下代码将文档中所有 p 元素的字体颜色设置为蓝色：

p {
  color: blue;
}

类选择器

类选择器用于选择具有相同类名（class 属性值）的所有元素。例如，以下代码将文档中所有 class 属性值为 myclass 的元素的背景色设置为灰色：

.myclass {
  background-color: gray;
}

ID 选择器

ID 选择器用于选择唯一的元素（id 属性值）。例如，以下代码将文档中 id 属性值为 myid 的元素的字体颜色设置为紫色：

#myid {
  color: purple;
}

子元素选择器

子元素选择器用于选择指定元素的直接子元素。例如，以下代码将文档中 div 元素下所有直接子元素（h1 元素）的字体颜色设置为红色：

div > h1 {
  color: red;
}

伪类选择器

伪类选择器用于选择元素的特定状态。例如，以下代码将文档中所有未访问过的链接的颜色设置为蓝色：

a:link {
  color: blue;
}

CSS 的盒子模型

在学习 CSS 布局之前，你需要先了解 CSS 的盒子模型。每个 HTML 元素都被视为一个矩形盒子，它由四个部分组成：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content）。

CSS 盒子模型

通过设置元素的外边距、边框和内边距，我们可以控制盒子的大小和位置；通过设置元素的内容样式，我们可以实现元素的具体样式。

CSS 的定位方式

CSS 提供了三种定位方式，分别是相对定位（Relative Positioning）、绝对定位（Absolute Positioning）和固定定位（Fixed Positioning）。这三种定位方式可以使我们更加灵活地排版页面。

相对定位

相对定位使元素相对于其原始位置进行移动，但并不影响其他元素的布局。通过设置 position: relative; ，我们可以启用相对定位。然后，通过设置 top、right、bottom 和 left 属性，我们可以定义元素相对于其原始位置的偏移量。

例如，以下代码将文档中第一个 h1 元素向下移动 20 像素：

h1:first-of-type {
  position: relative;
  top: 20px;
}

绝对定位

绝对定位使元素从文档流中脱离，并相对于最近的已定位祖先元素进行定位。通过设置 position: absolute; ，我们可以启用绝对定位。然后，通过设置 top、right、bottom 和 left 属性，我们可以定义元素相对于其祖先元素的偏移量。

例如，以下代码将文档中第一个 h1 元素相对于 div 元素的左上角向下移动 20 像素和向右移动 50 像素：

h1:first-of-type {
  position: absolute;
  top: 20px;
  left: 50px;
}

固定定位

固定定位与绝对定位类似，但它相对于浏览器窗口而不是文档进行定位。通过设置 position: fixed; ，我们可以启用固定定位。然后，通过设置 top、right、bottom 和 left 属性，我们可以定义元素相对于浏览器窗口的偏移量。

例如，以下代码将文档中第一个 h1 元素固定在浏览器窗口右下角：

h1:first-of-type {
  position: fixed;
  bottom: 0;
  right: 0;
}

CSS 的响应式设计

响应式设计（Responsive Design）是指根据设备屏幕大小和方向调整页面布局和样式的技术。通过使用 CSS 媒体查询（Media Queries），我们可以针对不同的设备类型（例如手机、平板和台式机）和屏幕尺寸调整页面布局和样式。

例如，以下代码将文档在窗口宽度小于 768 像素时，将 h1 元素的字体大小调整为 24 像素：

@media (max-width: 768px) {
  h1 {
    font-size: 24px;
  }
}

总结

CSS 是一种用于描述 HTML 或 XML 文档样式的语言，通过 CSS 可以将页面的外观和样式与页面的内容（HTML 或 XML）分离，使得页面的设计更加灵活、易于维护。

CSS 由选择器、属性和值组成，并提供了多种选择器和定位方式，使我们可以更加灵活地排版页面。

响应式设计是基于 CSS 媒体查询的技术，能够针对不同的设备类型和屏幕尺寸调整页面布局和样式，使页面在各种设备上均具有良好的视觉效果。

CSS 提示工具(Tooltip) CSS 文本格式