白骑士的HTML教学进阶篇 2.3 CSS基础

原创已于 2024-08-23 10:55:46 修改 · 866 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#html #css #前端

于 2024-08-19 00:09:01 首次发布

教学同时被 3 个专栏收录

339 篇文章

订阅专栏

CSS

76 篇文章

订阅专栏

HTML

21 篇文章

订阅专栏

系列目录

上一篇：白骑士的HTML教学进阶篇 2.2 嵌入与多媒体

在前几节中，我们探讨了HTML的基础知识和进阶内容，如表单、多媒体和嵌入技术。然而，仅仅依靠HTML，网页的样式和布局往往显得单调。为了解决这一问题，CSS（Cascading Style Sheets，层叠样式表）应运而生。CSS用于控制网页的外观，使其更加美观和用户友好。在本篇博客中，我们将介绍CSS的基础知识，包括什么是CSS、不同类型的样式表，以及常用选择器与属性。

什么是CSS？

CSS是一种用于描述HTML文档外观的样式表语言。通过CSS，你可以定义网页元素的颜色、字体、布局等。CSS使得网页的设计与内容分离，便于维护和修改。

CSS的基本语法

CSS的语法由选择器和声明块组成。选择器用于指定要应用样式的HTML元素，声明块则包含一个或多个声明，每个声明定义一个样式属性和值。

选择器 {
    属性: 值;
    属性: 值;
}

示例：改变段落文本颜色

p {
    color: blue;
}

在这个例子中，选择器‘p‘用于选择所有段落元素，声明块中的‘color: blue;‘则将文本颜色设置为蓝色。

内联、内部与外部样式表

CSS可以通过三种方式应用到HTML文档中：内联样式、内部样式表和外部样式表。

内联样式表

内联样式直接在HTML元素的‘style‘属性中定义，适用于仅需为单个元素设置样式的情况。

<p style="color: blue;">这是一个蓝色文本。</p>

内部样式表

内部样式表使用‘<style>‘标签定义在HTML文档的‘<head>‘部分，适用于单个页面的样式定义。

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

外部样式表

外部样式表将CSS规则存储在独立的‘.css‘文件中，通过‘<link>‘标签将其链接到HTML文档。这种方式便于在多个页面间共享样式。

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

外部样式表的内容示例：

p {
    color: blue;
}

常用选择器与属性

CSS选择器用于选择HTML元素，以应用特定的样式。不同的选择器可以选择单个元素、类、ID，或结合复杂的条件进行选择。

元素选择器

选择器直接指定HTML元素的名称。

h1 {
    font-size: 24px;
}

类选择器

类选择器使用‘class‘属性选择元素，选择器前加‘.‘符号。

.red-text {
    color: red;
}

HTML中应用

<p class="red-text">这是红色文本。</p>

ID选择器

ID选择器使用‘id‘属性选择元素，选择器前加‘#‘符号。每个ID在文档中应该是唯一的。

#main-heading {
    font-size: 30px;
}

HTML中应用

<h1 id="main-heading">这是主标题。</h1>

常用CSS属性

‘color‘：设置文本颜色。

p {
    color: green;
}

‘font-size‘：设置文本大小。

p {
    font-size: 16px;
}

‘background-color‘：设置背景颜色。

div {
    background-color: yellow;
}

‘margin‘：设置元素外边距。

div {
    margin: 10px;
}

‘padding‘：设置元素内边距。

div {
    padding: 10px;
}

综合示例：使用外部样式表定义网页样式

创建一个名为‘styles.css‘的外部样式表文件：

body {
    font-family: Arial, sans-serif;
}

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

p {
    color: #666;
    font-size: 14px;
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
}

在HTML文档中链接样式表

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>欢迎来到我的网页</h1>
        <p>这是一个使用外部样式表的示例。</p>
    </div>
</body>
</html>

总结

通过本篇博客，我们学习了什么是CSS，了解了内联、内部和外部样式表的使用方法，并掌握了一些常用的选择器和属性。CSS是网页设计中不可或缺的工具，能够让你的网页变得更加美观和易于使用。在接下来的文章中，我们将深入探讨CSS布局、动画和高级技巧，帮助你进一步提升网页设计能力。欢迎继续关注我们的HTML与CSS系列教程，持续提高你的前端开发技能！

下一篇：白骑士的HTML教学进阶篇 2.4 布局与定位