CSS引入方式
2020-09-15 本文已影响0人
HGS
CSS引入方式
- 通过
<link>标签引用，最常见也是最推荐的的方式，所有的css代码只存在单独的css文件中，所以具有良好的可维护型性，css文件在第一次加载时引入，以后切换页面时只需加载HTML文件即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>hello css!</h1>
</body>
</html>
- 通过CSS语法@import引入
- 放在style标签或者css文件中
- @import必须放在css文件开头
- 语法后面的分号必不可少
<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') ;screen and (orientation:landscape);
</style>
- 内部样式
- 将css放在页面<style>标签中
- style标签可以放在head里，也可放在body内任意地方
内部样式引入css只对当前页面网页有效，当多个页面需要引入相同的css代码时，会导致代码冗余，不利于维护。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1{ background: orange; }
</style>
</head>
<body>
<h1>hello CSS!</h1>
</body>
</html>
- 内联样式
不推荐，只能改变当前标签的样式，想要多个<p>拥有相同的样式，不得不重复为每个<p>添加样式，如果想要修改一种样式，又不得不修改所有的style代码，内联样式引入CSS会导致HTML代码变得冗长，使得网页难以维护。
<p style="background: orange; font-size: 24px;">
CSS
</p>
- 属性样式（已废弃）
<img src="a.png" width=100 height=200 >
link引入方式和@import两种比较常用引入CSS方式有什么区别？
-
link是HTML的标签，在页面上代表一个元素，可以被JS选中修改，@import是CSS的语法，JS无法操控。
-
两个link标签，文件会并行加载，一个link的CSS里包含一个@import，文件串行加载会更慢。
-
link是HTML标签，无兼容问题，@import是在CSS2.1提出的，低版本的浏览器不支持。
参考：饥人谷课件
https://blog.csdn.net/xuehu837769474/article/details/80457957
