【翻译】Chrome Developer Tools: Element 样式

说明：本文对Chrome Developer Tools系列翻译文章的一篇

原文见https://developers.google.com/chrome-developer-tools/docs/elements-styles 

Chrome Developer Tools: Element Styles

This tutorial covers editing CSS styles using various DevTools aids.

这个教程讲解了通过开发工具编辑CSS样式。

Note: If you are a Web Developer and want to get the latest version of Developer Tools, you should use the Google Chrome release from the Developer Channel.

注意：如果你是一个Web开发者，想要获得最新的开发工具，请从 Developer Channel里获取Google Chrome 发行版。

Contents

  1. Computed Style Pane
  2. Styles Pane
    1. Viewing Styles
    2. Editing Styles
    3. Adding New Rules and Properties
  3. Metrics Pane
  4. Persisting Changes

Computed Style Pane

计算样式窗格

  • Invoke context menu on THIS (Inspect Me) element or hit Control-Shift-C to enter the Inspect Element mode and click on it. Alternatively, if you have DevTools open, click the Magnifier  button at the bottom of the Elements panel to point-click the element in the page.
调用右键菜单THIS (Inspect Me)或者按Control-Shift-C键，进入 Inspect Element 模式并且在上面点击。可选的，如果你已经打开开发工具，点击Elements panel 底部的 Magnifier  button，然后在页面元素上点击。
  • You will see several panes on the right-hand side of the panel. If the Computed Style pane is collapsed, expand it by clicking its header. The pane displays all the final values for CSS properties computed by the browser for the currently selected DOM node.
你会在面板的右手边看到几个窗格。如果Computed Style窗格是收缩的，点击它的头部展开它。这个窗格显示当前选择的DOM node的所有最终值。
  • For every property specified by more than one rule, the pane displays a computed trace, which is a stack of selectors applicable to the node and specifying the property value. Since rule selectors have different specificities, all but the top-most one will be “cancelled out” in the trace, which is denoted by a strike-through type.
对每个属性被不只一个规则指定，这个窗格显示计算的踪迹，它是选择器应用到节点的栈和指定的属性值。因为规则的选择器有不同的特征，所有除了最顶层的一个会被互相抵消，这会被用一个删除线表示。
  • Whenever possible, a computed trace element will contain a link to the source code fragment that defines the respective rule.
只要可能，计算的踪迹元素会包含定义各自规则的原代码片段的链接
  • The pane contains only properties from rules that are directly applicable to the selected element. In order to additionally display inherited properties, enable the Show inherited checkbox. Such properties will be displayed in a dimmed font.
窗格只包括一个属性，它直接应用于选择的元素。为了补充显示inherited 的属性，勾选Show inherited复选框，那么这些属性会用淡的字体显示

Styles Pane

  • For the currently selected DOM node, this pane displays all the styles applicable to this node. Styles with gray background are read-only, the rest are editable.
对当前选择的DOM node，这些窗格显示所以应用在这个node的样式。灰色背景的样式是只读的，余下的是可编辑的。
  • Invoke the DevTools inspector on THIS element as mentioned above.
用上文提到的办法调用DevTools 查看这个元素。

Viewing Styles

  • The styles are displayed as closely to the original declaration as possible. Some properties can have exclamation marks () next to their names. This means that the property name and/or value is not understood by the browser, so the property is ignored (as per the CSS specification).
样式会尽可能原始的声明接近。一些属性在它的名称前有感叹号，这表明这个属性的名称或值不能被浏览器理解，因此这个属性会被忽略。

  • Note: A style declaration may contain several properties with the same name. Only the last one takes effect, canceling the preceding ones. Those will be struck out, like overridden properties.

注意：样式声明会包含几个同名的属性。只有最后一个生效，前面的会被取消。那些会被删除，就像覆盖的属性。
  • If a property value (say, background-image) contains a URL that has been loaded, you can click it to navigate to the corresponding resource in the Resources panel.
假如属性值（比如 background-image）包括一个被加载的URL，你能点击它在资源面板里去访问相应的资源。
  • CSS color values are accompanied by a swatch filled with the respective color. You can click the swatch to cycle through all color formats available for the corresponding property, or use the Gear menu options to set the format for all color values, for which the format has not been set by clicking on the color swatch. The As Authored option formats color values in the way they are written in the CSS code.
CSS颜色值后跟着一个颜色板，填着对应的颜色。你能单击颜色板循环选用所有可用的颜色格式，显示相应的属性，或者用齿轮菜单选项设置所以颜色值的格式。这个格式没有被在色板上点击。As Authored 选项会用它们在CSS代码的格式显示颜色值。
  • Pseudo element styles, such as ::before, ::after, and many more -webkit-* ones, are also exposed in the Styles pane, along with the rules inherited from ancestor elements.
假（Pseudo）元素样式，如 ::before, ::after和更多形如-webkit-*的样式，也显示在样式窗格，随着从祖先元素inherited的规则。

Editing Styles

  • Double-click the worder property name, and type in bo instead. A valid border property name will be automatically suggested.
双击worder 属性名，并且输出bo，一个可用的border属性名会自动提示。
  • Hit Down several times to reach the border-color suggestion, and press Enter or Tab to accept it and jump to the value field (alternatively, you can press Right to accept the suggestion and continue editing the field,) or Esc to cancel the change. As usual, Shift-Tab traverses input fields in the reverse order.
单击几次border-color后的颜色面板，得到颜色示意，然后按Enter或Tab来接受它，并且跳到值域（作为一选择，你能按右键去接受建议或接着编辑值。）或者按Esc取消改变。照例，Shift-Tab按相反的顺序遍历输入值。
  • While editing the border-color property value, delete the clue word, and type in bl – in a moment, you will see a suggestion: black.
当编辑border-color 属性值，删除clue词，并且输入bl，立刻你会看见提示black。
  • Press Up or Down to cycle through all suggestions starting with bl. Choose any color value you like, and press Enter or Tab to accept the suggestion and commit the new property value. The property gets committed, and the exclamation mark disappears, as the property has become valid.
按Up or Down来循环看所有以bl开头的建议。选择任何你喜欢的颜色值，然后按Enter或Tab接受建议并提交新的属性值。属性值提交后，惊叹号消失，属性值变成可用的。
  • Besides iterating through available value keywords, you can also increment/decrement numeric property values (like opacity: 0.8 or margin: 2px 4px) with the Up/Downand PageUp/PageDown keys. The unit delta can be controlled in the following ways:
    • 0.1 unit: Alt-Up/Down (or plain Up/Down if the current value is in the range of [-1; 1])
    • 1 unit: Up/Down (for values greater than 1 or less than -1)
    • 10 unit: Shift-Up/Down or PageUp/PageDown
    • 100 unit: Shift-PageUp/PageDown
除了遍历可用的值关键字，你也能用Up/Downand PageUp/PageDown键增加/减少数值型属性值（像opacity: 0.8 or margin: 2px 4px）。变动的单位通过下面的规则控制：
    • 0.1 unit: Alt-Up/Down (or plain Up/Down if the current value is in the range of [-1; 1])
    • 1 unit: Up/Down (for values greater than 1 or less than -1)
    • 10 unit: Shift-Up/Down or PageUp/PageDown
    • 100 unit: Shift-PageUp/PageDown
  • Hover the mouse cursor over the rule body. You will see a checkbox to the right of each property in the rule.
鼠标光标停在规则上，你会在每个规则的属性值上看见一个多选框。
  • Uncheck a box to disable the border-color property (i.e. temporarily remove it from the style). The property gets struck out, and the change is instantly reflected in the inspected page.
取消选中box来禁用border-color 属性。
  • Double-click the border-color property value and change it to Lime, accept. Notice the property automatically get enabled with the updated value.
双击 border-color 属性值，并且改为Lime，接受它。注意属性自动能用并且更新了值。

Adding New Rules and Properties

增加新的规则和属性
  • You can add a new style rule to be considered in addition to those found in the stylesheets loaded by the page. Click the Gear  button and select the New Style Ruleoption. A new rule with an automatically suggested selector appears. Press Enter to accept the selector and start typing in the first property of the rule.

    Note: If you edit the selector so that it will not match the selected element, the rule will turn dimmed and obviously, will not be applied to the element. You should rarely need to do this.

除了那些被页面加载的样式表，你能增加新的样式规则。单击Gear 按纽，选择新样式规则。一个带着建议的选择器的新规则出现。按Enter键接收选择器，开始输入规则的第一个属性。
  • You can also add a new property to any editable style by:
    • Double-clicking the blank space of the first or last rule lines (those with curly braces).
    • Hitting Tab while editing the last style property value (or the corresponding rule selector if no properties have been added yet.)
你通过以下途径给可编辑的样式增加属性：
双击第一或最后一个规则行的空白（它们带花括号）
当编辑最后的样式属性值（或如果没有增加属性值，相应的规则选择器），单击Tab

Metrics Pane

度量窗格
  • The Metrics pane resides just below the Styles pane and allows you to examine and edit the current element’s box model parameters found in the computed style.
度量 窗格 位于样式 窗格 的正下方，允许你检查和编辑当前元素在计算后的样式的盒子模型参数。
  • The concentric rectangles contain the values for the padding, border, and margin properties (top, right, bottom, and left values for each of them.)
同心的矩形包括padding, border,和margin的属性（top,right,bottom和left）值
  • For non-statically positioned elements, a position rectangle will be additionally displayed in the pane, containing the values of the top, right, bottom, and left properties.
对于非静态位置的元素，在 窗格 增加显示位置矩形，包括top,right,bottom和left属性值
  • For position: fixed and position: absolute elements, the central field contains the actual offsetWidth × offsetHeight pixel dimensions of the selected element.
对position: fixed 和 position: absolute的元素，中间的值域包括选择元素的实际的 offsetWidth × offsetHeight像素测量值。
  • All values can be modified by double-clicking them, like property values in the Styles pane (the changes are not, however, guaranteed to take effect, as this is subject to the concrete element positioning specifics.)
所有属性的值能通过双击这些值来修改，像在sytle窗格的一样。（由于受制于具体元素位置细节，这些变化不担保生效。）

Persisting Changes

  • Upon an external style sheet rule modification, the respective resource text is updated in the Resources panel, and the revision history is stored for such style sheet resources until the DevTools window is closed.
外部样式表规则修改了，相应的资源文本会在资源面板上更新。样式表的修订历史会一直保存到开发工具窗口关闭。
  • Activate the Resources panel, find tutorial.css in the resource tree. Note that the tree node is expandable. Click the arrow next to the node title, and you will see all the resource modifications that you have made above.
激活资源面板，在资源树上找到 tutorial.css。注意树能够展开。单击节点标题旁边的箭头，你会看见你上面已做的所有修改。
  • Select any revision to see its differences from the original stylesheet resource, highlighted line-wise.
选择任一修订，和原始样式表不同的行会高亮显示。
  • You can drag and drop a stylesheet revision node into most text editors to export the revision content.
你能拖动样式表修订节点到大部分文本编辑器来导出修订内容。
posted @ 2012-05-28 09:56  gmartincn  阅读(789)  评论(0)  编辑  收藏  举报