当前位置：首页 > 文章列表 > 文章 > 前端 > 如何将 CSS 样式添加到 HTML 页面：初学者指南

如何将 CSS 样式添加到 HTML 页面：初学者指南

来源：dev.to 2024-09-09 14:52:08 0浏览收藏

大家好，今天本人给大家带来文章《如何将 CSS 样式添加到 HTML 页面：初学者指南》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

简介

想象一下您在厨房里，准备准备一道菜。主要成分 (html) 摆在您面前：肉、蔬菜、香料。但要将这些食材转化为烹饪杰作，您需要烹饪技术、调味料和摆盘——这就是 css（层叠样式表）发挥作用的地方。 css 就像网络的“调味艺术”：没有它，您的 html 页面将会很有营养，但有点乏味。在本指南中，我们将探索如何使用 css 来“调味”您的网站，将简单的 html 结构转换为一个视觉上吸引人且和谐的页面。

什么是 css？

css，即层叠样式表，是网页设计的“食谱”。就像在厨房里，您可以使用不同的烹饪技术来获得独特的风味一样，css 允许您以无数种方式设计您的 html 页面。 css 简史：诞生于 20 世纪 90 年代，css 通过分离网页，彻底改变了网页的设计方式。 “结构”(html) 来自“演示”(css)。

css 使用示例
就像您可以用一些酱汁为菜肴增添一抹色彩一样，使用 css，您可以为文本着色、创造性地排列元素，并为您的网页添加艺术气息。

将 css 添加到 html 页面的方法
可以通过三种主要方法将 css 添加到 html 页面，就像在厨房里准备菜肴有不同的方法一样。根据项目的需要，每种方法都有其优点和缺点。

内联 css

这就像直接在您的菜肴中添加一小撮盐：它适用于小的风格调整，但如果您需要为整个盛宴调味，则不理想。

示例：

<p style="color: blue;">blue text</p>

优点：易于使用且快速进行小更改。
缺点：在大型项目中难以维护，如果使用太频繁会造成混乱。

内部css：

这更像是在烹饪之前将特定成分腌制在碗中。您对单个页面使用特定样式，但所有更改都必须在该文档中进行。

示例：

<style>
  p {
    color: blue;
  }
</style>

优点：所有风格都集中在一处，易于控制。
缺点：仅适用于一页，不适合多页网站。

外部css：

这就像在罐子里准备一种特殊的酱汁并将其用于不同的菜肴：一个单独的样式表，您可以将其应用于网站的所有页面。

示例：

<link rel="stylesheet" href="styles.css">

优点：可重复使用，易于管理，非常适合大型网站。
缺点：需要管理多个文件，但这只是为多功能性付出的一个很小的代价。

就像遵循菜谱一样，css 有其基本语法，您需要了解这些语法才能做出完美的设计。

选择器

选择器是您想要设计样式的特定“成分”。您可以选择某种类型的所有元素（例如，p 表示段落）、使用类 (.class-name) 或 id (#id-name)。

示例：

p {
  color: red;
}

.highlight {
  background-color: yellow;
}

#main-title {
  font-size: 2em;
}

属性和值

属性就像香料：它们指定您要修改的内容（例如颜色、字体大小），而值是您使用的香料的数量或类型（例如红色、16px）。

示例：

p {
  color: red; /* property: color, value: red */
}

创建外部样式表
现在您已经了解了基本语法，是时候创建您的“秘密酱罐”了——一个可以应用于所有 html 页面的外部样式表。

创建外部样式表的步骤

创建一个名为 styles.css 的新文件。开始编写您的样式：

body {
  font-family: arial, sans-serif;
  background-color: #f4f4f4;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  line-height: 1.6;
}

使用中的标签将 css 文件链接到您的 html 页面：

<link rel="stylesheet" href="styles.css">

将 css 添加到您的 html 页面：

这是一个实际示例，说明如何将简单的 html 页面与外部样式表相结合来创建成品“菜肴”。

html：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my first styled page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>welcome to my web kitchen</h1>
    <p>this is my first html page with style!</p>
</body>
</html>

css：

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    line-height: 1.6;
}

成为真正的“网络厨师”的最佳实践，以下是一些值得遵循的最佳实践：

使用有意义的类名：
就像精心编写的菜谱一样，类名应该清楚地描述其用途。

组织您的样式表：
保持代码整洁并带有注释，就像一个整洁且组织良好的厨房一样。

避免过多的内联css：
正如您不会过度加盐一样，请避免应用太多内联样式并更喜欢外部样式表以获得更好的可维护性。