引入外部css文件的方式有 <link rel="stylesheet" type="text/css" href="xxx.css"/> , <style> @import url("xxx.css") </style> link来的css的优先级 大于 @import来的css的优先级
<link rel="stylesheet" type="text/css" href="xxx.css"/>
新版浏览器中 type="text/css" 可以不写 所以模板可以为
<link rel=“stylesheet” href=“xxx.css”/>
或
<link rel=“stylesheet” type=“text/css” href=“xxx.css”/>
<style> @import url("xxx.css") </style>
@import可写为:
- @import url("xxx.css")
- @import url(xxx.css)
- @import "xxx.css"
测试用例1
在html同目录下建立以下css文件
红.css
.红{color:red}
橙.css
.橙{color:orange}
黄.css
.黄{color:yellow}
绿.css
.绿{color:green}
红.css
.青{color:cyan}
蓝.css
.蓝{color:blue}
紫.css
.紫{color:purple}
灰.css
.灰{color:grey}
main.html
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"/><title></title>
<link rel="stylesheet" href="红.css" />
<style> @import url("橙.css") </style>
<style> @import "黄.css" </style>
<style> @import url(绿.css) </style>
<style> @import url 青.css </style>
<style> @import 蓝.css </style>
<style> @import ("紫.css") </style>
<style> @import (灰.css) </style>
<style>.C1{font-size:230px;}</style>
</head><body>
<section class="C1">
<span class="红">红</span> , <span class="橙">橙</span> , <span class="黄">黄</span>
,
<span class="绿">绿</span> , <span class="青">青</span> , <span class="蓝">蓝</span>
,
<span class="紫">紫</span> , <span class="灰">灰</span>
</section>
</body></html>
结果图
可以看到, 前4引入种方式, 红橙黄绿起了效果
起作用的4种引入方式
<link rel="stylesheet" href="红.css" />
<style> @import url("橙.css") </style>
<style> @import "黄.css" </style>
<style> @import url(绿.css) </style>
