理解CSS基础：样式与样式表-优快云博客

本文链接：https://blog.youkuaiyun.com/lxjstudyIT/article/details/52313439

这篇博客探讨了CSS的基础知识，包括CSS的含义——层叠样式表，其主要作用是定义HTML元素的显示方式。文章强调了样式通常存储在外部或内部样式表中，以实现内容和表现的分离，提高工作效率。外部样式表通过链接到CSS文件来应用，而内部样式表和嵌入式样式表则直接在HTML文档中定义。示例展示了如何创建和使用外部样式表（style.css）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇开始放送CSS基础知识点，首先CSS是什么？
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

下面演示使用CSS样式的方式，先看效果图（下面几种方式都是这张效果图）
这里写图片描述

首先，用前几篇讲的html实现它：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS的使用方式</title>
    </head>
    <body bgcolor="red">
            <h1><font color="white">CSS的样式</font></h1>
            <p>这是一个段落</p>
    </body>
</html>

内链样式表:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS的使用方式</title>
    </head>
    <body style="background-color:red;">
            <h1 style="color:white;">CSS的样式</h1>
            <p>这是一个段落</p>
    </body>
</html>

嵌入式样式表：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS的使用方式</title>
        <style type="text/css">
            body{
                background-color:red;
            }
            h1{
                color:white;
            }
        </style>
    </head>
    <body>
            <h1>CSS的样式</h1>
            <p>这是一个段落</p>
    </body>
</html>

引用式样式表：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS的使用方式</title>
        <link rel="StyleSheet" type="text/css" href="style.css">
    </head>
    <body>
            <h1>CSS的样式</h1>
            <p>这是一个段落</p>
    </body>
</html>

再新建一个style.css文件

body{
    background-color:red;
}
h1{
    color:white;
}

可以看出引用式样式表的style.css里面代码跟嵌入式样式表差不多，就少了style标签。

第一篇就先写这么多吧…

CSS基础之样式