diff options
Diffstat (limited to 'files/pt-pt/learn/css/styling_text')
| -rw-r--r-- | files/pt-pt/learn/css/styling_text/fundamentals/index.html | 158 | ||||
| -rw-r--r-- | files/pt-pt/learn/css/styling_text/index.html | 136 | ||||
| -rw-r--r-- | files/pt-pt/learn/css/styling_text/styling_lists/index.html | 362 |
3 files changed, 656 insertions, 0 deletions
diff --git a/files/pt-pt/learn/css/styling_text/fundamentals/index.html b/files/pt-pt/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..373688d00f --- /dev/null +++ b/files/pt-pt/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,158 @@ +--- +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 +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +<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> diff --git a/files/pt-pt/learn/css/styling_text/index.html b/files/pt-pt/learn/css/styling_text/index.html new file mode 100644 index 0000000000..5d00bc90c5 --- /dev/null +++ b/files/pt-pt/learn/css/styling_text/index.html @@ -0,0 +1,136 @@ +--- +title: Estilizar texto +slug: Learn/CSS/Estilo_de_texto +tags: + - CSS + - Hiperligações + - Principiante + - Texto + - Tipos de Letra + - letra + - lina + - listas + - modulo + - sombra + - tipo de letra + - tipos de letra da Web +translation_of: Learn/CSS/Styling_text +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Com os conceitos básicos da linguagem CSS cobertos, o próximo tópico de CSS para se concentrar será o estilo de texto - uma das coisas mais comuns que irá fazer com CSS. Aqui, nós vamos ver os fundamentos do estilo de texto, incluindo a configuração do tipo de letra, negrito, itálico, espaçamento de linha e letra, sombras e outros recursos de texto. Nós completamos o módulo ao analisar a aplicação de tipos de letra personalizadas para a sua página, e listas de estilo e hiperligações.</p> + +<h2 id="Pré-requisitos">Pré-requisitos</h2> + +<p>Before starting this module, you should already have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, and be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guias">Guias</h2> + +<p>This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt> + <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></dt> + <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></dt> + <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></dt> + <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd> +</dl> + +<h2 id="Avaliações">Avaliações</h2> + +<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt> + <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd> +</dl> + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> + +<div id="SL_shadow_translation_result2" style="display: none;"> </div> + +<div id="SL_shadow_translator" style="display: none;"> +<div id="SL_planshet"> +<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_Bproviders"> +<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> + +<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> + +<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> +</div> + +<div id="SL_alert_bbl" style="display: none;"> +<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_alert_cont"> </div> +</div> + +<div id="SL_TB"> +<table id="SL_tables"> + <tbody> + <tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"> </div> + + <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> + </td> + <td class="SL_td"> + <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> + </td> + </tr> + </tbody> +</table> +</div> +</div> + +<div id="SL_shadow_translation_result" style=""> </div> + +<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_player2"> </div> + +<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> +<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<table id="SL_tbl_opt" style="width: 100%;"> + <tbody> + <tr> + <td><input></td> + <td> + <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> diff --git a/files/pt-pt/learn/css/styling_text/styling_lists/index.html b/files/pt-pt/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..cff2108b51 --- /dev/null +++ b/files/pt-pt/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,362 @@ +--- +title: Listas +slug: Web/CSS/Como_começar/Listas +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +<p>{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}</p> + +<p>Esta página descreve como você pode usar as CSS para especificar a aparência das listas.</p> + +<p>Você cria um novo documento de amostra contendo listas, e uma nova folha de estilo que estiliza as listas.</p> + +<h2 id="Informa.C3.A7.C3.A3o:_Listas" name="Informa.C3.A7.C3.A3o:_Listas">Informação: Listas</h2> + +<p>Se você resolveu o desafio da última página (<strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong>), então você viu como você pode adicionar conteúdo antes de qualquer elemento para mostrar isto como o item de uma lista.</p> + +<p>CSS proporciona propriedades especiais que foram designadas para listas. Geralmente é mais conveniente usar estas propriedades sempre que você puder.</p> + +<p>Para especificar o estilo para uma lista, use a propriedade <code>list-style</code> para especificar o tipo de marcador.</p> + +<p>O seletor nas regras do seu CSS pode selecionar qualquer um dos elementos na sua lista de itens (por exemplo, <code>LI</code>), ou isto pode selecionar o elemento primário da lista (por exemplo, <code>UL</code>). Então os elementos da lista herdam o estilo.</p> + +<h3 id="Listas_n.C3.A3o_ordenadas" name="Listas_n.C3.A3o_ordenadas">Listas não ordenadas</h3> + +<p>Em uma lista <em>não ordenada</em>, cada item da lista é marcado da mesma maneira.</p> + +<p>CSS tem três tipos de marcador. Aqui está como seu navegador os mostra:</p> + +<ul style="padding-left: 2em;"> + <li style=""><code>disc</code></li> + <li style=""><code>circle</code></li> + <li style=""><code>square</code></li> +</ul> + +<p>Alternativamente, você pode especificar a URL de uma imagem.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Estas regras especificam diferentes marcadores para diferentes classes de itens da lista: + <div style="width: 30em;"> + <pre class="eval"> +li.open {list-style: circle;} +li.closed {list-style: disc;} +</pre> + </div> + + <p>Quando estas classes são usadas em uma lista, elas distinguem entre os itens aberto (open) e fechado (closed):</p> + + <div style="width: 30em;"> + <pre class="eval"> +<UL> + <LI class="open">Lorem ipsum</LI> + <LI class="closed">Dolor sit</LI> + <LI class="closed">Amet consectetuer</LI> + <LI class="open">Magna aliquam</LI> + <LI class="closed">Autem veleum</LI> +</UL> +</pre> + </div> + + <p>O resultado será parecido com:</p> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul style="padding-right: 6em;"> + <li style="">Lorem ipsum</li> + <li style="">Dolor sit</li> + <li style="">Amet consectetuer</li> + <li style="">Magna aliquam</li> + <li style="">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h3 id="Listas_ordenadas" name="Listas_ordenadas">Listas ordenadas</h3> + +<p>Em uma lista <em>ordenada</em>, cada item da lista é marcado diferentemente para mostrar a posição em seqüência.</p> + +<p>Use a propriedade <code>list-style</code> para especificar o tipo de marcador:</p> + +<ul style="padding-left: 2em;"> + <li style=""><code>decimal</code></li> + <li style=""><code>lower-roman</code></li> + <li style=""><code>upper-roman</code></li> + <li style=""><code>lower-latin</code></li> + <li style=""><code>upper-latin</code></li> +</ul> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Esta regra especifica os elementos <small>OL</small> com a classe <code>info</code>, os itens são identificados com letras maiúsculas. + <div style="width: 30em;"> + <pre class="eval"> +ol.info {list-style: upper-latin;} +</pre> + </div> + + <p>Os elementos <small>LI</small> na lista herdam este estilo:</p> + + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul> + <li style="padding-right: 6em;">Lorem ipsum</li> + <li style="padding-right: 6em;">Dolor sit</li> + <li style="padding-right: 6em;">Amet consectetuer</li> + <li style="padding-right: 6em;">Magna aliquam</li> + <li style="padding-right: 6em;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>A propriedade <code>list-style</code> é uma propriedade "abreviada". Em folhas de estilo complexas você pode preferir usar propriedades separadas para configurar valores separados. Para detalhes sobre estas propriedades separadas, e mais detalhes sobre como as CSS especificam listas, veja <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#q10">Lists</a> na CSS Specification. + <p>Se você está usando a linguagem de marcação como o HTML que proporciona tags convecionais para listas não ordenadas (<small>UL</small>) e ordenadas (<small>OL</small>), então é bom praticar usando tags da maneira que foi explicado. Contudo, você pode usar as CSS para fazer <small>UL</small> mostrar ordenado e <small>OL</small> para mostrar não ordenado se você precisar.</p> + + <p>Os navegadores diferem no modo como implementam os estilos das listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Contadores" name="Contadores">Contadores</h3> + +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> +<p><strong>Note: </strong> Alguns navegadores não suportam contadores.</p> +</div> + +<p>Você pode usar contadores para numerar quaisquer elementos, não somente itens listados. Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.</p> + +<p>Para especificar uma numeração, você precisa de um <em>contador</em> com um nome que você especifica.</p> + +<p>Em alguns elementos antes da contagem começar, re-inicie o contador com a propriedade <code>counter-reset</code> e o nome do seu contador. O principal dos elementos que você estiver contando é um bom lugar para isto, mas você pode usar qualquer elemento que esteja antes da lista de itens.</p> + +<p>Em cada elemento que o contador incrementar, use a propriedade <code>counter-increment</code> e o nome do seu contador.</p> + +<p>Para mostrar seu contador, adicione <code>:before</code> ou <code>:after</code> ao seletor e use a propriedade <code>content</code> (como fez na página anterior, <strong><a href="/pt/CSS/Como_come%C3%A7ar/Conte%C3%BAdo" title="pt/CSS/Como_começar/Conteúdo">Conteúdo</a></strong>).</p> + +<p>No valor da propriedade <code>content</code>, especifique <code>counter()</code> com o nome do seu contador. Opcionalmente especifique um tipo. Os tipos são como na seção passada em <strong>Listas ordenadas</strong>.</p> + +<p>Normalmente o elemento que mostra o contador também incrementa isto.</p> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption>Exemplo</caption> + <tbody> + <tr> + <td>Esta regra inicializa um contador para cada elemento <small>H3</small> com a classe <code>numbered</code>: + <div style="width: 30em;"> + <pre class="eval"> +h3.numbered {counter-reset: mynum;} +</pre> + </div> + + <p>Esta regra mostra e incrementa o contador para cada elemento <small>P</small> com a classe <code>numbered</code>:</p> + + <div style="width: 30em;"> + <pre class="eval"> +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> + </div> + + <p>O resultado se parece com isto:</p> + + <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> + <tbody> + <tr> + <td><strong>Cabeçalho</strong> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption>Mais detalhes</caption> + <tbody> + <tr> + <td>Você não pode usar contadores a menos que você saiba que todos os que lêem o seu documento têm um navegador que os suporta. + <p>Se você puder usar contadores, eles tem a vantagem de que você pode estilizar os contadores separadamente da lista de itens. No exemplo anterior, os contadores estão em negrito mas a os itens da lista não.</p> + + <p>Você pode também usar contadores em meios mais complexos — por exemplo, para numerar seções, cabeçalhos, sub-cabeçalhos e parágrafos em documentos formais. Para detalhes, veja <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> em CSS Specification.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="A.C3.A7.C3.A3o:_Listas_denominadas" name="A.C3.A7.C3.A3o:_Listas_denominadas">Ação: Listas denominadas</h2> + +<p>Crie um novo documento HTML, <code>doc2.html</code>. Copie e cole o conteúdo daqui, tendo certeza de que você rola o mouse para pegar tudo isto:</p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Documento de amostra 2</TITLE> +<LINK rel="stylesheet" type="text/css" href="style2.css"> +</HEAD> +<BODY> + +<H3 id="oceans">Os oceanos</H3> +<UL> +<LI>Ártico</LI> +<LI>Atlântico</LI> +<LI>Pacífico</LI> +<LI>Índico</LI> +<LI>Antártico</LI> +</UL> + +<H3 class="numbered">Numbered paragraphs</H3> +<P class="numbered">Lorem ipsum</P> +<P class="numbered">Dolor sit</P> +<P class="numbered">Amet consectetuer</P> +<P class="numbered">Magna aliquam</P> +<P class="numbered">Autem veleum</P> + +</BODY> +</HTML> +</pre> +</div> + +<p>Faça uma nova folha de estilo, <code>style2.css</code>. Copie e cole o conteúdo daqui:</p> + +<div style="width: 48em;"> +<pre class="eval">/* parágrafos numerados */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> +</div> + +<p>Se a disposição e o comentário não estiver ao seu gosto, mude-os.</p> + +<p>Abra o documento no seu navegador. Se o seu navegador suporta contadores, você verá algo semelhante ao exemplo abaixo. Se o seu navegador não suporta contadores, então você não verá os números (e provavelmente nem sequer os dois pontos (:)):</p> + +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Os oceanos</p> + + <ul style=""> + <li>Ártico</li> + <li>Atlântico</li> + <li>Pacífico</li> + <li>Índico</li> + <li>Antártico</li> + </ul> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Parágrafos numerados</p> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> + +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 60%;"> + <caption>Desafios</caption> + <tbody> + <tr> + <td>Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais Romanos de i até v: + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Os oceanos</p> + + <ul style=""> + <li>Ártico</li> + <li>Atlântico</li> + <li>Pacífico</li> + <li>Índico</li> + <li>Antártico</li> + </ul> + </td> + </tr> + </tbody> + </table> + + <p><br> + Se o seu navegador suporta contadores, mude sua folha de estilo para identificar o cabeçalho com letras maiúsculas em parênteses como isto:</p> + + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) Os oceanos</p> + + <p><strong>. . .</strong></p> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Parágrafos numerados</p> + + <p><strong>. . .</strong></p> + </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/Listas" title="Talk:pt/CSS/Como_começar/Listas">Discussão</a>.</p> + +<p>Quando seu navegador exibe seu documento de amostra, cria espaços ao redor dos elementos quando eles são exibidos na página.</p> + +<p>A próxima página descreve como você pode usar as CSS para trabalhar com formas subjacentes de elementos: <strong><a href="/pt/CSS/Como_come%C3%A7ar/Caixas" title="pt/CSS/Como_começar/Caixas">Caixas</a></strong></p> + +<p>{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}</p> |