目录
一、CSS样式浏览器实时查看与编辑(Chrome为例)
- 首先我们写一个简单的页面
css代码：
h2 {
color: red;
}
html代码：
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>学习内容：</h2>
<ol>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
</body>
</html>
网页显示效果:
- 在浏览器中打开开发者工具
在当前页面右键-->检查：
其中Elements选项卡对应的是当前页面的源代码。
- 查看h2标签的样式
将鼠标在Elements选项卡的源码中移动，移到h2标签对应的代码行，在下方Styles选项卡中可以查看h2标签的样式：
其中蓝色部分是我们之前自己编辑的样式，绿色部分是h2标签的默认样式。
- 实时编辑h2标签的样式
点击上图黄色部分的style.css，则可以手动在浏览器编辑h2标签的样式，并且会在网页中实时更新：
二、神器WorkSpace:在线实时更新本地CSS文件
- 将浏览器中页面样式的实时编辑结果，保存到本地css文件中
- 点击上图中的Filesystem
- 点击Add folder to workspace，将本地css文件所处的项目路径添加进去
- 此时，在浏览器中实时编辑css文件,并保存；那么编辑内容就会同时保存到本地的css文件中。