CSS的引入方式
- 内联方式
- 在标签中通过style属性来控制样式,只能影响当前这一行
- 格式:
<标签style = "属性名:属性值; 属性名:属性值;">内容</标签>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入方式1</title>
</head>
<body>
<h1 style="color:red; font-size:20px">hello world</h1>
</body>
</html>
- 内部样式
- 在head标签中通过style标签来控制样式。只能影响当前文件
- 格式:
<head>
<style>
选择器{
属性名:属性值;
属性名:属性值;
}
</style>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入方式2</title>
<style>
div{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
- 外部样式
- 在head标签中通过link标签中引入独立css文件,可以影响不同的文件
- 格式:
<link rel="stylesheet" href="css文件">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入方式3</title>
<link rel = "stylesheet" href = "../CSS/01.css"/>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
div{
color:red;
font-size:20px;
}