CSS3的书写位置

最新推荐文章于 2023-06-05 20:00:00 发布

小豪boy

最新推荐文章于 2023-06-05 20:00:00 发布

阅读量107

点赞数

分类专栏： CSS3学习笔记

本文链接：https://blog.csdn.net/qq_34771938/article/details/119890428

版权

CSS3学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS样式的四种应用方式：内嵌式、外链式、导入式和行内式。内嵌式将CSS写在HTML的<head>部分，方便快捷；外链式将CSS保存为独立文件，多个页面可共享；导入式虽然能实现样式导入，但页面加载时可能会有延迟；行内式直接在HTML标签中设置样式，牺牲了样式复用性，通常用于特殊情况。了解这些方式有助于更好地组织和管理网页样式。

摘要由CSDN通过智能技术生成

内嵌式

在学习CSS时，最常使用内嵌式，顾名思义，内嵌在.html文件中。

在<head></head>标签对中，书写<style></style>标签对，里面书写CSS语句。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        /* 内嵌式 */
        h1 {
            color: aqua;
            font-weight: bold;
            font-style: italic;
        }
    </style>
</head>

<body>
    <h1>你好！</h1>
</body>

</html>

外链式

可以将CSS单独存为.css文件，然后使用<link>标签引入它。

外链式的优点：多个html网页，可以共用一个css样式表文件

示例：

css文件：

/* 外链式 */
h1 {
    color: red;
    font-weight: bold;
    font-style: italic;
}

html文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    <h1>你好！</h1>
</body>

</html>

导入式

导入式是最不常见的样式表导入方法。

使用导入式引入的样式表，不会等待css文件加载完毕，而是会立即渲染HTML结构，所以页面会有几秒中的“素面朝天”的时间。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        @import url(css/css.css);
    </style>
</head>

<body>
    <h1>你好！</h1>
</body>

</html>

注：这里的css文件与外链式一样，所以最后的显示效果相同，但是外链式引入样式表时会先等待css文件加载完毕，再渲染HTML结构。

行内式

         样式可以直接通过style属性写在标签身上。

        行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用。

        后台工程师经常使用行内式。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
</head>

<body>
    <h1 style="color: brown; font-weight: bold; font-style: italic;">
        你好！
    </h1>
</body>

</html>