|
目录
1.行内样式
代码
2.内嵌样式
代码
3.外链样式
代码
4.导入样式
5.四种样式的优先级
1.行内样式
行内样式又叫标签样式，它是在标签里面加上style属性
代码
<body>
<h1>捷克首都机场</h1>
<h2 style="color: red;">123456789</h2>
</body>
2.内嵌样式
样式写在style标签里面(style标签在head标签内)
代码
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1{
color: red;
}
</style>
</head>
3.外链样式
? ? 第一步：建立一个.css的文件,在里面写css样式
? ? 第二步：head标签内写入link标签(link可以存在在body标签里但是不推荐用)
? ? 第三步：link里href属性将css文件引入
代码
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
4.导入样式
特点：把@import放在style标签中
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@import url(1.css);
</style>
</head>
? 这种方式不推荐使用 第一因为使用@import导入的css开始不会被加载 只有在引用到他的时候浏览器才会下载去加载它 这就导致了浏览器无法并行下载所需的样式文件 第二如果有多个@import的时候 在IE中下载顺序会被打乱 JavaScript无法解析到它 网络不好的时候可能会导致浏览器混乱.。
?
5.四种样式的优先级
行内样式>内嵌样式>外链样式>导入样式
|