HTML中修改标题和段落的第三种方式——外部样式表

Pniubi

于 2025-03-10 10:50:56 发布

阅读量2.1k

点赞数 52

CC 4.0 BY-SA版权

分类专栏：网页设计文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/Pniubi/article/details/146146520

网页设计专栏收录该内容

3 篇文章

订阅专栏

本文续写上一篇文章：HTML中修改标题和段落的前两种方式

一、使用方法

书写CSS文档
HTML文档中插入 1. 中的链接

（其实本质就是内部样式表中<head>里边单独写的<style>中的部分单独放在了CSS文档里面，再在HTML文档里面引用一下）

二、具体示例

CSS文档：（放在CSS文件夹里，命名后缀为.css，命名最好与要修饰的HTML文档同名）

@charset "utf-8";
/* CSS Document 部分 */
h2 
{
    text-align: center;
    color: red;
}
p
{
    font-size: 24px;
    text-decoration: underline;
    color: blue;
}

文件位置示范

结合具体代码看输出效果

HTML代码（未插入链接）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表1</title>
</head>
<body>
    <h2>123456</h2>
    <p>555</p>
    <h2>123456</h2>
    <p>555</p>
    <h2>123456</h2>
    <p>555</p>
    <h2>123456</h2>
</body>
</html>

输出效果

在这里插入图片描述

HTML代码（已插入链接）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表1</title>
    <link rel="stylesheet" href="../css/style3-3.css">  
</head>
<body>
    <h2>123456</h2>
    <p>555</p>
    <h2>123456</h2>
    <p>555</p>
    <h2>123456</h2>
    <p>555</p>
    <h2>123456</h2>
</body>
</html>