网页设计基础 第十一讲：色彩斑斓的网页——CSS基础概览

TechLearn
2,911 阅读3分钟

引言

在HTML的基础上，我们已经搭建起了网页的骨架，但想要让网页变得生动、吸引人，还需要给它穿上一件美丽的外衣。CSS，即层叠样式表，正是用来为网页增添色彩、布局和样式的强大工具。本章将带你走进CSS的世界，了解其基本概念、发展历程以及为什么它是现代网页设计不可或缺的一部分。让我们一起揭开CSS的神秘面纱，为我们的网页注入不一样的体验！

什么是CSS？

1.CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。

2.CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。

3.CSS 是用来表现HTML或XML的标记语言。

4.CSS 是由W3C的CSS工作组发布推荐和维护的.

5.CSS 是编程入门人员的必修课，运用CSS样式可以让页面变得美观。

6.CSS语法由三部分构成：选择器、属性和值： selector {property: value}

使用CSS优势

  • 内容与表现分离，有了CSS，网页的内容(XHTML)与表现就可以分开了。
  • 使用CSS可以减少网页的代码量，增加网页的浏览速度。

如何使用CSS

有三种方法可以在站点网页上使用样式表：

  1. 外联式Linking（也叫外部样式）：将网页链接到外部样式表。
  2. 嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
  3. 内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。

其中，优先级：内联式 > 嵌入式 > 外联式

使用CSS示例

  1. 外部样式（External Style Sheets） 外部样式表通常保存在一个单独的.css文件中，并通过标签将其链接到HTML文档中。这种方法是最常用和最推荐的方法，因为它可以让样式和内容分离，便于维护和管理。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式示例</title>
    <!-- 引用外部样式表 -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用外部样式表的例子。</p>
</body>
</html>
相应的styles.css文件内容：
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
}
  1. 嵌入式样式（Embedded Style Sheets） 嵌入式样式表是将CSS代码放在HTML文档内的标签中。这种方式适用于当样式只应用于当前页面时的情况。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌入式样式示例</title>
    <!-- 创建嵌入式样式表 -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个使用嵌入式样式表的例子。</p>
</body>
</html>
  1. 内联样式（Inline Styles） 内联样式是直接在HTML标签中通过style属性来指定样式的。这种方法通常不推荐用于大型项目，因为它难以维护且不利于样式重用。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内联样式示例</title>
</head>
<body>
    <h1 style="color: #333; font-family: Arial, sans-serif;">欢迎来到我的网站</h1>
    <p style="background-color: #f4f4f4; padding: 10px;">这是一个使用内联样式表的例子。</p>
</body>
</html>

以上三种方式分别展示了如何在网页上应用CSS样式。根据具体情况选择合适的方法可以有效地提高网页的设计效率和维护便利性。

VSCode支持CSS的插件

  • HTML CSS Support：此插件提供HTML和CSS的基本代码补全和语法高亮功能，适合初学者使用。
  • Fitten Code :AI编程插件
    通过安装合适的插件，可以进一步提高CSS编码的效率和准确性，让网页设计变得更加简单和高效。

在本章中，我们初步了解了CSS的基本概念及其在网页设计中的重要性，并通过几种不同的方式展示了如何将样式应用到HTML文档中。现在，我们将更进一步，深入探讨CSS的语法细节，并通过具体的示例来巩固所学的知识。掌握CSS语法不仅能够帮助我们更精细地控制网页的外观，还能提高我们解决问题的能力，使网页设计更加灵活多样。

avatar
文章
阅读
粉丝