三种样式表
1) 行内样式表
<div style=”color:pink”></div>
简单，但是作用范围是单个标签
2) 内部样式表（嵌入）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css体验学习</title>
<style>
/* 内部样式 */
p {
color: red;
font-size: 12;
}
</style>
</head>
<body>
<p>文本</p>
</body>
</html>
作用范围是整个HTML页面
style标签实际上可以在任意位置
3) 外部样式表
1新建Css文件
2链接css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style008.css">
<!-- 链接外部css文件 -->
</head>
<body>
gaoyang
<p>gaoyang</p>
<div>gaoyang</div>
</body>
</html>
3作用范围是所有链接了css的HTML
Chrome调试工具
- 打开浏览器F12/右键 检查
- Element（元素）
- 小技巧
a) Ctrl+滚轮调大小
b) 箭头定位
c) Ctrl+0复原浏览器大小
d) 没有样式（类错误）
e) 黄色三角感叹号/划掉说明代码错误