概述
简单的来说:css在一个网页中负责页面数据的样式,从而使得页面的结构和表现分离。
引入方式
css引入到html中的方式一共分为三种:
1、内部样式:在style标签中编写css代码。此种引入方式只能作用于本页面,复用性不强。
格式:
<style type="textcss">
编写css的代码。
</style>
代码示例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 a{ 8 color: red; 9 font-size: 20px; 10 } 11 </style> 12 </head> 13 14 <body> 15 <a href="http://www.baidu.com">百度</a><br /> 16 <a href="http://www.aiqiyi.com">爱奇艺</a><br /> 17 <a href="http://www.youku.com">优酷</a><br /> 18 </body> 19 </html>
2、外联样式:可以引入外部的css文件。 推荐使用。
css文件代码
1 a{ 2 color: red; 3 font-size: 20px; 4 text-decoration: none; 5 }
外联样式的格式分为两种:
格式一:使用link标签。 推荐使用...
具体格式:
<link href="css文件的路径" rel="stylesheet">
代码示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link href="css/1.css" rel="stylesheet" /> 7 </head> 8 9 <body> 10 <a href="http://www.baidu.com">百度</a><br /> 11 <a href="http://www.aiqiyi.com">爱奇艺</a><br /> 12 <a href="http://www.youku.com">优酷</a><br /> 13 </body> 14 </html>
格式二:使用<style>引入
具体格式:
<style type="text/css" >
@import url("css的路径");
</style>
代码示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 @import url("css/1.css"); 8 </style> 9 </head> 10 11 <body> 12 <a href="http://www.baidu.com">百度</a><br /> 13 <a href="http://www.aiqiyi.com">爱奇艺</a><br /> 14 <a href="http://www.youku.com">优酷</a><br /> 15 </body> 16 </html>
link和@import引入外部样式的区别:
(1)、隶属上的差别
link属于HTML标签,而@import完全是CSS提供的一种方式。
(2)、@import次数限制
@import只能引入31次css文件。
(3)、加载顺序的不同
当页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式,然后突然样式会出现,网速慢的时候还挺明显。
(4)、兼容性上的差别
由于@import是CSS2.1提出的,@import只有在IE5以上的才能识别,而link标签无此问题
(5)、使用DOM控制样式时的差别
当使用javascript控制DOM(document.styleSheets)去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
3、行内样式:直接在html标签使用style属性编写。 只能用于本标签中,复用性较差。 不推荐使用。
代码示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 7 </head> 8 9 <body> 10 <a href="http://www.baidu.com" style="color: black; text-decoration: none;">百度</a><br /> 11 <a href="http://www.aiqiyi.com">爱奇艺</a><br /> 12 <a href="http://www.youku.com">优酷</a><br /> 13 </body> 14 </html>
css中的注释格式:/* css的注释 ..*/
注意:注释不可以嵌套。