007-多种CSS的引入方式

各种CSS的加载方式：

（1）内联样式（缺乏整体性和规划性，维护成本高）

只能给单一的一个标签添加样式。

在body中写style

<body>
    <p style="color: brown;font-size: 15px;">内联样式方案</p>
</body>

（2）内部样式（在单个文件中同时给多个元素进行统一规划，但不适用于多个文件）

.在head中编写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=p, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: brown;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <p>内联样式方案</p>
</body>
</html>

（3）外部样式（适用于多个文件时，推荐，高效便捷）

当需要应用到多个页面时，外部样式可以通过修改一个文件，整体改变整个站点的外观，每个页面使用<link>标签链接到样式表，<link>标签在文档的头部。

在css样式.html中编写，运行后，当点击“链接到产品”时跳转到连接到产品.html页面。

两个页面是同级关系用./就行。

传统实现方法如下：

 

 

 这时，如果想使用外部样式表来实现上述过程，步骤入下：

1.独立创建CSS文件，public.css,在这个文件中只能写css。

  

2.然后在css样式.html这个文件中的head中编写<link>标签。

添加的代码为

<link rel="stylesheet" href="./public.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=p, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./public.css">
</head>
<body>
    <p>外部样式方案</p>
    <a href="./链接到产品.html">产品链接</a>
</body>
</html>

运行结果如下：

 

 

 

 

 

 

 

 

 

 

 

posted @ 2022-08-10 14:22  Jaoany  阅读(77)  评论(0)  编辑  收藏  举报