详解CSS文件的三种引入方式

2024-07-11 08:31:40

字体：大中小

来源：转载

供稿：网友

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。

示例：

<h1 style="color:red;">style属性的应用</h1><p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

实际在写页面时不提倡使用，在测试的时候可以使用。

例如：

<!DOCTYPE><html><head> <meta charset="utf-8" /> <title>行内样式</title></head><body>  <h1 style="color:red;">Leaping Above The Water</h1> <p style="color:red;font-size:30px;">我是p标签</p></body></html>

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

示例：

<head><style type="text/css">h3{color:red;}</style></head>

例如：

<!DOCTYPE><html><head> <meta charset="utf-8" /> <title>内部样式表</title>  <style type="text/css"> div{ background: green; } </style></head><body> <div>我是DIV</div></body></html>

三、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

语法：

1、链接式

2、导入式

例如：

<!DOCTYPE><html><head> <meta charset="utf-8" /> <title>外部样式表</title>  <link rel="stylesheet" type="text/css" href="css/style.css" />  <style type="text/css"> @import url("css/style.css"); </style></head><body> <ol> <li>1111</li> <li>2222</li> </ol></html>

链接式和导入式的区别

<link>

1、属于XHTML

2、优先加载CSS文件到页面

@import

1、属于CSS2.1

2、先加载HTML结构在加载CSS文件。

四、CSS中的优先级

1、样式优先级

行内样式>内部样式>外部样式(后两者是就近原则)

上一篇：纯css实现立体摆放图片效果的示例代码

下一篇：CSS 同级元素position:fixed和margin-top共同使用的问题