<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@import url("../css/index.css");
/*
说明:@和import之间没有空格 url和小括号之间也没有空格;
括号内部加引号,必须结尾以分号结束;必须放在style标签的最开始
*/
/* 选择符{属性:属性值;} */
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<!-- rel的作用:表示你要引入的外部文件问样式表(css文件) -->
<!-- <link rel="stylesheet" href="../css/index.css"> -->
</head>
<body>
<!--
1、内部样式表
在head的表签里面创建style标签,在style标签里面写css语法
2、外部样式表
先创建一css文件,在css里面写css语法,然后在head里面link标签引入外部样式
*link和import导入外部样式的区别:
差别1:老祖宗的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS。
差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3:兼容性的差别。:@import是CSS2.1提出的,所以老的浏览器不支持,@import只在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的.
3、内联样式表
在html标签中添加style属性,他的属性值为css语法
-->
<div style="background: green;">我不物质,我只是想要一些物质</div>
</body>
</html>
css三种样式表的创建和区别
猜你喜欢
转载自blog.csdn.net/qq_33221699/article/details/84098758
今日推荐
周排行