css引入
- 行内样式
在标签中添加 style属性，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式表的引入</title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: blue;"></div>
</body>
</html>
-
内部样式
<head> <style> </style> </head>
<style>
/*标签选择器*/
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
-
外部样式表
新建.css文件方式1：<head> <link rel="stylesheet" type="text/css" href="css样式表的路径"> </head> 方式2：<head> <style> @import 'css样式表的路径' </style> </head>
<head>
<meta charset="UTF-8">
<title>样式表的引入</title>
<!-- 外部样式表引入 -->
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<head>
<meta charset="UTF-8">
<title>样式表的引入</title>
<!-- 外部样式表引入 -->
<style>
@import'index.css'
</style>
</head>
index.css
div{
width: 200px;
height: 200px;
background-color: coral;
}
区别：
link 属于html中标签，语法
在加载页面的时候，就会同时加载css样式表
@import 属于css语法范围
页面加载完成之后，才会加载css样式表