页面中如何引入css

css作用页面的几种方式

1.内部样式表
书写在style中
2.内联样式表，元素样式表
直接书写在元素的style属性中
3.外部样式表[推荐]
将样式书写到独立的css文件中
（1）外部样式可以解决多页面样式重复的问题
（2）有利于浏览器缓存，从而提高页面响应速度
（3）有利于代码分离（html和css），更容易阅读和维护

<link rel="stylesheet" href="index.css">
这是index.css文件里的代码
div{
    width: 100px;
    height: 100px;
    background-color: red;
}

这是内部样式表
<style>
    div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
</style>

这是内联样式表
<div style="width: 100px;height: 100px;
background-color: red;"></div>

这三种方式都给div设置了宽高为100px，背景颜色为红色。

优先级

内联样式的优先级大于内部样式表大于外部样式表(后两者就近原则)

外部样式表的引入方式

1.链接式<link rel="stylesheet" href="css文件路径">
2.导入式<style type="text/css">
@import url("css文件路径");
</style>

链接式和导入式的区别

链接式
1、属于XHTML
2、优先加载CSS文件到页面
导入式
1、属于CSS2.1
2、先加载HTML结构再加载CSS文件。