引入CSS样式的方式

最新推荐文章于 2024-03-26 10:30:10 发布

Asunny5

最新推荐文章于 2024-03-26 10:30:10 发布

阅读量1.2k

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_60979337/article/details/127472254

版权

1.内嵌样式（行内样式）：直接将CSS样式语言作为style属性值，写在html标签里。

<div style="color=red; ">
    行内样式
</div>

缺点：
1.需要在每个style属性里写样式，不方便维护和编写
2.样式不能复用，冗余的样式代码太多，结构化差
优点：
样式和html在一起，网页构建的时候直接能读取样式，渲染网页速度较快

2.内嵌样式：江样式信息嵌入<style>标签里面。style标签属于head标签的子元素。

<head>
     .box{
        color="red";        
        }
</head>

<body>
    <div class="box">
        我是内嵌样式
    </div>
</body>

3.外部样式（主流推荐）：把css样式写在单独的.css样式文件里面，通过link标签引入外面的css样式文件。

<head>
 <!-- 
        rel 必填属性，默认stylesheet 
        href 必填属性 外部文件的地址 
        type加载外部文件的类型，可以省略-->
     <link rel="stylesheet" href="./CSS01.css" type=""> 

</head>

<body>
  
    <div class="box" >
        div1
    </div>
</body>

优点：可以多个文件引入样式，维护和编写方便
缺点：需要额外加载css样式文件，相对比直接在html的样式渲染要慢一些（基本不考虑）
link标签可以江当前网页和外部文件资源关联在一起，通常放在head标签里面。常见用语引入css样式文件。

4.@import 导入外部样式与link标签比较类似。

<head>
 <style>
        @import url(./CSS01.css);
    </style>
</head>

<body>

    <div class="box">
        div1
    </div>
</body>

Asunny5

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
引入CSS样式的方式

CSS引入样式方式
复制链接

扫一扫

引入CSS样式的方式

“相关推荐”对你有帮助么？