aboutsummaryrefslogtreecommitdiff
path: root/files/pt-pt/conflicting/learn
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:50:24 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:50:24 +0100
commit2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e (patch)
tree86ab4534d10092b293d4b7ab169fe1a8a2421bfa /files/pt-pt/conflicting/learn
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.tar.gz
translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.tar.bz2
translated-content-2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e.zip
unslug pt-pt: move
Diffstat (limited to 'files/pt-pt/conflicting/learn')
-rw-r--r--files/pt-pt/conflicting/learn/css/first_steps/how_css_works/index.html135
-rw-r--r--files/pt-pt/conflicting/learn/css/first_steps/how_css_works_0767812f50daab83155d62da97c6e460/index.html111
2 files changed, 246 insertions, 0 deletions
diff --git a/files/pt-pt/conflicting/learn/css/first_steps/how_css_works/index.html b/files/pt-pt/conflicting/learn/css/first_steps/how_css_works/index.html
new file mode 100644
index 0000000000..2ee2937e47
--- /dev/null
+++ b/files/pt-pt/conflicting/learn/css/first_steps/how_css_works/index.html
@@ -0,0 +1,135 @@
+---
+title: O que é CSS
+slug: Web/CSS/Como_começar/O_que_é_CSS
+tags:
+ - 'CSS:Como_começar'
+translation_of: Learn/CSS/First_steps/How_CSS_works
+translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS
+---
+<p>{{Next("CSS:Como começar:Porque usar CSS")}}</p>
+
+<p>Esta página explica o que é CSS. Você cria um documento de amostra para que possa trabalhar com as páginas seguintes.</p>
+
+<h3 id="Informa.C3.A7.C3.B5es:_O_que_.C3.A9_CSS.3F" name="Informa.C3.A7.C3.B5es:_O_que_.C3.A9_CSS.3F">Informações: O que é CSS?</h3>
+
+<p>CSS é uma linguagem que especifica como os documentos são apresentados aos usuários.</p>
+
+<p>Um <em>documento</em> é uma coleção de informações estruturadas utilizando uma <em>linguagem de marcação</em>.</p>
+
+<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
+ <caption>Exemplos</caption>
+ <tbody>
+ <tr>
+ <td>
+ <ul>
+ <li>Uma página da Web como esta é um documento.<br>
+ As informações que você vê em uma página da Web, geralmente, é estruturada utilizando a linguagem de marcação HTML (HyperText Markup Language - Linguagem de Marcação de Hiper Texto).</li>
+ </ul>
+
+ <ul>
+ <li>Uma caixa de diálogo em um aplicativo Mozilla é um documento.<br>
+ A interface com o usuário controla o que aparece em uma caixa de diálogo Mozilla, que é estruturada utilizando a linguagem de marcação XUL (XML User-interface Language - Linguagem de Interface do Usuário XML).</li>
+ </ul>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>Neste tutorial, os quadros entitulados <strong>Mais detalhes</strong> como este logo abaixo, contêm informações opcionais. Se você está com pressa para progredir no tutorial, você pode ignorar esses quadros, retornando para lê-los posteriormente. Caso contrário, leia-os ao encontrá-los, e talvez siga os links para aprender mais.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+ <tr>
+ <td>
+ <p>Um documento não é igual a um arquivo. Ele pode ou não ser armazenado em um arquivo.</p>
+
+ <p>Por exemplo, o documento que você está lendo agora não está armazendo em um arquivo. Quando seu navegador da Web solicita esta página, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. Entretanto, neste tutorial você vai trabalhar com documentos que estão armazenados em arquivos.</p>
+
+ <p>Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste Web site — por exemplo:</p>
+
+ <table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+ <tr>
+ <td><a href="/pt/HTML" title="pt/HTML">HTML</a></td>
+ <td>para páginas da Web</td>
+ </tr>
+ <tr>
+ <td><a href="/pt/XML" title="pt/XML">XML</a></td>
+ <td>para documentos estruturados em geral</td>
+ </tr>
+ <tr>
+ <td><a href="/pt/SVG" title="pt/SVG">SVG</a></td>
+ <td>para gráficos</td>
+ </tr>
+ <tr>
+ <td><a href="/pt/XUL" title="pt/XUL">XUL</a></td>
+ <td>para interfaces com o usuário no Mozilla</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <p>Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p><em>Apresentar</em> um documento a um usuário significa convertê-lo para uma forma que humanos possam usá-lo. O Mozilla é projetado para apresentar documentos visualmente — por exemplo, em uma tela de computador, projetor ou impressora.</p>
+
+<table style="background-color: #f4f4f4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+ <tr>
+ <td>CSS não serve apenas para navegadores e apresentação visual. Em uma terminologia formal de CSS, o programa que apresenta um documento ao usuário é chamado de <em>agente usuário</em> (UA - User Agent). Um navegador é apenas um tipo de UA. Entretanto, na Parte I deste tutorial você irá trabalhar apenas com CSS em um navegador.
+ <p>Para mais definições formais de terminologia sobre CSS, consulte <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definitions</a> na CSS Specification.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="A.C3.A7.C3.A3o:_Criando_um_documento" name="A.C3.A7.C3.A3o:_Criando_um_documento">Ação: Criando um documento</h3>
+
+<p>Utilize seu computador para criar um novo diretório e um novo arquivo de texto dentro dele. O arquivo irá conter seu documento.</p>
+
+<p>Copie e cole o código HTML mostrado abaixo. Salve o arquivo utilizando o nome <code>doc1.html</code></p>
+
+<div style="width: 40em;">
+<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;html&gt;
+ &lt;head&gt;
+ &lt;title&gt;Documento de amostra&lt;/title&gt;
+ &lt;/head&gt;
+
+ &lt;body&gt;
+ &lt;p&gt;
+ &lt;strong&gt;C&lt;/strong&gt;ascading
+ &lt;strong&gt;S&lt;/strong&gt;tyle
+ &lt;strong&gt;S&lt;/strong&gt;heets
+ &lt;/p&gt;
+ &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+</div>
+
+<p>Em seu navegador, abra uma aba ou uma nova janela, e abra o arquivo do diretório.</p>
+
+<p>Você deve ver o texto com as iniciais em negrito, conforme abaixo:</p>
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+ <tr>
+ <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>O que você vê em seu navegador pode não ser exatamente como o exibido aqui, por causa das configurações de seu navegador e deste wiki. Se houver diferenças na fonte, espaçamento ou cor, não há importância.</p>
+
+<h4 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h4>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/O_que_%C3%A9_CSS" title="Talk:pt/CSS/Como_começar/O_que_é_CSS">Discussão</a>.</p>
+
+<p>Seu documento ainda não utiliza CSS. Na página a seguir você utilizará CSS para especificar o estilo: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Porque_usar_CSS" title="pt/CSS/Como_começar/Porque_usar_CSS">Porque usar CSS</a></strong></p>
+
+<p>{{Next("CSS:Como começar:Porque usar CSS")}}</p>
diff --git a/files/pt-pt/conflicting/learn/css/first_steps/how_css_works_0767812f50daab83155d62da97c6e460/index.html b/files/pt-pt/conflicting/learn/css/first_steps/how_css_works_0767812f50daab83155d62da97c6e460/index.html
new file mode 100644
index 0000000000..2adc531924
--- /dev/null
+++ b/files/pt-pt/conflicting/learn/css/first_steps/how_css_works_0767812f50daab83155d62da97c6e460/index.html
@@ -0,0 +1,111 @@
+---
+title: Porque usar CSS
+slug: Web/CSS/Como_começar/Porque_usar_CSS
+tags:
+ - 'CSS:Como_começar'
+translation_of: Learn/CSS/First_steps/How_CSS_works
+translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS
+---
+<p>{{ PreviousNext("CSS:Como começar:O que é CSS", "CSS:Como começar:Como o CSS trabalha") }}</p>
+
+<p>Esta página explica porque os documentos usam CSS. Você usa CSS para adicionar uma folha de estilo ao seu documento de amostra.</p>
+
+<h2 id="Informa.C3.A7.C3.B5es:_Por_que_usar_CSS.3F" name="Informa.C3.A7.C3.B5es:_Por_que_usar_CSS.3F">Informações: Por que usar CSS?</h2>
+
+<p>CSS ajuda a manter o conteúdo das informações de um documento separado dos detalhes de como exibí-lo. Os detalhes de como exibir o documento são conhecidos como <em>estilo</em>. Você mantém o estilo separado do conteúdo, de modo que você pode:</p>
+
+<ul>
+ <li>Evitar duplicação</li>
+ <li>Tornar a manutenção mais fácil</li>
+ <li>Utilizar o conteúdo com diferentes estilos para diferentes propósitos</li>
+</ul>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+ <tr>
+ <td>Seu Web site pode ter milhares de páginas similares. Utilizando CSS, você armazena as informações em arquivos comuns que todas as páginas compartilham.
+ <p>Quando um usuário exibe uma página da Web, o navegador do usuário carrega as informações de estilo junto com o conteúdo da página.</p>
+
+ <p>Quando um usuário imprime uma página da Web, você fornece informações de estilo diferentes que tornam a página impressa mais fácil de ler.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>Geralmente, com CSS, você utiliza a linguagem de marcação para descrever o conteúdo das informações do documento, não seu estilo. Você utiliza CSS para especificar o estilo, não o conteúdo. (Posteriormente neste tutorial, você verá algumas exceções deste método.)</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+ <tr>
+ <td>Uma linguagem de marcação, como o HTML, também fornece alguns modos de especificar o estilo.
+ <p>Por exemplo, em HTML, você pode usar uma tag <code>&lt;b&gt;</code> para tornar o texto negrito, e você pode especificar a cor do segundo plano de uma página na tag <code>&lt;body&gt;</code>.</p>
+
+ <p>Ao utilizar CSS, você normalmente evita utilizar esses recursos da linguagem de marcação para que todas as informações de estilo de seu documento estejam em um só lugar.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Criando_uma_folha_de_estilo" name="A.C3.A7.C3.A3o:_Criando_uma_folha_de_estilo">Ação: Criando uma folha de estilo</h2>
+
+<p>Crie outro arquivo de texto no mesmo diretório do anterior. Este arquivo será sua folha de estilo. Nomeie-o como: <code>style1.css</code></p>
+
+<p>Em seu arquivo CSS, copie e cole esta única linha, então salve o arquivo:</p>
+
+<div style="width: 40em;">
+<pre class="eval">strong {color: red;}
+</pre>
+</div>
+
+<h4 id="Ligando_seu_documento_.C3.A0_sua_folha_de_estilo" name="Ligando_seu_documento_.C3.A0_sua_folha_de_estilo">Ligando seu documento à sua folha de estilo</h4>
+
+<p>Para ligar seu documento com sua folha de estilo, edite seu aquivo HTML. Adicione a linha mostrada aqui em negrito:</p>
+
+<div style="width: 40em; color: gray;">
+<pre class="eval">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
+&lt;HTML&gt;
+ &lt;HEAD&gt;
+ &lt;TITLE&gt;Documento de amostra&lt;/TITLE&gt;
+ <strong style="color: black;">&lt;LINK rel="stylesheet" type="text/css" href="style1.css"&gt;</strong>
+ &lt;/HEAD&gt;
+ &lt;BODY&gt;
+ &lt;P&gt;
+ &lt;STRONG&gt;C&lt;/STRONG&gt;ascading
+ &lt;STRONG&gt;S&lt;/STRONG&gt;tyle
+ &lt;STRONG&gt;S&lt;/STRONG&gt;heets
+ &lt;/P&gt;
+ &lt;/BODY&gt;
+&lt;/HTML&gt;
+</pre>
+</div>
+
+<p>Salve o arquivo e atualize a tela do seu navegador. A folha de estilo fez as letras iniciais aparecerem em vermelha, como isto:</p>
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+ <tr>
+ <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
+ </tr>
+ </tbody>
+</table>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;">
+ <caption>Desafio</caption>
+ <tbody>
+ <tr>
+ <td>Além do vermelho, CSS permite algumas outras cores com nomes.
+ <p>Sem olhar um referência, ache mais cinco nomes de cores que trabalham em sua folha de estilo.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="O_que_vem_depois.3F" name="O_que_vem_depois.3F">O que vem depois?</h3>
+
+<p>Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de <a href="/Talk:pt/CSS/Como_come%C3%A7ar/Porque_usar_CSS" title="Talk:pt/CSS/Como_começar/Porque_usar_CSS">Discussão</a>.</p>
+
+<p>Agora você tem um documento de amostra ligado a uma folha de estilo separada, você está pronto para ler mais sobre como seu navegador combina-os quando exibe o documento na tela: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Como_o_CSS_trabalha" title="pt/CSS/Como_começar/Como_o_CSS_trabalha">Como o CSS trabalha</a></strong>.</p>
+
+<p>{{ PreviousNext("CSS:Como começar:O que é CSS", "CSS:Como começar:Como o CSS trabalha") }}</p>