查看和更改CSS
完成这些交互式教程，了解使用 Chrome DevTools 查看和更改页面 CSS 的基础知识。
查看一个元素的CSS样式
1 右键点击下面的文字框Inspect me!并选择检查，元素面板会被打开。
Inspect me!
2 可以看到Inspect me!在DOM树中是蓝色高亮的。
3 在DOM树中，找到Inspect me!元素的data-message属性。
4 在下面的文字框中输入该属性的值。
5 在元素 > 样式窗格中，找到aloha类的规则。样式窗格列出了应用于当前在 DOM 树中选择的任何元素的 CSS 规则，当前应该仍然展示的是Inspect me!元素的样式。
6 aloha类声明了padding的值。在下面的文本框中输入此值及其单位（不带空格）。
如果您想将 DevTools 窗口停靠在视口的右侧，就像第一步中的屏幕截图一样，可以查看更改 DevTools 位置。
向一个元素添加CSS声明
当您想对一个元素修改或者添加CSS声明语句时可以使用样式窗格。
1 右键点击下面的文字Add a background color to me!并选择检查。
Add a background color to me!
2 点击样式窗格顶部附近的element.style。
3 输入background-color并回车。
4 输入honeydew并回车。在DOM树中，您可以看到内联样式声明已应用于该元素。
向一个元素添加CSS类
使用样式窗格可以查看当一个CSS类被应用或者被删除时，该元素的显示效果。
1 右键点击下面的Add a class to me!并选择检查。
Add a class to me!
2 点击样式窗格顶部工具栏中的**.cls**。DevTools 会显示一个文本框，您可以在其中向所选元素添加类。
3 在添加新类文本框中输入color_me。添加新类文本框下方会出现一个复选框，您可以在其中打开和关闭该类。如果Add a class to me!元素应用了其他任何类，您也可以在这里切换它们。
向一个CSS类添加伪状态（伪类）
使用样式窗格将一个CSS伪状态永久应用于一个元素。DevTools 支持 :active、:focus、:hover、:visited 等。
1 将鼠标悬停在下面的Hover over me!，背景颜色会发生变化。
Hover over me!
2 右键点击Hover over me!并选择检查。
3 在样式窗格中，点击:hov。
4 勾选**:hover**选择框，即使您实际上并未将鼠标悬停在该元素上，背景颜色也会像之前一直改变。
更改一个元素的尺寸
使用样式窗格中的盒模型交互图更改元素的width、height、padding、margin或者border宽度。
1 右键点击下面的Change my margin!元素并选择检查。
Change my margin!
2 要查看盒子模型，请单击样式窗格的操作栏中的
显示侧边栏按钮。
3 在样式窗格中的盒子模型图表中，将鼠标悬停在padding上。元素的padding就会在视口中高亮显示。
4 双击盒子模型中的左margin。该元素当前没有margin，所以left-margin的值是 -。
5 输入100并回车。
盒子模型中的长度单位默认为像素（pixels），但是也接受其他单位，比如25%或者10vw。
重要：
另外，在样式窗格的规则声明中，您可以使用指针改变长度属性及其单位。