3种方式哦,行内样式、内部样式表、外部样式表
1. 行内样式又称为内联样式,直接在HTML标签的style属性中添加css.
会导致 HTML 代码变得冗长
2. 内部样式表又称为嵌入方式,是在HTML<head>的<style>标签中写css代码
因为嵌入的 CSS 只对当前页面有效,所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。
3. 外部样式表可以通过,HTML 头部的 <head>
标签引入外部的 CSS 文件.
(1)、链接式 :
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
(2)、导入式
<style type="text/css">
@import url("css文件路径");
</style>
区别:
1. link属于XHTML标签,除了加载CSS之外,还可以定义其他业务,@import属于css2.1,只能加载CSS。
2. link 引入CSS时,在页面载入时同时加载,@import在页面加载完全后,再加载css.
3. link无兼容性问题, @import是在CSS2.1提出的,故只可在 IE5+ 才能识别,低版本的浏览器不支持。
4. 可以通过JS操作DOM,插入link标签来改变样式。
CSS 权重优先级顺序简单表示为:
!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符