©2020-2024 ioDraw All rights reserved
引入外部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>