引入CSS样式有四种方法:
1. 行内样式(内联样式)
2. 内部样式表(嵌入样式)
3. 外部样式(LInk 链入)
4. 导入式
一、行内样式(内联式)
<p style="color:red;">CSS 使用方法</p>
二、内部样式表(嵌入样式)
将 CSS 内容放在 style 标签中,同时 style 标签放在 head 标签中。
<head> <style type="text/css"> p{color: blue;} </style> </head>
<body> <p>CSS 使用方法</p> </body>
有些浏览器版本过低无法解析 <style> 标签,就有可能在页面中显示 CSS 样式的内容。在开发中可以使用下列写法,
<head> <style type="text/css"> <!-- p{color: blue;} --> </style> </head>
如果浏览器不能解析 <style> 标签,就会忽略 p{color: blue;} 不会将其打印出来,如果可以解析 <style> 标签,就会正常显示。
三、外部样式(Link 链入)
CSS 样式放在的内容放在后缀为 css 的文件中,再在 html 文件中使用 link 标签将 CSS 文件链入html 文件中。
link 标签放在 head 标签中,link 标签有三个属性,
href ="CSS 文件的路径"
rel="stylesheet" 表示被链接的文档是一个样式表
tyle="text/css"
css.css 文件
p{ color:blue; }
css_test.html 文件
<head> <link href="css.css" rel="stylesheet" type="text/css"/> </head> <body> <p>CSS 使用方法</p> </body>
四、导入式
依旧是使用外部 CSS 文件,但是不使用 link 标签,而是使用 import ,放在 style 标签中。
css_test.html 文件
<head> <style type="text/css"> @import "css.css" /*两者选择其中一种*/ @import url(css.css); /*两者选择其中一种*/ </style> </head> <body> <p>CSS 使用方法</p> </body>
五、比较四种使用方法
外部样式和导入式使用效果是一样的,只是在加载时不同。外部样式在页面加载时,同时加载 CSS 样式,导入式在读取玩 html 文件之后再加载,如果网页加载比较慢,那么后者可能会出现无样式的情况。
六、优先级
行内样式 > 内部样式 > 外部样式(但是最后定义的优先级最高,及最近原则)
css2.css 文件
p{color:#f2f2f2; /*灰色*/ }
css3.css 文件
p{color:blue; /*蓝色*/ }
html 文件
1. 显示红色(行内样式 > 内部样式 > 外部样式)
<head> <link href="css3.css" rel="stylesheet" type="text/css"/> <!--蓝色--> <style type="text/css"> p{color:green;} /*绿色*/ @import url(css2.css); /*灰色*/ </style> </head> <body> <p style="color:red;">CSS 优先级</p> <!--红色--> </body>
2. 显示绿色
<head> <link href="css3.css" rel="stylesheet" type="text/css"/> <!--蓝色--> <style type="text/css"> p{color:green;} /*绿色*/ @import url(css2.css); /*灰色*/ </style> </head> <body> <p>CSS 优先级</p> </body>
3. 显示灰色(内部样式 > 外部样式)
<head> <link href="css3.css" rel="stylesheet" type="text/css"/> <!--蓝色--> <style type="text/css"> @import url(css2.css); /*灰色*/ </style> </head> <body> <p>CSS 优先级</p> </body>
4. 显示蓝色(外部样式 > 内部样式)
<head> <style type="text/css"> @import url(css2.css); /*灰色*/ </style> <link href="css3.css" rel="stylesheet" type="text/css"/> <!--蓝色--> </head> <body> <p>CSS 优先级</p> </body>
所以总的来说,最后定义的优先级最高,及最近原则。