【翻译】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
- Computed Style Pane
- Styles Pane
- Viewing Styles
- Editing Styles
- Adding New Rules and Properties
- Metrics Pane
- 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.
- 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.
- 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.
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.
- Invoke the DevTools inspector on THIS element as mentioned above.
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.
- 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.
::before
, ::after和更多形如
-webkit-*的样式,也显示在样式窗格,随着从祖先元素inherited的规则。
Editing Styles
- Double-click the
worder
property name, and type inbo
instead. A validborder
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.
- While editing the
border-color
property value, delete theclue
word, and type inbl
– 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.
- Besides iterating through available value keywords, you can also increment/decrement numeric property values (like
opacity: 0.8
ormargin: 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
- 0.1 unit: Alt-Up/Down (or plain Up/Down if the current value is in the range of
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.
border-color
属性。
- Double-click the
border-color
property value and change it toLime
, 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.
- 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.)
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.)
- 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.
- For
position: fixed
andposition: 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.)
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.
- 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.
转载于:https://www.cnblogs.com/cnblue/archive/2012/05/28/2520861.html
【翻译】Chrome Developer Tools: Element 样式相关推荐
- chrome developer tools小技巧
chrome developer tools小技巧 最喜欢用的浏览器是chrome浏览器,没有之一.不仅仅因为简洁.轻巧.速度快,更是因为其内置的强大的F12 developer tools开发者工具 ...
- Python|http|Chrome Developer Tools|Postman|HTTPie|builtwith库|python-whois库|爬虫及解析|语言基础50课:学习(10)
文章目录 系列目录 原项目地址 第31课:网络数据采集概述 爬虫的应用领域 爬虫合法性探讨 Robots协议 超文本传输协议(HTTP) 相关工具(Chrome Developer Tools.Pos ...
- Chrome 开发工具 (Chrome Developer Tools):Network Panel说明
出处:http://www.cnblogs.com/starof/p/5443445.html 官方资料:Chrome Developer Tools: Network Panel 一.chrome ...
- 前端(移动端)开发利器Chrome Developer Tools秘籍(下)
之前有分享到我们可以通过 Command Line API 来提高我们的开发效率.除此之外,还有一些比较有趣的快捷键和调试方法,也能帮助提高大家的生产效率. 几个小事项: 1.文中提到的快捷键 com ...
- 优雅且高效的使用Chrome Developer Tools
2019独角兽企业重金招聘Python工程师标准>>> 上集 下集 转载于:https://my.oschina.net/uniquejava/blog/492308
- 关闭chrome浏览器的developer tools
2019独角兽企业重金招聘Python工程师标准>>> 背景 Chrome使用过程中,很容易启动Chrome developer tools,一些误触如按到F12.CTRL+Shif ...
- viewsource和viewparsed_(Summary)Developer Tools:IE9的F12,Chrome的Ctrl+Shift+J比较
1.支持对于抓取的每个页面的详细的request header/post data,response header,cookie等信息 IE9和Chrome中的这些功能,是开发工具中的核心的功能,对于 ...
- [翻译]Windows 8 Developer Tools C++Builder XE3
2013-02-02 Windows 8 Developer Tools C++Builder XE3 英文原文:http://www.embarcadero.com/products/cbuild ...
- React Developer Tools Chrome浏览器扩展一直提示“This page doesn’t appear to be using React.“最新解决办法
终于解决了这个棘手的问题,现在把解决的方法分享给大家,希望能帮助到各位网友. 首先,在安装了 最新的版本的插件时候,访问用react写的网站比如美团官网和react中文网,都是报错. 之后在网上苦苦搜 ...
最新文章
- aop对请求后端的参数修改_Spring Aop 修改目标方法参数和返回值
- jenkins linux 配置文件,Jenkins 部署打包文件 并通过SSH上传到 linux服务器
- 相机视场角和焦距_按照工业镜头的视场的分类
- Redis 实战笔记
- 单向链表的逆转(数据结构)(c语言)
- oracle数据库修改归档和非归档模式
- python调用程序call_call在Python中改进数列的实例讲解
- 2020胡润全球80后白手起家富豪榜:前三名两位中国人
- 【java】java 并发编程 BlockingQueue 和 BlockingDeque
- C#开发:openfiledialog的使用
- c语言中.和-区别,c语言中-和.的区别
- 软件项目管理实用教程(人民邮电出版)第一章课后习题
- android 内嵌web,Android《内嵌浏览器-WebView》
- 一分六钱用计算机怎么算,交行信用卡分期付款计算器:5000元分6期手续费
- 网络:bit、Byte、bps、Bps、pps、Gbps的单位详细说明及换算。
- 一个正常80后收藏夹中的精品网站
- JavaScript关闭窗口的方法
- 我在linux主机用arm-linux-gcc编译后,复制到开发板根目录运行,出现/bin/sh: ./hello not found
- 安全网络通信(SSLJSSE)
- CF577B Modulo Sum(dp,抽屉原理 | bitset优化 | 二进制优化)