CSS 区域

📌 相关文章

📜 CSS 区域 - CSS (1)

📅 最后修改于: 2023-12-03 15:30:10.929000 🧑 作者: Mango

CSS 区域 - CSS

CSS (Cascading Style Sheets) 是一种用于表现 HTML 或 XML 等文件样式的计算机语言。CSS 帮助开发人员控制 WEB 页面中的排版、布局、颜色、字体等外观。在 CSS 中，选择器与样式声明构建出规则，规定了某一部分 WEB 页面如何呈现出来。

在一个 HTML 文档中，CSS 的应用可以归为三类：内联样式，内部样式和外部样式。

内联样式

在 HTML 标签中直接编写 CSS 样式称为内联样式。内联样式使用 style 属性来定义 CSS 样式。例如：

<button style="color: red; background-color: yellow;">Click Me!</button>

内部样式

在 HTML 页面中使用 <style> 标签定义 CSS 的样式称为内部样式。通常在 <head> 标签内添加 <style> 标签。

<head>
  <style>
    p {
      color: red;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <p>This is a paragraph.</p>
</body>

外部样式

在一个单独的 .css 文件中定义样式称为外部样式。外部样式表文件必须在 HTML 页面中使用 <link> 标签引用。

例如：在 style.css 中定义样式

p {
  color: red;
  background-color: yellow;
}

在引用 HTML 文件中使用 <link> 标签

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <p>This is a paragraph.</p>
</body>

CSS 选择器

CSS 选择器指定了要应用 CSS 样式规则的元素。CSS 支持多种选择器类型，例如元素选择器、类选择器、ID 选择器、通配符选择器、属性选择器等。

以下是常见的 CSS 选择器：

元素选择器：选择 HTML 元素。
类选择器：选择带有指定类名的 HTML 元素。
ID 选择器：选择具有指定 ID 的 HTML 元素。
通配符选择器：选择所有 HTML 元素。
属性选择器：选择带有指定属性的 HTML 元素。
后代选择器：选择指定元素的后代元素。
相邻兄弟选择器：选择与指定元素相邻的兄弟元素。
伪类选择器：选择符合某一状态条件的元素，例如 :hover 鼠标悬停的元素。

以下代码片段演示了如何使用类和 ID 选择器：

<head>
  <style>
    .header {
      color: red;
      background-color: yellow;
    }

    #content {
      color: blue;
      background-color: grey;
    }
  </style>
</head>

<body>
  <div class="header">
    This is a header.
  </div>

  <div id="content">
    This is the content.
  </div>
</body>

结论

CSS 是前端开发的重要一环，掌握 CSS 的基础知识可以帮助开发人员更好的进行页面开发。熟悉 CSS 的选择器和样式表的三种引入方式可以快速编写丰富多彩的页面布局及样式。