四种方式可以引用CSS 达到页面控制效果
1.内联式引用
2.内部引用
3.外部引用{1>.链接式引用 2>.导入式引用
<head>
<style type="text/css">
<!-- /*作用:不支持CSS的浏览器会当作注释
支持CSS的浏览器会忽略注解读取CSS样式表*/
p{
font-size:24px;
color:#ff0000;
font-family:"黑体";
}
-->
</style>
</head>
例子:
1.内联式引用:<p style="font-size=16px;color=#0000ff;">内联式引用</p>
2.内部引用:
<head>
<style type="text/css">
.font1{
color:blue;
font-size:12px;
}
.font2{
color:red;
font-size:18px;
}
</style>
/*定义的是class所以font前要加'.'
任意标签都可以引用class 如h1标签引用时为 <h1 class="font1">...</h1>
*/
</head>
<body>
<p class="font1">内部引用示例</p>
<p class="font2">内部引用示例</p>
</body>
</head>
3.外部链接式引用:
使用.css作为文件拓展名,如以下.font*代码为styleTest.css,然后用HTML的Link对象在页面中引用它
好处:可以将所有页面都连接到同一个CSS文件从而形成整体的页面风格
.font1{
color:blue;
font-size:12px;
}
.font2{
color:red;
font-size:18px;
}
引用方法:<head><link rel="stylesheet" tyle="text/css" href="./style/styleTest.css" />
</head>
/*rel="stylesheet"
在<link>标签中,“rel=stylesheet”,rel是关联的意思,关联的是一个样式表(stylesheet)文档,它表示这个link在文档初始化时将被使用。一般这里是不需要改动的.
*/
4.外部导入式引用
用import方式导入的样式表,在HTML文件初始化的时候导入到页面中,作为文件的一部分
与链接式引用的区别:链接式引用只有在HTML标签需要样式时才被引用
好处:可以在一个HTML文件中导入多个样式表
例子:<head>
<style type="text/css">
@import url("./style/styleTest.css");
</style>
</head>
导入多个的例子:
css_red.css , css_blue.css , css_green.css
这样你就可以写一个主样式 stylemain.css 把三个样式表都装进去:
@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";
调用的时候只调用 stylemain.css 就行了。