1 files changed, 157 insertions, 0 deletions
diff --git a/files/pt-pt/web/css/como_começar/estilos_de_texto/index.html b/files/pt-pt/web/css/como_começar/estilos_de_texto/index.html
new file mode 100644
index 0000000000..2e32166761
--- /dev/null
+++ b/files/pt-pt/web/css/como_começar/estilos_de_texto/index.html
@@ -0,0 +1,157 @@
+---
+title: Estilos de texto
+slug: Web/CSS/Como_começar/Estilos_de_texto
+tags:
+  - 'CSS:Como_começar'
+translation_of: Learn/CSS/Styling_text/Fundamentals
+---
+<p>{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}</p>
+
+<p>Esta página dá mais exemplos de estilos de texto.</p>
+
+<p>Você modifica sua folha de estilo de amostra para usar diferentes fontes.</p>
+
+<h2 id="Informa.C3.A7.C3.A3o:_Estilos_de_texto" name="Informa.C3.A7.C3.A3o:_Estilos_de_texto">Informação: Estilos de texto</h2>
+
+<p>CSS tem várias propriedades para estilos de texto.</p>
+
+<p>Há uma conveniente propriedade de abreviação de caracteres/palavras que facilitam a escrita, <code>font</code>, que você pode usar para especificar várias coisas de uma vez — por exemplo:</p>
+
+<ul>
+ <li>Negrito, itálico e letras minúsculas</li>
+ <li>O tamanho</li>
+ <li>A altura da linha</li>
+ <li>O tipo da fonte</li>
+</ul>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;">
+ <caption>Exemplo</caption>
+ <tbody>
+  <tr>
+   <td>
+    <div style="width: 40em;">
+    <pre class="eval">
+p {font: italic 75%/125% "Comic Sans MS", cursive;}
+</pre>
+    </div>
+
+    <p>Esta regra coloca várias propriedades da fonte, fazendo todos os parágrafos em itálico.</p>
+
+    <p>O tamanho da fonte é três quartos (75%) do tamanho em cada elemento do paragrafo principal e a altura da linha é 125% (um pouco mais espaçada que o normal).</p>
+
+    <p>O tipo da fonte é Comic Sans MS, mas se a fonte não estiver disponível então o navegador usará sua fonte cursiva padrão (escrita a mão).</p>
+
+    <p>A regra tem o efeito colateral de desativar o negrito e as letras minúsculas (colocando-os no estilo <code>normal</code>)</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Tipos_de_fonte" name="Tipos_de_fonte">Tipos de fonte</h3>
+
+<p>Você não pode predizer quais fontes os leitores do seu documento terão. Então quando você especifica tipos de fonte é uma boa idéia colocar uma lista de alternativas em ordem de preferência.</p>
+
+<p>Acabe a lista com um dos tipos de fontes internas padrão: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> ou <code>monospace</code>. (Algumas destas podem ser configuradas nas Opções do seu navegador.)</p>
+
+<p>Se o tipo não for suportado por algumas características no documento, então o navegador pode substituí-lo por um tipo diferente. Por exemplo, o documento pode conter caracteres especiais que a fonte não suporte. Se o navegador puder encontrar outra fonte que tenha os caracteres, então ele usará a outra fonte.</p>
+
+<p>Para especificar um tipo de fonte por conta própria, use a propriedade <code>font-family</code>.</p>
+
+<h3 id="Tamanho_da_fonte" name="Tamanho_da_fonte">Tamanho da fonte</h3>
+
+<p>Leitores que usam os navegadores Mozilla podem configurar o tamanho padrão das fontes em Opções, e mudar o tamanho do texto quando lêem uma página, isso a torna boa para você usá-la com tamanho relativos onde você puder.</p>
+
+<p>Você pode usar alguns valores internos para o tamanho das fontes, como: <code>small</code>, <code>medium</code> e <code>large</code>. Você pode também usar valores relativos para o tamanho das fontes do elemento primário, como: <code>smaller</code>, <code>larger</code>, <code>150%</code> ou <code>1.5em</code>.</p>
+
+<p>Se necessário você pode especificar um tamanho atual, como: <code>12px</code> (12 pixels) para um instrumento de exibição ou <code>12pt</code> (12 pontos) para uma impressora. Este tamanho é nominalmente a largura de uma letra m, mas fontes variam na maneira do tamanho, você vê relatos do tamanho que você especifica.</p>
+
+<p>Para especificar um tamanho de fonte por conta própria, use a propriedade <code>font-size</code>.</p>
+
+<h3 id="Altura_da_linha" name="Altura_da_linha">Altura da linha</h3>
+
+<p>A altura da linha especifica o espaçamento entre linhas. Se seu documento tem longos parágrafos com muitas linhas, um espaçamento mais largo que o normal faz com que a leitura seja mais fácil, especialmente se o tamanho da fonte for pequeno.</p>
+
+<p>Para especificar a altura da linha por conta própria, use a propriedade <code>line-height</code>.</p>
+
+<h3 id="Decora.C3.A7.C3.A3o" name="Decora.C3.A7.C3.A3o">Decoração</h3>
+
+<p>A propriedade separada <code>text-decoration</code> pode especificar outros estilos, como <code>underline</code> ou <code>line-through</code>. Você pode configurar isto para <code>none</code> removendo explicitamente qualquer decoração.</p>
+
+<h3 id="Outras_propriedades" name="Outras_propriedades">Outras propriedades</h3>
+
+<p>Para especificar itálico por conta própria, use <code>font-style: italic;</code><br>
+ Para especificar negrito por conta própria, use <code>font-weight: bold;</code><br>
+ Para especificar letras minúsculas por conta própria, use <code>font-variant: small-caps;</code></p>
+
+<p>Para tornar qualquer destes valores individualmente desativado, você pode especificar o valor <code>normal</code> ou <code>inherit</code>.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;">
+ <caption>Mais detalhes</caption>
+ <tbody>
+  <tr>
+   <td>Você pode especificar os estilos do texto em uma variedade de outras maneiras.
+    <p>Por exemplo, algumas propriedades mencionadas aqui têm outros valores que podem ser usados.</p>
+
+    <p>Em uma folha de estilo complexa, evite usar a propriedade de abreviação de caracteres/palavras que facilitam a escrita <code>font</code>, por causa de seus efeitos colaterais (o re-escolher de outras propriedades individuais).</p>
+
+    <p>Para maiores detalhes sobre as propriedades relacionadas às fontes, veja <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> na especificação do CSS. Para maiores detalhes sobre decoração de textos, veja <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="A.C3.A7.C3.A3o:_Especificando_fontes" name="A.C3.A7.C3.A3o:_Especificando_fontes">Ação: Especificando fontes</h2>
+
+<p>Para um documento de amostra, você pode escolher a fonte do elemento <small>BODY</small> e o resto do documento herda as configurações.</p>
+
+<p>Edite seu arquivo CSS. Adicione esta regra para mudar a fonte completamente. O topo do arquivo CSS é um local lógico para isto, mas isto terá o mesmo efeito em qualquer lugar que for posicionado:</p>
+
+<div style="width: 40em;">
+<pre class="eval">body {font: 16px "Comic Sans MS", cursive;}
+</pre>
+</div>
+
+<p>Adicione um comentário à regra, e deixe um espaço em branco para fazer sua disposição preferido.</p>
+
+<p>Atualize seu navegador para ver o efeito. Se o seu sistema tem Comic Sans MS, ou outra fonte cursiva que não suporta itálico, então seu navegador escolhe um tipo diferente de fonte para o texto em itálico na primeira linha:</p>
+
+<table style="border: 2px outset #36b; padding: 1em;">
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; 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="font: 16px 'Comic Sans MS', cursive; 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>Da barra de menu do seu navegador, escolha Exibir – Tamanho do Texto – Aumentar. Mesmo que o estilo especificado seja 16 pixels, um usuário lendo o documento pode mudar o tamanho.</p>
+
+<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;">
+ <caption>Desafio</caption>
+ <tbody>
+  <tr>
+   <td>Sem mudar mais nada, faça todas as seis letras iniciais duas vezes o tamanho na fonte serifada padrão do navegador:
+    <table>
+     <tbody>
+      <tr>
+       <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
+      </tr>
+      <tr>
+       <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
+      </tr>
+     </tbody>
+    </table>
+   </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/Estilos_de_texto" title="Talk:pt/CSS/Como_começar/Estilos_de_texto">Discussão</a>.</p>
+
+<p>Seu documento de amostra está pronto para usar várias cores nomeadas. A próxima página lista os nomes das cores padrão e explica como você pode especificar outras: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Cor" title="pt/CSS/Como_começar/Cor">Cor</a></strong></p>
+
+<p>{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}</p>