编辑样式.md

编辑样式

使用Styles窗口修改所选元素的CSS样式

总的来说本节包括如下内容

• Styles窗口可以以任意方式修改CSS样式，譬如修改已存在的样式、添加新样式、增加新的样式规则等等。
• 如果你希望修改的样式在页面刷新后能持久化，你需要设置工作空间。

检视应用于所选元素之上的样式

如何选择元素请参考编辑DOM。Styles窗口根据优先级从高到低的规则显示应用于所选元素上的CSS样式。

• 最上一条是element.style。这里列举了直接应用于所选元素上的样式（eg.<p style="color:green">）
• 往下是与所选元素匹配的样式规则。如下图所示，所选元素通过在tools.css文件中定义的规则，获取到line-height:24px的样式。
• 再往下是继承的样式，包括从所选元素祖先继承到的所有支持继承的样式规则。如下图所示，所选元素继承了display:list-item样式，通过浏览器内置的样式规则。

如下条目的编号与上图中的编号一一对应

1. 与匹配元素关联的样式
2. 浏览器内置样式会被明确的标识出来，并且经常会根据网页需求而被重写。
3. 被重写的样式，使用删除线表示。
4. 继承的样式会用一个分组框展示，分组框的标题显示为“Inherited from <NODE>”。点击标题上的DOM节点，可以定位到相应节点在DOM树中的位置。（CSS2.1 属性表会说明哪些属性是可以继承的）。
5. 灰色的样式，表示并没有明确定义，而是根据运行时计算所得

理解级联和继承的工作原理是调试样式的根本。级联关系着如何给CSS样式指定权重，当他们被其它样式规则重写时。而继承则关系着HTML如何从它们的祖先那里继承CSS样式。详情请见W3C级联文档。

检视应用于某样式的所有元素

鼠标移动到Styles窗口的CSS选择器上，可以看到所有被该选择器匹配的元素。如下图所示，鼠标移到选择器.wf-tools-guide__section-link a上，在页面中可以看到所有该选择器匹配到的元素。

提示 此特性仅高亮显示可视范围内的元素，可能还存在其它也被匹配，但并没有在视窗显示出来的元素

增加、�使能、禁用CSS�类

点击**.cls**摁钮可以查看当前选择元素上所有的CSS类。你可以：

• 使能或者禁用某一个或某些类
• 添加一个新类

编辑现存属性以及其值

点击即可编辑属性名或者属性值。当属性名或者属性值选中高亮时，Tab键可以向前移动到下一个属性名、属性值或者选择器。Shift+Tab向后移动到上一个。

当编辑数值类型的CSS属性值时，增加和减少可以通过如下快捷操作：

• Up和Down会增加和减少1，当值在-1到1之间时，增加减少0.1。
• Alt+Up和Alt+Down，增加减少0.1。
• Shift+Up和Shift+Down，增加减少10。

增加属性声明

在现存的CSS类的空白区域点击，即可新增一个属性，键入属性名和属性值或者直接粘帖进去。

提示 可以直接在属性名前面的checkbox上点击来开启和禁用该样式。

增加样式规则

点击新建规则摁钮（）。 点击并且摁住可选择新建的规则被添加到哪个css文件。

增加或者移除动态样式（伪类）

你可以手动设置动态的伪类选择器，例如:active,:focus,:hover,:visited。这样便可以通过谷歌开发者工具模拟选择元素的动态效果，方便调试。

有两种方式设置这些动态样式：

• 在所选元素上右击，选择相应伪类开关选项即可。如下图

• 在元素面板选中元素，点击Styles窗口的**:hover**摁钮，使用checkbox来设置当前选择元素的动态伪类开关。

在样式规则中增加样色以及背景颜色

Styles 窗口提供了添加文字颜色、背景颜色、文字阴影以及背景阴影样式的快捷方法。鼠标移动到样式规则的右下角，会出现三个点的图标，如下图所示

如下图点击相应摁钮即可

使用颜色选择器修改颜色值

在Styles窗口，找到与颜色相关的CSS样式，可以看到颜色值左边有一个带相应颜色的小方块。点击这个小方块即可打开颜色选择器。

颜色选择器及其操作方法简介如下(如下编号与下图中标注编号一一对应)：

1. 颜色吸管
2. 当前颜色
3. 当前颜色值
4. �颜色面板
5. 颜色选择器
6. 色调选择器
7. 透明度选择器
8. 颜色值切换器 在RGBA/HSL/十六进制之间切换
9. 颜色面板切换器 在页面颜色、质化设计颜色、自定义颜色之间切换。

颜色吸管

点击颜色吸管，鼠标变成吸管的形状，移动到当前页面的任意地方，点击便可提取点击点所对应的颜色值。

颜色面板

谷歌工发者工具提供3类颜色面板：

• 页面颜色 谷歌开发者工具会自动提取当前页面上定义的颜色，显示到这个面板中
• 质化设计颜色 由质化设计制定的一套颜色值
• 自定义 你可以根据需求定义自己经常会用到的颜色。怎么添加不作详细介绍，很简单，试下就好了。

查看编辑CSS变量

你可以跟其它样式一样查看和编辑CSS变量。CSS变量通常被定义在:root选择器上,查看html元素即可发现。当然你也可以定义在其它地方，查看相应的元素即可。

如果你看到一个属性值如下图所示，它表示该值使用自定义变量。这些属性值可以跟其它属性值一样编辑，但目前还不能跳转到CSS变量声明的地方。

编辑Sass、Less、Stylus

如果你用了Sass,Less,Stylus或者其它CSS预处理器，编辑生成的css文件并没有什么卵用，因为它们并没有映射到源文件。通过CSS源码映射，谷歌工发者工具，能自动映射到CSS源文件，进而可以实时编辑相关样式而不用刷新页面。

由于大部分项目并没有使用CSS预处理器，此节内容暂不提供，后续补充