1.行间样式表
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<!-- ???????????行间样式：给单独的标签添加样式 ???????????语法：<div style="……"></div> ???????--> ???</head> ???<body> ???????<!--<div>div1</div>--> ???????<div style="width: 100px;height: 100px;background-color:pink"></div> ???????<div style="width: 100px;height: 100px;background-color:pink"></div> ???????<div style="width: 100px;height: 100px;background-color:pink"></div> ???????<div style="width: 100px;height: 100px;background-color:pink"></div> ???????<div style="width: 100px;height: 100px;background-color:pink"></div> ???????<div style="width: 100px;height: 100px;background-color:pink"></div> ???</body></html>
2.内部样式表
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<!-- ???????????内部样式表 ???????????针对当前html文件有效 ???????--> ???????<style> ???????????div{ ???????????????width: 100px; ???????????????height: 100px; ???????????????background-color:pink; ???????????} ???????</style> ???</head> ???<body> ???????<div></div> ???????<div></div> ???????<div></div> ???????<div></div> ???????<div></div> ???????<div></div> ???</body></html>3.外联样式表
<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????<!-- ???????????外部样式表 ???????????<link href="style.css" rel="stylesheet"/> ???????--> ???????<link rel="stylesheet" href="index.css" /> ???</head> ???<body> ???????<div></div> ???????<div></div> ???????<div></div> ???????<div></div> ???????<div></div> ???????<div></div> ???</body></html>
下面是index.css的代码
div{ ???width: 100px; ???height: 100px; ???background-color:yellow;}WEB前端开发工程师 学习第二天 样式表
原文地址：https://www.cnblogs.com/mayanlianggcs/p/9513737.html