选中页面上的元素，右边的 Styles 面板上会显示出在这个元素上应用的样式 .. 在这块样式的右边儿，还会显示这块样式的出处是哪里 ..

如果你发现这里有些随机的数字 .. 可以再刷新一下页面 ..

这里显示这块样式来自 style.css 这个样式表里的第 9 行 ...

鼠标放到某个样式的前面，可以切换是否要使用这个样式 .. 你可以看一下元素在使用这个样式之前，还有之后的变化 ... （切换文字颜色）

点击样式的属性可以修改属性的名字 .. 开发者工具会提示你要输入的 css 属性的名字 .. 这里显示的就是所有 border 开头的 css 属性 .. 按一下回车表示确认输入 ..

我们也可以在这块样式里添加新的样式 .. 点击你想要插入新样式的地方，比如在这块儿样式的最上面 ..

输入 css 样式属性的名字 .. 用一个 color .. 按一下冒号或者 tab 键 .. 可以继续设置这个属性的值 .. 这里我用一个十六进制数字表示的颜色 .. #00F ..

在浏览器上，你会立即的得到元素在使用了这个样式之后的效果 .. 想修改这个颜色的值，可以点一下它 .. 这样会弹出一个颜色选择器 .. 在这里你可以选择想要的颜色 .. 按一下回车表示确认 ..

在要修改的值上面可以使用上下键 .. 选中这个边框样式的值 .. 按向上键，表示增加 .. 这里就是增加边框的高度 ..

向下键，表示减小值 ... 使用这两个快捷键可以快速的微调样式的值 .. 在这个开发者工具里面还定义了很多快捷键 .. 打开这个菜单 .. 选择 Shortcuts .. 在这里会列出所有可以使用的快捷键 ..