大家好,今天我们来分享一下css的四种导入方式
行内样式:
上源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行内样式;在标签元素当中,编写一个style属性,编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
显示效果:
css有一个很大的特点: 结构与表现分离
就是HTML(负责结构)和css(负责表现),把这两个分开写
上面的代码当中,你可以看见他俩是写在一起的
当然,这样也是可以的,但是当网页源码比较多的时候。我们尽量分开写
我们来看下一个: 内部样式表
看源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*这是内部样式表*/
h1{
color: blue;
}
</style>
</head>
<body>
<!--行内样式;在标签元素当中,编写一个style属性,编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
但是你会发现,这两个样式对同一块HTML 规定内容的颜色不一样
这里就涉及到一个样式优先级的问题
就是 先执行哪一个
看效果:
结果执行了行内样式的红色
即: 就优先级而言,行内样式 (>)大于内部样式
下面来讲外部样式:
写style文件
/*外部样式*/
h1{
color: yellow;
}
这是外部样式
通过刚才的测试,我们知道,行内样式的优先级>内部样式的优先级
加上外部样式再来测试
即:行内样式>外部样式
去掉行内样式
即外部样式和内部样式的优先级对比
看结果:
即:内部样式的优先级>外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*这是内部样式表*/
h1{
color: blue;
}
</st yle>
<link rel="stylesheet" href="style.css">
有一个就近原则,就是代码当中的样式谁离 <h1 >我是标题</h1> 最近,就听谁的
</head>
<body>
<!--行内样式;在标签元素当中,编写一个style属性,编写样式即可-->
<h1 >我是标题</h1>
</body>
</html>
style代码
/*外部样式*/
h1{
color: yellow;
}
显示现在的结果:
拓展:
外部样式的两种方式
第一种: 链接式
<link rel="stylesheet" href="style.css">
第二种:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*导入式*/
@import url(style.css);"";
</style>
</head>
<body>
<h1>你真棒</h1>
</body>
</html>
看结果:
这个导入式比较老,使用的比较少
好了,关于CSS的三种导入方式就讲到这里了,谢谢大家