引入css的方法
推荐优先级由高到低
1.外部样式两种方式
注意引入css文件的路径正确,否则会导致引入无效
1.1 在html文件中直接用link标签链接css文件
<link rel=“stylesheet” href = “style.css”>
1.2 用@import语法来引入文件
1.2.1 在css文件中
@import语法是css的语法,因此若该语句在css文件中,可直接使用,示例如下在url中文件路径可加单引号,双引号或不加引号;若无url,则必须要用单引号或双引号扩起来
:
@import url(test.css);
@import url("test.css");
@import url('test.css');
@import 'test.css';
@import "test.css";
1.2.2 在html文件中
@import不能直接在html中使用,若要使用,需得用<style></style>
标签扩起来,示例如下此处仅列出一种示意
:
<style>
@import "test.css";
</style>
2.内部样式
直接在html文件的style标签中写样式,示例如下:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
background-color:green;
}
</style>
</head>
缺点:html太臃肿
3.内联样式
直接在标签中写样式,示例如下:
<body>
<p style="background: orange; font-size: 24px;">CSS 很 👍<p>
</body>
缺点:同一类标签,每一个都要写,修改起来麻烦
4.属性样式
也是写在标签内,但没有style关键字来表示
<img src="a.png" width=100 height=200 >
已废弃了