基础 CSS 标注(1) - 芒果文档

📌 相关文章

📜 基础 CSS 标注(1)

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

基础 CSS 标注

什么是 CSS

CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述如何显示 HTML 或 XML 等文档的样式语言。CSS 的主要功能是为网页添加样式，使其更加美观、易于维护。

CSS 的基础语法

选择器

CSS 通过选择器来匹配 HTML 中的元素并为其添加样式。常见的选择器有以下几种：

元素选择器：通过元素名称来选择对应的元素。
类选择器：通过元素的 class 名称来选择对应的元素。
ID 选择器：通过元素的 ID 来选择对应的元素。
后代选择器：通过元素的后代关系来选择对应的元素。
伪类选择器：通过元素的状态来选择对应的元素。

例如，可以使用以下代码为 HTML 中所有的段落添加样式：

p {
  font-size: 16px;
  color: #333333;
}

属性和值

CSS 使用属性-值对来描述元素的样式。常见的属性包括：

color：文字颜色。
font-size：字体大小。
background-color：背景颜色。
padding：内边距。
margin：外边距。
border：边框。

例如，可以使用以下代码为 HTML 中某个元素添加背景颜色样式：

div {
  background-color: #ffffff;
}

注释

在 CSS 中，可以使用 /* 注释内容 */ 的格式来添加注释。

例如，可以使用以下代码添加注释：

/* 这是一个注释 */
div {
  background-color: #ffffff;
}

CSS 的使用

内部样式表

在 HTML 文件的 <head> 标签中，可以使用 <style> 标签来添加内部样式表。

例如，以下代码可以将 HTML 中所有的段落添加样式：

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <style>
    p {
      font-size: 16px;
      color: #333333;
    }
  </style>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>

外部样式表

可以将 CSS 样式代码保存在一个 .css 文件中，并在 HTML 文件中通过 <link> 标签引用。

例如，如果将以下代码保存为 styles.css 文件：

p {
  font-size: 16px;
  color: #333333;
}

则可以在 HTML 文件中使用以下代码引用该样式表：

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>Hello World!</p>
</body>
</html>

行内样式

可以在 HTML 元素的 style 属性中设置行内样式。

例如，以下代码可以为某个段落设置字体大小和颜色：

<p style="font-size: 16px; color: #333333;">Hello World!</p>

CSS 的盒模型

在 CSS 中，每个元素都被表示为一个矩形盒子，包括内容、内边距、边框和外边距。

内容

盒模型中最内层的是内容，表示文本、图片或其他嵌入在元素中的内容。

内边距

盒模型中紧接着内容的是内边距，由元素的边框和内容之间的空间组成。

边框

盒模型中再次包裹内边距的是边框，通常是一个可见的框线。

外边距

盒模型中最外层的是外边距，表示元素与其他元素之间的空间。

总结

本文介绍了 CSS 的基本语法、选择器、属性和值，以及 CSS 的使用方法和盒模型。掌握这些基础知识是学习 CSS 的必要前提。