本文主要是介绍CSS引入,引入外部CSS文件＜link rel=“stylesheet“ href=““ /＞或＜style＞@import＜/style＞ 测试2208092344，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
引入外部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>
这篇关于CSS引入,引入外部CSS文件＜link rel=“stylesheet“ href=““ /＞或＜style＞@import＜/style＞ 测试2208092344的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
