HTML与CSS的链接方式

最新推荐文章于 2024-07-09 19:08:21 发布

ruthy-wei

最新推荐文章于 2024-07-09 19:08:21 发布

阅读量3.4w

点赞数 19

分类专栏： CSS框架

本文链接：https://blog.csdn.net/ruthywei/article/details/71079579

版权

CSS框架专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML与CSS的链接方式分类：

一.行内式

直接在标签后面添加该标签的属性值

例如:

<table  bgcolor="black" cellspacing="1px" width="600">

二.嵌入式

在title标签后添加<style type="text/css"></style>

注意：需要将样式放入<head></head>中

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式使用</title>
    <style type="text/css">
        body{
            background-color: antiquewhite;
        }
        p{
            background-color: aqua;
        }
    </style>
</head>
<body>
<h1>CSS使用规则</h1>
<p>CSS使用规则/p>
</body>

三.导入式

创建css样式表如mystyle.css，再在HTML中链接此mystyle.css样式表。

<style type="text/css">

      @import"mystyle.css"

</style>

四.链接式

创建css样式表如style.css，再在HTML中链接此style.css样式表。

例如：

HTML例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式使用</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSS使用规则</h1>
<p>CSS使用规则/p>
</body>
</html>

CSS例子：

body{
    background-color: antiquewhite;
    font-size: 17px;
}

结果图：

五.采用导入式和链接式还是有不同的区别的：

1.使用链接式时，会在加载页面主体部分之前装载CSS文件，这样显示出来页面一开始就是带有样式效果的；

使用导入式时，会在整个页面装载完成后在装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件体积比较大的的时候，则会出现先显示无样式的页面，闪烁一下在出现设置样式后的效果，对于浏览者的感受，这是导入式的一个缺陷。

2.对于一些较大的网站，为了便于维护，可能会希望把所有的CSS样式分类别放到几个CSS文件中，如果这样使用链接式引入，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件。这对于维护工作来说，是一个巨大的缺陷。如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中在导入其他独立的CSS文件；而链接式则不具备这个功能。

因此，建议如果需要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，则首先用链接方式引入一个“目录”CSS文化，在这个“目录”CSS文件中再使用导入式引入其他CSS文件。

但是，若是希望通过JavaScript来动态决定引入哪个CSS文件，则必须使用链接方式才能实现。

ruthy-wei

关注

19
点赞
踩
95

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS的链接方式

HTML与CSS的链接方式分类：一.内链样式直接在标签后面添加该标签的属性值例如:bgcolor="black" cellspacing="1px" width="600">二.嵌入式样式在title后面添加注意：需要将样式放入中例如：html>lang="en"> charset="UTF-8"> css样式使用 typ
复制链接

扫一扫

专栏目录