浅谈CSS样式
四种方式可以引用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 就行了。 相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18