浅谈CSS样式

浏览数：44 / 时间：2015年06月09日

四种方式可以引用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  就行了。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

浅谈CSS样式