CSS（二）— 样式加载

来源：互联网发布：易语言dnf辅助源码模板编辑：程序博客网时间：2024/05/22 00:25

样式加载方式

内嵌样式
指的是将CSS样式与(X)HTML标签混合使用，这种方法可以很简单的对某个元素单独定义样式。

<body>    <div style="border: 5px red solid;width: 500px">测试内嵌样式表</div></body>

内部样式 — 本页面可以使用
位于页面标签的<head>与</head>之间，且使用<style>标签进行包裹。
CSS代码

<head lang="en">    <meta charset="UTF-8">    <title>CSS样式表</title>    <style type="text/css">        .text{            color: aqua;            font-size: 30px;        }    </style></head>

HTML代码

<body>    <div class="text">测试内部</div></body>

链入外部样式表
指的是将CSS样式代码保存为一个样式文件，然后在页面中使用<link>标签链接到这个样式文件，以便实现多个页面调用同一个样式文件的目的。
CSS文件代码

.text{    color: aqua;    font-size: 20px;}

头部信息

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

HTML代码

<span class="text">测试链入外部样式表</span>

导入外部样式表
导入样式类似于外部样式，都是利用外部CSS样式文件来改变页面的外部表现的，但与外部样式不同的是，需要在<style>和</style>标签中间利用”@import”关键字导入外部CSS文件。

头部信息

 <style type="text/css">        @import "test04.css";    </style>

HTML代码

 <div class="text">测试导入外部样式表</div>

样式表优先级别

如果对于一个标签，有同一个属性分别在几种加载方式给出了不同的值，就会牵扯到一个优先级的问题：

内嵌样式 > 内部样式表 > 导入外部样式表

link和@import的区别

link属于html标签，而@import是css提供的。
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。

阅读全文

0 0