CSS基础：定义和引入方式以及四种标签选择器详解

前端

2024-01-05 07:26:34

CSS：网页设计的艺术

什么是 CSS？

CSS（层叠样式表）是一种样式表语言，可让您控制 HTML 元素的外观和行为。它是一种强大的工具，可用于创建美观且引人入胜的网页，而无需修改底层 HTML 代码。

CSS 的优点

分离结构和样式： CSS 使您能够将网页的结构（HTML）与其样式（CSS）分开，从而提高可维护性和灵活性。
一致性： 您可以轻松地在整个网站上应用样式，确保一致的外观和用户体验。
响应性设计： CSS 非常适合创建响应式设计，这允许网页适应不同的屏幕尺寸和设备。
搜索引擎优化 (SEO)： 正确的 CSS 使用可以改善网页的 SEO，使其更容易被搜索引擎发现。

如何引入 CSS

有两种主要方法可以将 CSS 样式应用于 HTML 文档：

内联样式： 将样式直接应用于 HTML 元素中，使用 style 属性。
外联样式表： 创建一个单独的 .css 文件，其中包含所有样式规则，然后使用 <link> 标签将其链接到 HTML 文档。

CSS 选择器

CSS 选择器是用于指定要应用样式的 HTML 元素的强大工具。有各种类型，包括：

类型选择器： 选择具有特定 HTML 标签的元素，例如 p、h1、div。
类选择器： 选择具有特定 CSS 类的元素，例如 .red-text 或 .container。
ID 选择器： 选择具有特定 ID 的元素，例如 #header 或 #footer。
通用选择器： 选择所有元素，例如 *。

CSS 属性

CSS 属性定义要应用于选定元素的样式，例如颜色、字体、大小和边距。一些常见的属性包括：

color：设置文本颜色。
font-family：指定字体系列。
font-size：设置字体大小。
background-color：设置元素的背景颜色。
margin：设置元素的边距。

示例：使用 CSS 美化网页

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f2f2f2;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #333;
      font-size: 2em;
      text-align: center;
    }

    p {
      color: #666;
      font-size: 1.2em;
      text-align: justify;
    }
  </style>
</head>
<body>
  <h1>CSS 示例</h1>
  <p>CSS 是一种样式表语言，可让您控制网页的外观和行为。它非常强大，可以创建美观且引人入胜的网页。</p>
</body>
</html>