aboutsummaryrefslogtreecommitdiff
path: root/files/pt-pt/web/css/como_começar/css_legível/index.html
diff options
context:
space:
mode:
authorFlorian Dieminger <me@fiji-flo.de>2021-02-11 18:27:33 +0100
committerGitHub <noreply@github.com>2021-02-11 18:27:33 +0100
commit609ee7efcfe881caa08237948e1ed3252e60afa1 (patch)
treee8c22089de06c8ef1a6d75a6e0d1e893403cd07a /files/pt-pt/web/css/como_começar/css_legível/index.html
parentad7f998115dd568832332484debf1f1b16b0c905 (diff)
parent8519a85da1acd5b7863268b6cf6f9e4fd14bcf31 (diff)
downloadtranslated-content-609ee7efcfe881caa08237948e1ed3252e60afa1.tar.gz
translated-content-609ee7efcfe881caa08237948e1ed3252e60afa1.tar.bz2
translated-content-609ee7efcfe881caa08237948e1ed3252e60afa1.zip
Merge pull request #43 from fiji-flo/unslugging-pt-pt
Unslugging pt pt
Diffstat (limited to 'files/pt-pt/web/css/como_começar/css_legível/index.html')
-rw-r--r--files/pt-pt/web/css/como_começar/css_legível/index.html188
1 files changed, 0 insertions, 188 deletions
diff --git a/files/pt-pt/web/css/como_começar/css_legível/index.html b/files/pt-pt/web/css/como_começar/css_legível/index.html
deleted file mode 100644
index 08ede46aa3..0000000000
--- a/files/pt-pt/web/css/como_começar/css_legível/index.html
+++ /dev/null
@@ -1,188 +0,0 @@
----
-title: CSS legível
-slug: Web/CSS/Como_começar/CSS_legível
-tags:
- - 'CSS:Como_começar'
-translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
-translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
----
-<p>{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}</p>
-
-<p>Esta página discute o estilo e a gramática da linguagem CSS.</p>
-
-<p>Você muda a maneira em que seu arquivo de amostra CSS é exibido, para torná-lo mais legível.</p>
-
-<h2 id="Informa.C3.A7.C3.A3o:_CSS_leg.C3.ADvel" name="Informa.C3.A7.C3.A3o:_CSS_leg.C3.ADvel">Informação: CSS legível</h2>
-
-<p>Você pode adicionar espaço em branco e comentários na sua folha de estilo para fazê-la mais legível. Você pode também juntar seletores de grupo, quando as mesmas regras de estilo se aplicam aos elementos selecionados em meios diferentes.</p>
-
-<h3 id="Espa.C3.A7o_em_branco" name="Espa.C3.A7o_em_branco">Espaço em branco</h3>
-
-<p>Espaços em branco significam espaços reais, tabs e quebras de linha. Você pode adicionar espaços em branco para tornar suas folhas de estilo mais legíveis.</p>
-
-<p>Seu arquivo de amostra de CSS atualmente tem uma regra por linha, e quase o mínimo de espaço em branco. Em uma uma folha de estilo complexa esta disposição pode dificultar a leitura, dificultando também a manutenção da sua folha de estilo.</p>
-
-<p>A disposição que você escolhe é usualmente um preferência pessoal, mas se suas folhas de estilo são parte de projetos compartilhados, estes projetos podem ter suas próprias convenções.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplos</caption>
- <tbody>
- <tr>
- <td>Algumas pessoas gostam de uma diposição compacta que temos usado, somente dividindo a linha quando ela se torna muito longa:
- <pre>
-.carrot {color: orange; text-decoration: underline; font-style: italic;}
-</pre>
-
- <p>Algumas pessoas preferem uma propriedade-valor por linha:</p>
-
- <div style="width: 45em;">
- <pre class="eval">
-.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-</pre>
- </div>
-
- <p>Algumas pessoas usam tabs – dois espaços, quatro espaços, ou um tab são comuns:</p>
-
- <div style="width: 45em;">
- <pre class="eval">
-.carrot {
- color: orange;
- text-decoration: underline;
- font-style: italic;
-}
-</pre>
- </div>
-
- <p>Algumas pessoas gostam de enfileirar a linha verticalmente (mas é difícil de manter uma disposição assim):</p>
-
- <div style="width: 45em;">
- <pre class="eval">
-.carrot
- {
- color  : orange;
- text-decoration : underline;
- font-style  : italic;
- }
-</pre>
- </div>
-
- <p>Algumas pessoas usam tabs para a disposição. Algumas pessoas usam somente espaços.</p>
- </td>
- </tr>
- </tbody>
-</table>
-
-<h3 id="Coment.C3.A1rios" name="Coment.C3.A1rios">Comentários</h3>
-
-<p>Comentários em CSS começam com <code>/*</code> e terminam com <code>*/</code>.</p>
-
-<p>Você pode usar comentários para fazer comentários reais na sua folha de estilo, e também para <em>descomentar</em> partes que estiverem temporariamente para propósito de testes.</p>
-
-<p>Para comentar parte da folha de estilo, coloque a parte em um comentário então o navegador ignorará isso. Tome cuidado onde você começa e termina o seu comentário. O resto da sua folha de estilo ainda deve ter a sintaxe correta.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
- <tr>
- <td>
- <div style="width: 45em;">
- <pre class="eval">
-/* Estilo para a letra C inicial no primeiro parágrafo */
-.carrot {
- color: orange;
- text-decoration: underline;
- font-style: italic;
- }
-</pre>
- </div>
- </td>
- </tr>
- </tbody>
-</table>
-
-<h3 id="Seletores_agrupados" name="Seletores_agrupados">Seletores agrupados</h3>
-
-<p>Quando muitos elementos tiverem o mesmo estilo, você pode especificar um grupo de seletores, separando-os com comentários. A declaração se aplica a todos os elementos selecionados.</p>
-
-<p>Em outra parte da sua folha de estilo você pode especificar os mesmos seletores, de novo individualmente, para aplicar estilo individual às suas regras.</p>
-
-<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
- <caption>Exemplo</caption>
- <tbody>
- <tr>
- <td>Esta regra faz os elementos <small>H1</small>, <small>H2</small> and <small>H3</small> da mesma cor.
- <p>Isto é conveniente para especificar a cor em somente um lugar, no caso em que precisa ser alterado.</p>
-
- <div style="width: 30em;">
- <pre class="eval">
-/* cores para os cabeçalhos */
-h1, h2, h3 {color: navy;}
-</pre>
- </div>
- </td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="A.C3.A7.C3.A3o:_Adicionando_coment.C3.A1rios_e_melhorando_o_arranjo" name="A.C3.A7.C3.A3o:_Adicionando_coment.C3.A1rios_e_melhorando_o_arranjo">Ação: Adicionando comentários e melhorando o arranjo</h2>
-
-<p>Edite seu arquivo CSS, e assegure-se que ele tem todas as regras nele (em qualquer ordem):</p>
-
-<div style="width: 30em;">
-<pre class="eval">strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-</pre>
-</div>
-
-<p>Faça isto mais legível rearranjando isto em um meio que possa ser achado lógicamente, adicionando espaços em branco e comentários da maneira que você achar melhor.</p>
-
-<p>Salve o arquivo e atualize a tela do seu navegador, assegure-se que as mudanças que você fez não afetaram o modo como a folha de estilo trabalha:</p>
-
-<table style="border: 2px outset #36b; padding: 1em;">
- <tbody>
- <tr>
- <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
- </tr>
- <tr>
- <td style="color: blue;"><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: #ffe;">
- <caption>Desafio</caption>
- <tbody>
- <tr>
- <td>Comente parte de sua folha de estilo, sem mudar qualquer coisa, para fazer a primeira letra de seu documento vermelha:
- <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
- <tbody>
- <tr>
- <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
- </tr>
- <tr>
- <td style="color: blue;"><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>
-
- <p>(Existe mais de uma maneira de fazer isto.)</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/CSS_leg%C3%ADvel" title="Talk:pt/CSS/Como_começar/CSS_legível">Discussão</a>.</p>
-
-<p>Seu documento de amostra usou o texto em itálico e o texto com sublinhado. A próxima página descreve mais caminhos para especificar a aparência do texto no seu documento: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Estilos_de_texto" title="pt/CSS/Como_começar/Estilos_de_texto">Estilos de texto</a></strong></p>
-
-<p>{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}</p>