【前端学习笔记】01-css的三种引入方式

SevgiliD

已于 2022-07-05 15:26:39 修改

阅读量348

点赞数

分类专栏：【前端学习笔记Html5&css】文章标签： css 前端 html

于 2022-06-04 15:20:20 首次发布

本文链接：https://blog.csdn.net/SevgiliD/article/details/125121408

版权

【前端学习笔记Html5&css】专栏收录该内容

14 篇文章 1 订阅

订阅专栏

css的三种引入方式及优缺点

css的三种样式表
总结

css的三种样式表

外联样式表

外部的css文件，利用link标签引入到html5文件内部，实际开发中应用较多。操作方式分为两步

创建并以在.css为后缀的文件中写入样式
在HTML文档中用<link>标签引入

新建style.css文件及样式写入

h1{background: red;font-weight: normal;font-size: 33px;}

在HTML中引入style.css文件

<link rel="stylesheet" type="text/" href="style/style.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入css的三种方式</title>
    <link rel="stylesheet" type="text/" href="style/style.css">
    <style type="text/css"> 
    h2{background: red;font-weight: normal;font-size: 33px;}</style>
</head>
<body>
    <h1>通常引入css有三种方式</h1>
    <h2>1.内部样式表</h2>
    <h1>2.外联样式表</h1>
    <p style="background: red;font-weight: normal;font-size: 33px;">3.行间样式表</p>
    <!-- 外联：外部的css文件用link标签引入html文档内部
    内部：其实就是在网页里的style标签内写入样式
    行间：就是把样式写在某标签内部 -->
</body>
</html>