css四种引入方式 | link和@import引入方式的区别

最新推荐文章于 2024-01-24 17:59:25 发布

苏小苏

最新推荐文章于 2024-01-24 17:59:25 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css link import

本文链接：https://blog.csdn.net/sxs161028/article/details/108221610

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

css的引入方式

css的引入方式有四种：内联样式，嵌入样式，链接样式，导入样式。

1.内联样式

内联样式也叫行内样式，指的是直接在HTML标签中的style属性中添加css的样式。

<div style="font-size:20px;color:#333">我是行内样式/内联样式</div>

这种比较适合一些简单修改的样式
写法要符合CSS规范，用引号括起来
控制当前的标签的样式
这种书写方式没有体现出结构与样式相分离，一般建议少量使用，不推荐大量使用。

2.嵌入式

这种是将css样式集中写在网页的中，写在标签里。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>嵌入式样式</title>
	<style>
		p{color:red;font-size:16px;}
		.list{width:200px;height:200px;}
	</style>
</head>
<body>
	<div>
		<p>hello world</p>
		<div class="list">学习</div>
	</div>
</body>
</html>

标签虽然理论上可以放在html文档的任何地方，但一般是放在标签中的
这种方式，只能控制当前整个页面元素的样式。
结构比较清晰，但是也没有实现结构与样式的完全分离
这种嵌入式样式作为练习时用的比较多

3.链接式

将css样式放在一个后缀名为.css的文档中，然后在页面的head标签中用link标签引入。

<link rel="stylesheet" href="css文件路径" style="text/css" >

rel：定义当前文档与被链接文档之间的关系，在这里需指定为stylesheet"，表示被链接的文档是一个样式表文件，一般是必填项。
href：定义所连接外部样式表文件的URL ，可以是相对路径也可以是绝对路径。必填项。
这种方式现在使用最广泛，实现了结构与样式的分离。

4.导入式

在HTML的文档的head标签的style标签里用@import方式引入，也可以在css文件中用@import方式引入。

<html>
<head>
	<style>
		@import "test.css";
	</style>
</head>
<html>

link和@import引入方式的区别

link是XHTML标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
link引入CSS时，在页面载入时同时加载；@import需要网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

苏小苏

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
css四种引入方式 | link和@import引入方式的区别

css的引入方式css的引入方式有四种：内联样式，嵌入样式，链接样式，导入样式。1.内联样式内联样式也叫行内样式，指的是直接在HTML标签中的style属性中添加css的样式。<div style="font-size:20px;color:#333">我是行内样式/内联样式</div>...
复制链接

扫一扫