CSS引入,引入外部CSS文件<link rel=“stylesheet“ href=““ />或<style>@import</style> 测试2208092344

引入外部css文件的方式有
,

link来的css的优先级 大于 @import来的css的优先级

新版浏览器中 type=“text/css” 可以不写
所以模板可以为

<link rel=“stylesheet” href=“xxx.css”/>

<link rel=“stylesheet” type=“text/css” href=“xxx.css”/>




@import可写为:

  • @import url(“xxx.css”)
  • @import url(xxx.css)
  • @import “xxx.css”




测试用例1

在html同目录下建立以下css文件
CSS引入,引入外部CSS文件<link rel=“stylesheet“ href=““ />或<style>@import</style> 测试2208092344_第1张图片

红.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>

结果图

CSS引入,引入外部CSS文件<link rel=“stylesheet“ href=““ />或<style>@import</style> 测试2208092344_第2张图片
可以看到, 前4引入种方式, 红橙黄绿起了效果
起作用的4种引入方式

	<link rel="stylesheet" href="红.css" />

	<style> @import url("橙.css") style>

	<style> @import "黄.css" style>

	<style> @import url(绿.css) style>

你可能感兴趣的:(试验,演示,HTML,CSS,JS,css,前端,html)