css的四种使用方式:内联样式表,嵌入样式表,外部样式表,引入样式表
举例
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> css的使用方式 </title>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="./link.css">
<style type="text/css">
/*嵌入样式表*/
.tb1{
color:green;
}
</style>
</head>
<body>
<p style="font-size:30px;color:red;">这是一个星期天!</p><!--内联样式表-->
<p class="tb1">这是一个星期天!</p><!--嵌入样式表-->
<p class="tb2">这是一个星期天!</p><!--外部样式表-->
</body>
</html>
link.css
.tb2{
color:blue;
font-size:50px;
}
引入样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 引入样式表 </title>
<!--第一种方法
<link rel="stylesheet" type="text/css" href="./a.css">-->
<!--第二种方法-->
<style type="text/css">
@import url('a.css');
</style>
</head>
<body>
<p class="tb1">寒冰Carry,很无情</p><!--通过a.css 使用my.css的类选择器-->
<p class="my-font">寒冰Carry,很无情</p>
</body>
</html>
my.css
.tb1{
color:orange;
font-size:40px;
}
a.css
@import url("my.css");
.my-font{
color:blue;
}
网友评论