【CSS】CSS样式的三种格式：内嵌样式、内部样式、外部样式CSS 样式有三种格式：内嵌样式、内部样式和外部样式。
内嵌样式
⼜称⾏内样式，将 CSS 样式嵌⼊到 HTML 标签中。
<p >内嵌样式</p>
内部样式表
将 CSS 样式从 HTML 标签中分离出来，使得 HTML 代码更加整洁，⽽且 CSS 样式可以被多次利⽤。
内部样式写在 <style> 标签中，构成内部样式表，仅对当前页⾯有效。
⼀般情况下，<style> 标签位于 <head> 标签内。
在页⾯加载过程中，先加载样式，后加载页⾯元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
p{
width:300px;
color:yellow;
background-color:red;
border:dotted thin blue;
text-align:center;
}
</style>
</head>
<body>
<p>内部样式1</p>
<p>内部样式2</p>
</body>
</html>
外部样式表
外部样式写在独⽴的⽂件中，构成外部样式表，页⾯在使⽤某⼀样式时，需要引⼊外部样式所在⽂件。
⽹站统⼀引⽤同⼀外部样式表，使页⾯风格保持⼀致，有利于页⾯样式的维护与更新，从⽽降低⽹站的维护成本。
⽤户浏览⽹页时，CSS 样式⽂件会被暂时缓存，继续浏览其他页⾯时，会优先使⽤缓存中的 CSS ⽂件，避免重复从服务器中下载，从⽽提⾼⽹页的加载速度。
外部样式表的引⼊⽅式有两种：链接外部样式表和导⼊外部样式表。
链接外部样式表
在 HTML 中 <link> 标签⽤于将⽂档与外部资源进⾏关联，常⽤于链接⽹页的外部样式表。
<link type="text/css" rel="stylesheet" href="url"/>
type 属性⽤于设置链接⽬标⽂件的 MIME 类型，CSS 样式表的 MIME 类型是 text/css。
rel 属性⽤于设置链接⽬标⽂件与当前⽂档的关系，stylesheet 表⽰外部⽂件的类型是 CSS ⽂件。
链接外部样式表分为两步：
1. 创建 CSS 样式表⽂件。
@charset "UTF-8";
p{
width:300px;
color:#ff0000;
background-color:#0080ff;
border:dotted thin #ff0080;
text-align:center;
}
2. 在页⾯ <head> 标签中使⽤ <link> 标签关联 pStyle.css 样式⽂件，然后在 <body> 中通过标签选择器引⽤样式⽂件中预定义的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link type="text/css" rel="stylesheet" href="pStyle.css"/>
</head>
<body>
<p>链接外部样式表</p>
</body>
</html>
⽂件结构为
导⼊外部样式表
导⼊外部样式表是指在页⾯的内部样式表中导⼊⼀个外部样式表。
@import url("样式⽂件的引⽤地址");引用外部样式表的格式是
@import 关键字⽤于导⼊外部样式。
<style> 标签中，@import 语句需要位于内部样式之前。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
@import url("pStyle.css");
</style>
</head>
<body>
<p>导⼊外部样式表</p>
</body>
</html>
两种引⼊⽅式的区别在于：
⾪属关系不同：<link> 标签属于 HTML 标签，⽽ @import 是 CSS 提供的载⼊⽅式。
加载时间及顺序不同：使⽤ <link> 链接 CSS 样式⽂件时，浏览器会先将外部的 CSS ⽂件加载到⽹页当中，然后再进⾏编译显⽰；⽽ @import 导⼊ CSS ⽂件时，浏览器会先将 HTML 结构呈现出来，再把外部的 CSS ⽂件加载到⽹页中，当⽹速较慢时，会先显⽰没有 CSS 的效果，加载完毕后再渲染页
⾯。
兼容性不同：由于 @import 是 CSS 2.1 提出的，只有在 IE 5 以上的版本才能显⽰，⽽ <link> 标签⽆此问题。
DOM 模式控制样式：使⽤ JavaScript 控制 DOM 改变样式时，只能使⽤ <link> 标签，⽽ @import 不受 DOM 模式控制。
综上所述，不论从显⽰效果还是⽹站性能上看，<link> 链接⽅式都更具优势，应该优先考虑。
样式表的优先级
多重样式是指外部样式、内部样式和内嵌样式同时应⽤于页⾯中的某⼀元素。
在多重样式情况下，样式表的优先级采⽤就近原则。即优先级由⾼到低为“内嵌 > 内部 > 外部 > 浏览器缺省默认”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
@import url("pStyle.css");
</style>
</head>
<body>
<p >导⼊外部样式表</p>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。