1. css样式引入HTML方法:四种方式
样式优先级:行内样式>内嵌式(内部样式)>外部样式(链接式+导入式)(后两者是就近原则)
- 行内样式:在标签中标记style属性
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
- 内嵌式(内部样式表):在<head></head>标签对中添加<style></style>标签,然后在<style>标签中写入具体样式
<head> <meta charset="utf-8"> <title>通信类</title> <style type="text/css"> *{ padding: 0; margin: 0; } </style> </head>
- 导入式(外部样式表):在<head></head>中加<style></style>标签,然后在<style>标签中链入 @import"样式表路径"
1 <head> 2 <meta charset="utf-8" /> 3 <title>外部样式表</title> 4 <style type="text/css"> 5 @import url("样式表路径"); 6 </style> 7 </head>
- 链接式(外部样式表):在<head></head>中加<link rel="stylesheet" type="text/css" href="样式表路径">
1 <head> 2 <meta charset="utf-8" /> 3 <title>外部样式表</title> 4 <link rel="stylesheet" type="text/css" href="样式表路径" /> 5 </head>
2. 外部样式表之间的区别
@import ? 导入式,
<link type="text/css" rel="stylesheet"> ? 链接式
导入式:导入式会在整个网页装载完后再装载CSS文件,所以网页若较大则会先显示无样式的页面,闪烁一下之后,再出现网页的样式。
:属于CSS2.1
:先加载HTML结构在加载CSS文件
链接式:属于XHTML
:优先加载CSS文件到页面
:若需JavaScrip动态引入CSS文件,只能使用链接式