css的导入方式以及优先级

来源：互联网发布：远程网络教育考试编辑：程序博客网时间：2024/05/17 12:19

一、CSS的导入方式

1、行内式

用法：直接在html中的标签内添加style属性
此方法不推荐使用

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS的导入方式以及优先级</title></head><body><div>    <!--行内式-->    <div style="width: 100px; height: 100px; background: #000; margin: 0px auto">行内式</div></div></body></html>

2、内嵌式

用法：写在head标签的style标签里面
少量内容可使用多了会使html页面复杂不便于维护

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS的导入方式以及优先级</title>    <style type="text/css">        /*内嵌式*/        .div-2{            width: 100px;            height: 100px;            background: #007aff;            margin: 0px auto;            text-align: center;        }    </style></head><body><div>    <!--行内式-->    <div class="div-1" style="width: 100px; height: 100px; background: #000; margin: 0px auto">行内式</div>    <!--内嵌式-->    <div class="div-2">内嵌式</div></div></body></html>

3、导入式

用法：导入一个外部的已写好的css文件同样写在head标签的style标签里面
它是先加载html文件再加载css文件会使页面先是无样式闪一下变得有样式
尽量不使用该方法

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS的导入方式以及优先级</title>    <style type="text/css">        /*内嵌式*/        .div-2{            width: 100px;            height: 100px;            background: #007aff;            margin: 0px auto;            text-align: center;        }    </style>    <style type="text/css" rel="stylesheet">        /*导入式*/        @import url("css/css-import.css");    </style></head><body><div>    <!--行内式-->    <div class="div-1" style="width: 100px; height: 100px; background: #000; margin: 0px auto">行内式</div>    <!--内嵌式-->    <div class="div-2">内嵌式</div>    <!--导入式-->    <div class="div-3">导入式</div></div></body></html>

4、外链接式

用法：外链接一个外部的已写好的css文件，写在link标签里面
推荐使用该方法

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS的导入方式以及优先级</title>    <style type="text/css">        /*内嵌式*/        .div-2{            width: 100px;            height: 100px;            background: #007aff;            margin: 0px auto;            text-align: center;        }    </style>    <style type="text/css" rel="stylesheet">        /*导入式*/        @import url("css/css-import.css");    </style>    <!--链接式-->    <link rel="stylesheet" href="css/css-link.css" type="text/css"/></head><body><div>    <!--行内式-->    <div class="div-1" style="width: 100px; height: 100px; background: #000; margin: 0px auto">行内式</div>    <!--内嵌式-->    <div class="div-2">内嵌式</div>    <!--导入式-->    <div class="div-3">导入式</div>    <!--链接式-->    <div class="div-4">链接式</div></div></body></html>

优先级

外链接式>导入式
内嵌式与外链接式、导入式和位置有关系取就近原则
行内式优先级最高
附上测试代码资源 http://download.csdn.net/detail/hzandy/9907398

阅读全文

1 0