diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:50:24 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:50:24 +0100 |
commit | 2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e (patch) | |
tree | 86ab4534d10092b293d4b7ab169fe1a8a2421bfa /files/pt-pt/tools/page_inspector/guia_de_iu | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.tar.gz translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.tar.bz2 translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.zip |
unslug pt-pt: move
Diffstat (limited to 'files/pt-pt/tools/page_inspector/guia_de_iu')
-rw-r--r-- | files/pt-pt/tools/page_inspector/guia_de_iu/index.html | 101 |
1 files changed, 0 insertions, 101 deletions
diff --git a/files/pt-pt/tools/page_inspector/guia_de_iu/index.html b/files/pt-pt/tools/page_inspector/guia_de_iu/index.html deleted file mode 100644 index 271798ce5c..0000000000 --- a/files/pt-pt/tools/page_inspector/guia_de_iu/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Guia de IU -slug: Tools/Page_Inspector/Guia_de_IU -tags: - - Ferramentas - - Guia(2) - - Inspetor -translation_of: Tools/Page_Inspector/UI_Tour ---- -<div>{{ToolsSidebar}}</div><p>Este artigo é um guia rápido das secções principais da interface do utilizador de Inspetor de Página.</p> - -<p>Esta abrange três componentes de topo da IU do Inspetor:</p> - -<ul> - <li>o botão de "Selecionar elemento"</li> - <li>o painel de HTML</li> - <li>o painel de CSS</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13114/inspector-overview.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;">This guide is intentionally kept as short as possible. It links to various how to guides for the details of how to work with the Inspector.</p> - -<h2 id="Botão_de_selecionar_elemento">Botão de selecionar elemento</h2> - -<p>The Inspector gives you detailed information about the currently selected element. The Select element button is one way you can select an element for inspection:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13122/select-element.png" style="display: block; height: 801px; margin-left: auto; margin-right: auto; width: 944px;"></p> - -<p>Note that it's actually part of the <a href="/en-US/docs/Tools/Tools_Toolbox#Toolbar">main toolbox toolbar</a>, so it's immediately accessible from any tool, not just the Inspector.</p> - -<p>To learn how to select an element, see the guide to <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">selecting an element</a>.</p> - -<h2 id="Painel_de_HTML">Painel de HTML</h2> - -<p>The Inspector is split into two halves. The left-hand half is occupied by the HTML pane:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13116/markup-in-context.png" style="display: block; height: 1754px; margin-left: auto; margin-right: auto; width: 932px;"></p> - -<p>To learn more about the structure of the HTML pane, see the guide to <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">examining and editing HTML</a>.</p> - -<h2 id="Painel_de_CSS">Painel de CSS</h2> - -<p>The right-hand side of the Inspector is occupied by the CSS pane:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13118/rules-in-context.png" style="display: block; height: 1778px; margin-left: auto; margin-right: auto; width: 932px;">The CSS pane is divided into 4 views:</p> - -<ul> - <li>Rules view</li> - <li>Computed view</li> - <li>Fonts view</li> - <li>Animations view</li> -</ul> - -<p>Use the tabs along the top to switch between the different views.</p> - -<h3 id="Visualizar_Regras">Visualizar Regras</h3> - -<p>The Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13120/rules-view.png" style="display: block; height: 866px; margin-left: auto; margin-right: auto; width: 519px;"></p> - -<p>See <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a> for more details.</p> - -<h3 id="Visualização_computada">Visualização computada</h3> - -<p>The Computed view shows you the complete computed CSS for the selected element, and an editable visual representation of the box model for the element:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13855/computed-shadowed-squashed.png" style="display: block; margin-left: auto; margin-right: auto; width: 519px;"></p> - -<p>To learn more about the box model view, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a>. Note that before Firefox 50, the box model view did not appear in the "Computed view" tab, but had its own tab.</p> - -<p>To learn more about the CSS declarations listed in this view, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Examine computed CSS</a>.</p> - -<h3 id="Visualizar_tipo_de_letra">Visualizar tipo de letra</h3> - -<div class="warning"> -<p><strong>Apenas </strong>na versão 47 do Firefox , a visualzaição dos Tipos de Letra está desativada por predefinição. Se pretender ver a visualização dos tipos de Letra na versão 47 do Firefox, visite <code>about:config</code>, encontre a preferência <code>devtools.fontinspector.enabled</code>, e defina-a para "<code>true"</code>.</p> - -<p>Antes e depois da versão 47 do Firefox, a visualização dos Tipos de letra está ativada por predefinição.</p> -</div> - -<p>The Fonts view shows all the fonts in the page along with editable samples.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/10015/css-fonts.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p> - -<p>Consultar <a href="/pt-PT/docs/Tools/Page_Inspector/How_to/Visualizar_tipos_de_letra">Visualizar tipos de letra</a> para mais detalhes.</p> - -<h3 id="Visualizar_animações">Visualizar animações</h3> - -<p>The Animations view gives you details of any animations applied to the selected element, and a controller to pause them:</p> - -<p> </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13126/animations-view.png" style="display: block; height: 854px; margin-left: auto; margin-right: auto; width: 519px;"></p> - -<p>Consulte <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a> para mais detalhes.</p> - -<h3 id="Mostrarocultar_painel_CSS">Mostrar/ocultar painel CSS</h3> - -<p>From Firefox 40 onwards, there's a button in the toolbar that you can use to show or hide the CSS pane:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13124/show-hide-css.png" style="display: block; height: 419px; margin-left: auto; margin-right: auto; width: 630px;"></p> |