diff options
Diffstat (limited to 'files/pt-br/web/css/getting_started')
8 files changed, 1404 insertions, 0 deletions
diff --git a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html b/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html new file mode 100644 index 0000000000..90723ea85c --- /dev/null +++ b/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html @@ -0,0 +1,127 @@ +--- +title: Cascata e herança +slug: Web/CSS/Getting_Started/Cascading_and_inheritance +tags: + - Guía + - Iniciante +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}Essa é a quarta seção do <span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">Primeiros Passos (Tutorial CSS)</a>; Ela descreve como folhas de estilos interagem em cascata e como elementos herdam os estilos dos seus pais. Você pode usar herança para alterar o estilo de varios elementos da sua página de uma unica vez.</span></p> + +<h2 class="clearLeft" id="Informação_Cascata_e_Herança">Informação: Cascata e Herança</h2> + +<p>O estilo final de um elemento pode ser setado em varios locais diferentes, que interagem entre si de uma forma complexa. Está forma de interação torna o CSS poderoso, mas pode torna-lo confuso e dificil de depurar.</p> + +<p>Existem três fontes principais de estilos que constituem a cascata. São elas:</p> + +<ul> + <li>Os estilos padrões do navegador;</li> + <li>Os estilos especificados pelos usarios que estão lendo o documento;</li> + <li>Os estilos criados pelo desenvolvedor. Que podem ser incluidos em três locais: + <ul> + <li>Em um arquivo externo: Este tutorial utiliza principalmente este método de definição de estilos</li> + <li>No inico do documento: Este método é usado apenes para estilos que se aplicam a uma única página.</li> + <li>Em um elemento específico: Este método é pouco recomendado, mas pode ser utilizado para testes.</li> + </ul> + </li> +</ul> + +<p>O estilo do usuario modificam o estilo padão do navegador e o estilo do desenvolvedor da página modifica ambos os outros estilos. Neste tutorial você estará desenvolvendo as folhas de estilos.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemplo</div> + +<p>Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.</p> + +<p>Parte pode ser definida em configurações personanizadas no navegador. No Firefox, esta configurações podem ser personalizadas na janela de preferências, ou você pode especificar os estilos no arquivo <code>userContent.css</code> do seu navegador.</p> + +<p>Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.</p> +</div> + +<p>Quando você abre o documento de exemplo em seu navegador, alguns elementos {{ HTMLElement("strong") }} vem em negrito. Isto vem das configurações padrão do seu navegador.</p> + +<p>Os {{ HTMLElement("strong") }} são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).</p> + +<p>Os {{HTMLElement ("strong")}} elementos também herdam muito do {{HTMLElement ("p")}} estilo do elemento, porque eles são seus filhos. Da mesma forma, o {{HTMLElement ("p")}} elemento herda grande parte da {{HTMLElement ("body")}} estilo do elemento.</p> + +<p>Para os estilos em cascata, as folhas de estilo do autor têm prioridade, depois as folhas de estilo leitor, e enfim os padrões do navegador.</p> + +<p>Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.</p> + +<p>Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.</p> + +<p>Mais detalhes</p> + +<div class="tuto_details"> +<p>CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. </p> + +<p>Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.</p> + +<p>Se você quiser saber todos os detalhes da cascata e herança, consulte <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> na especificação do CSS</p> +</div> + +<h2 id="Ação_Usando_herança">Ação: Usando herança</h2> + +<ol> + <li>Edite o seu arquivo CSS.</li> + <li>Adicione esta linha, copiando e colando-lo. Realmente não importa se você adicioná-lo acima ou abaixo da linha que já está lá. No entanto, adicionando-o no topo é mais lógico, porque em seu documento a {{ HTMLElement("p") }} elemento pai do {{ HTMLElement("strong") }} element: + <pre class="brush:css">p {color: blue; text-decoration: underline;} +</pre> + </li> + <li>Agora atualize seu navegador para ver o efeito no seu documento de amostra. O subjacente afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos {{ HTMLElement("strong") }} herdaram o estilo sublinhado a partir de seu elemento pai {{ HTMLElement("p") }}.<br> + + <p>Mas os elementos {{ HTMLElement("strong") }} ainda são vermelhos. A cor vermelha é o seu próprio estilo, por isso tem prioridade sobre a cor azul de seu elemento pai {{ HTMLElement("p") }}.</p> + </li> +</ol> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> +</table> + +<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;"> + <caption>Antes</caption> + <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: 2px outset #3366bb; padding: 1em;"> + <caption>Depois</caption> + <tbody> + <tr> + <td style="color: blue; text-decoration: underline;"><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> + +<div class="tuto_example"> +<div class="tuto_type">Desafio</div> +Mude o seu estilo de modo que somente as letras vermelhas sublinhadas: + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> + +<pre class="brush: css">p {color: blue; } +strong {color: red; text-decoration: underline;} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução do desafio.</a></div> + +<h2 id="Qual_o_próximo">Qual o próximo?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}} Sua folha de estilo de amostra especifica estilos para as tags, <p> e <strong>, mudando o estilo dos elementos correspondentes em todo o documento. A próxima seção descreve como especificar mais <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">seletores</a>.</p> diff --git a/files/pt-br/web/css/getting_started/como_css_funciona/index.html b/files/pt-br/web/css/getting_started/como_css_funciona/index.html new file mode 100644 index 0000000000..d8759320b8 --- /dev/null +++ b/files/pt-br/web/css/getting_started/como_css_funciona/index.html @@ -0,0 +1,125 @@ +--- +title: Como o CSS funciona +slug: Web/CSS/Getting_Started/Como_CSS_funciona +tags: + - 'CSS:PrimeirosPassos' + - Guía + - Iniciante + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }} Essa terceira seção do tutorial<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> mostra como o CSS funciona no seu navegador e a finalidade do Modelo de Objeto de Documento (DOM). Você vai aprender também como analizar seu documento de exemplo. </span></p> + +<h2 class="clearLeft" id="Informação_Como_o_CSS_funciona">Informação: Como o CSS funciona</h2> + +<p>Quando um navegador exibe um documento, ele deve combinar o conteúdo do documento com as informações de estilo. Ele processa o documento em duas etapas:</p> + +<ol> + <li>O navegador converte a linguagem de marcação e o CSS no DOM (Modelo de Objeto de Documento). O DOM representa o documento na memória do computador. Ele combina o conteúdo do documento com seu estilo.</li> + <li>O navegador exibe o conteúdo do DOM.</li> +</ol> + +<p>Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando <em>tags</em>, que são sequências que começam com '<' e terminam com '>'. A maioria dos elementos possui <em>tags </em>emparelhadas, uma tag de início e uma tag final. Para a tag inicial, coloque o elemento entre '<' e '>'. Para a tag final, coloque um '/' depois do '<' e antes do nome do elemento.</p> + +<p>Dependendo da linguagem de marcação, alguns elementos possuem apenas uma tag de início, ou uma única tag em que '/' vem após o nome do elemento. Um elemento pode também ser um recipiente e incluir outros elementos entre sua tag inicial e final. Lembre-se de sempre fechar as tags dentro do recipiente.</p> + +<p>O DOM tem uma estrutura de árvore. Cada elemento, atributo e execução de texto na linguagem de marcação se torna um nó na estrutura da árvore. Os nós são definidos pelas suas relações com outros nós do DOM. Alguns elementos são pais de nós filhos, e nós filhos possuem irmãos.</p> + +<p>Entender o DOM ajuda você no design, na depuração e manutenção do seu CSS, porque o DOM é onde o CSS e o conteúdo do documento se encontram.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemplo</div> +No seu documento de exemplo, a tag <p> e seu final </p> criam um recipiente: + +<pre class="brush:html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<h2 id="Exemplo_em_tempo_real">Exemplo em tempo real</h2> + +<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> + +<p>No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós '<em>strongs</em>' e os nós de texto. Os nós <em>'strong'</em> são eles próprios pais, com nós de texto como filhos.</p> + +<pre><span style="color: black;">P</span> +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">C</span>" +├─"<span style="color: black;">ascading</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +├─"<span style="color: black;">tyle</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +└─"<span style="color: black;">heets</span>"</pre> +</div> + +<h2 id="Ação_Analisando_um_DOM">Ação: Analisando um DOM</h2> + +<h3 id="Utilizando_Inspetor_DOM">Utilizando Inspetor DOM</h3> + +<p>Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on <a href="/en/DOM_Inspector" title="en/DOM_Inspector">Inspetor DOM</a> do Mozilla (DOMi) para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).</p> + +<ol> + <li>Use seu navegador Mozilla para abrir seu documento HTML de exemplo.</li> + <li>Na barra de menu do seu navegador, escolha <strong>Ferramentas > Inspetor DOM</strong>, ou <strong>Ferramentas > Desenvolvimento Web > Inspetor DOM</strong>. + <div class="tuto_details"> + <div class="tuto_type">Mais detalhes</div> + + <p>Se o seu navegador Mozilla não ter o DOMi, você pode <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">instalá-lo a partir do site de Add-ons </a> e reiniciar seu navegador. Depois, retorne para esse tutorial.</p> + + <p>Se você não quiser instalar o DOMi ( ou você está usuando um navegador que não seja Mozilla), você pode usar Raio-X Goggles na Web, conforme descrito na próxima seção. Ou você pode pular essa seção e ir direto para a próxima página. Ignorar essa seção não interfere no restante do tutorial.</p> + </div> + </li> + <li>No DOMi, expanda o nó do seu documento clicando em suas flechas. + <p><strong>Nota: </strong> Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.</p> + + <p>Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:</p> + + <pre>│ ▼╴<span style="color: black;">P</span> +│ │ │ ▼╴<span style="color: black;">STRONG</span> +│ │ └<span style="color: darkblue;">#text</span> +│ ├╴<span style="color: darkblue;">#text</span> +│ ►╴<span style="color: black;">STRONG</span> +│ │</pre> + + <p>Ao selecionar qualquer nó, você pode usar o painel do lado direito do DOMi para saber mais sobre o nó. Por exemplo, quando você seleciona um nó de texto, DOMi exibe o texto no painel do lado direito.</p> + + <p>Quando você seleciona um nó de elemento, DOMi analisa e fornece uma enorme quantidade de informações em seu painel do lado direito. Informação de estilo é apenas parte da informação que ele fornece.</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Desafio</div> + +<p>No DOMi, clique em um nó <em><strong><small>STRONG</small></strong></em>.</p> + +<p>Use o painel do lado direito do DOMi para descobrir onde a cor do nó está definida como vermelho, e onde sua aparência é mais arrojada do que um texto normal.</p> + + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução para o desafio.</a></div> + +<h3 id="Usando_Raio-X_Goggles_da_Web">Usando Raio-X Goggles da Web</h3> + +<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Raio-X Goggles da Web </a>exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.</p> + +<ol> + <li>Vá para a página inicial do <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Raio-X Goggles da Web</a>.</li> + <li>Arraste o link do <em>bookmarklet </em>na página para a barra de ferramentas do seu navegador.</li> + <li>Abra o seu documento HTML de exemplo.</li> + <li>Ative o Raio-X Goggles da Web clicando no <em>bookmarklet </em>na sua barra de ferramentas.</li> + <li>Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.</li> +</ol> + +<h2 id="O_que_vem_depois">O que vem depois?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}Se você aceitou o desafio, você viu que as informações de estilo de mais de um ligar interagem para criar o estilo final para um elemento. A <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">próxima página</a> explica mais sobre essas interações.</p> diff --git a/files/pt-br/web/css/getting_started/index.html b/files/pt-br/web/css/getting_started/index.html new file mode 100644 index 0000000000..bca1143a34 --- /dev/null +++ b/files/pt-br/web/css/getting_started/index.html @@ -0,0 +1,97 @@ +--- +title: Iniciando com o CSS +slug: Web/CSS/Getting_Started +tags: + - CSS + - Guia(2) + - Guía + - Iniciante + - Web +translation_of: Learn/CSS/First_steps +--- +<p> </p> + +<h2 id="Introdução">Introdução</h2> + +<p>Esse tutorial é uma introdução ao <em>Cascading Style Sheets</em> (CSS) e aos seus recursos básicos, com exemplos práticos que você mesmo pode tentar no seu próprio computador. Está dividido em duas partes:</p> + +<ul> + <li>A Parte I ilustra as características padrão do CSS que funcionam em todos os navegadores Mozilla e também em qualquer outro dentre os mais modernos.</li> +</ul> + +<ul> + <li>A Parte II conta com alguns exemplos de características especiais que funcionam nos navegadores Mozilla mas não necessariamente em outros ambientes.</li> +</ul> + +<p>Esse tutorial é baseado na <a href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">Especificação do CSS 2.1</a>.</p> + +<h3 id="Quem_deve_usar_esse_tutorial">Quem deve usar esse tutorial?</h3> + +<p>Esse tutorial é, principalmente, para iniciantes no CSS.</p> + +<p>Se você é um iniciante, utilize a parte I deste tutorial para entender o CSS e como usá-lo. Depois utilize a parte II para entender seu escopo nas plataformas Mozilla.</p> + +<p>Se você já conhece alguma coisa de CSS, sinta-se à vontade para pular as partes deste tutorial que já conhece, focando apenas no que interessa.</p> + +<p>Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.</p> + +<h3 id="O_que_você_precisa_saber_antes_de_começar">O que você precisa saber antes de começar?</h3> + +<p>Para seguir a maior parte deste tutorial você precisa de um editor de texto e, especificamente para a parte II, um navegador Mozilla (Firefox, Camino ou SeaMonkey). Você também vai precisar saber como utilizá-los.</p> + +<p>Se você não quiser trabalhar com arquivos, então você pode apenas ler o tutorial e observar as imagens, embora essa seja a maneira menos proveitosa de se aprender.</p> + +<p>Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, <strong>você pode ignorá-las</strong>. O software referenciado por esse tutorial inclui:</p> + +<ul> + <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li> +</ul> + +<p><strong>Nota: </strong>O CSS fornece alguns modos de se trabalhar com cores e algumas partes desse tutorial dependem de cores. Para que você possa seguir facilmente por essas partes, você vai precisar de um monitor colorido e visão colorida normal.</p> + +<h3 id="Como_usar_esse_tutorial">Como usar esse tutorial</h3> + +<p>Para usar esse tutorial, leia as páginas cuidadosamente e em sequência. Se você perder alguma página pode ser que encontre alguma dificuldade para entender as seguintes.</p> + +<p>Em cada página, use a sessão de Informação para entender como o CSS trabalha. Use a sessão de Ação para tentar usar o CSS no seu próprio computador.</p> + +<p>Para testar seu entendimento, faça o desafio do fim de cada página. <strong>Os links para as soluções podem ser encontrados no próprio desafio, dessa forma você não precisa olhá-las caso não queira.</strong></p> + +<p>Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda <em>Mais detalhes</em> (<em>More details</em>). Utilize os links para encontrar informações de referência sobre o CSS.</p> + +<h2 id="Parte_I_do_Tutorial">Parte I do Tutorial</h2> + +<p>Uma guia básico passo a passo do CSS</p> + +<ol> + <li><strong><a href="/en/CSS/Getting_Started/What_is_CSS" title="en/CSS/Getting_Started/What_is_CSS">O que é o CSS</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Why_use_CSS" title="en/CSS/Getting_Started/Why_use_CSS">Porque usar o CSS</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">Como o CSS funciona</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting_Started/Cascading_and_inheritance">Cascata e herança</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">Seletores</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting_Started/Readable_CSS">CSS legível</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting_Started/Text_styles">Estilos de texto</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Cores</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Conteúdo</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting_Started/Lists">Listas</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">Caixas</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting_Started/Tables">Tabelas</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/Media" title="en/CSS/Getting_Started/Media">Mídia</a></strong></li> +</ol> + +<h2 id="Parte_II_do_Tutorial">Parte II do Tutorial</h2> + +<p>Exemplos do uso do CSS juntamente com outras tecnologias</p> + +<ol> + <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">Gráficos SVG</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">Dados XML</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">Ligações XBL</a></strong></li> + <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Interfaces de usuário XUL</a></strong></li> +</ol> + +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p> diff --git a/files/pt-br/web/css/getting_started/javascript/index.html b/files/pt-br/web/css/getting_started/javascript/index.html new file mode 100644 index 0000000000..e4ceadbb9b --- /dev/null +++ b/files/pt-br/web/css/getting_started/javascript/index.html @@ -0,0 +1,139 @@ +--- +title: JavaScript e CSS +slug: Web/CSS/Getting_Started/JavaScript +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<p>{{ CSSTutorialTOC() }}</p> +<p>Esta é a pirmeira sessão da Parte II do <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">Tutorial de CSS</a>. A parte II consém alguns exemplos que mostram o escopo do CSS usado com outras tecnologias web e Mozilla.</p> +<p>Cada página da Parte II ilustra como o CSS interagem com outras tecnologias. Essas páginas não destinam-se a ensiná-lo como usar outras tecnologias. Para aprender sobre elas com detalhes, vá para os outros tutoriais.</p> +<p>Em vez disso, estas páginas são usadas para ilustrar os diversos usos do CSS. Para usar estas páginas, você deve ter algum conhecimento de CSS, mas você não precisa de nenhum conhecimento de outras tecnologias.</p> +<p>Sessão Anterior (da Parte I): <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Media</a><br> + Próxima sessão: <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p> +<h3 id="Information:_JavaScript" name="Information:_JavaScript">Informação: JavaScript</h3> +<p>JavaScript é um <em>programming language</em>. JavaScript é largamente utilizado para pronmover interatividade em web sites e aplicações.</p> +<p>JavaScript pode interagir com stylesheets, permitindo a você criar programas que mudam o eastilo de um documento de forma dinâmica</p> +<p>Há três formas de fazer isso:</p> +<ul> + <li>Trabalhando com lista de documentos de stylesheets—por exemplo: adicionando, removendo ou adicionando uma stylesheet.</li> + <li>Trabalhando com as regras em uma stylesheet—por exemplo: adicionando, removendo ou modificando uma regra.</li> + <li>Trabalhando com um documento individual na DOM—modificando seu estilo independentemente do stylesheetsdo documento.</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + Mais detalhes</caption> + <tbody> + <tr> + <td>Para mais informações sobre JavaScript, veja a página <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> nesta wiki.</td> + </tr> + </tbody> +</table> +<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration">Ação: Uma demonstração de JavaScript</h3> +<p>Faça um novo documento em HTML, <code>doc5.html</code>. Copie e cole o conteúdo daqui, tenha certeza de rolar para copiar todo o código:</p> +<div style="width: 48em;"> + <pre class="brush:html;"><!DOCTYPE html> +<html> + +<head> +<title>Mozilla CSS Getting Started - JavaScript demonstration</title> +<link rel="stylesheet" type="text/css" href="style5.css" /> +<script type="text/javascript" src="script5.js"></script> +</head> + +<body> +<h1>JavaScript sample</h1> + +<div id="square"></div> + +<button type="button" onclick="doDemo(this);">Click Me</button> + +</body> +</html> +</pre> +</div> +<p>Crie um novo arquivo CSS, <code>style5.css</code>. Copie e cole o conteúdo daqui:</p> +<div style="width: 48em;"> + <pre class="brush:css;">/*** JavaScript demonstration ***/ +#square { + width: 20em; + height: 20em; + border: 2px inset gray; + margin-bottom: 1em; +} + +button { + padding: .5em 2em; +} +</pre> +</div> +<p>Crie um novo arquivo de texto, <code>script5.js</code>. Coie e cole o conteúdo daqui:</p> +<div style="width: 48em;"> + <pre class="brush:js;">// JavaScript demonstration +function doDemo (button) { + var square = document.getElementById("square"); + square.style.backgroundColor = "#fa4"; + button.setAttribute("disabled", "true"); + setTimeout(clearDemo, 2000, button); +} + +function clearDemo (button) { + var square = document.getElementById("square"); + square.style.backgroundColor = "transparent"; + button.removeAttribute("disabled"); +} +</pre> +</div> +<p>Abra o documento no seu Browser e pressione o botão.</p> +<p>Esta wiki não suporta JavaScript nas páginas, então não é possível mostrar uma demonstração aqui. parece algo assim, antes e depois de você pressionar o botão:</p> +<table> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><strong>JavaScript demonstration</strong></p> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><strong>JavaScript demonstration</strong></p> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<div class="note"> + <strong>Notas importantes </strong>sobre esta demonstração: + <ul> + <li>Os links do documento HTML document linca a como usual, e também linca o script.</li> + <li>O script trabalha com elementos individuais no DOM. Ele modifica o square's style diretamente. Ele modifica o estilo dos botões indiretamente mudando um atributo.</li> + <li>Em JavaScript, <code>document.getElementById("square")</code> é similar em função ao seletor CSS <code>#square</code>.</li> + <li>Em JavaScript, <code>backgroundColor</code> corresponde à propriedade CSS<span style="line-height: 1.5em;"> </span><code style="font-size: 14px;">background-color</code><span style="line-height: 1.5em;">. JavaScript não permite hífens em nomes, então "camelCase" é usada no lugar dele.</span></li> + <li>Seu browser tem uma regra built-in CSS para<span style="line-height: 1.5em;"> </span><code style="font-size: 14px;">button{{ mediawiki.external('disabled=\"true\"') }}</code><span style="line-height: 1.5em;"> ela muda a aparência dos botões quando está disabilitado.</span></li> + </ul> +</div> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> + <caption> + Desafio</caption> + <tbody> + <tr> + <td> + <p>Mude o script e então o <span style="line-height: inherit;">square salta para a direita em 20 em quando muda as cores, e salta de volta depois.</span></p> + </td> + </tr> + </tbody> +</table> +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">Veja a solução deste desafio.</a></p> +<p><span style="font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.428em; line-height: inherit;">O que vem agora?</span></p> +<p>Se você teve dificuldade para entender esta página, ou se tem algum coment[ario sobre, por favor, contribua nesta página de <a href="/Talk:en/CSS/Getting_Started/JavaScript" title="Talk:en/CSS/Getting_Started/JavaScript">Di</a>scussão.</p> +<p>Nesta deminstração, o arquivo HTML linca o the script apesar do botão de elementos usar script. Mozilla extende CSS então consegue lincar o código JavaScript (e também conteúdo e outras <span style="line-height: inherit;">stylesheets) para selecionar elementos. A próxima página demonstra isso: </span><strong style="line-height: inherit;"><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></p> diff --git a/files/pt-br/web/css/getting_started/lists/index.html b/files/pt-br/web/css/getting_started/lists/index.html new file mode 100644 index 0000000000..481c1f58c5 --- /dev/null +++ b/files/pt-br/web/css/getting_started/lists/index.html @@ -0,0 +1,271 @@ +--- +title: Manipulando Listas +slug: Web/CSS/Getting_Started/Lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") }}</p> + +<p><font><font>Este é o 10º seção do </font></font><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="EN-US / docs / Web / Guia / CSS / Introdução"><font><font>CSS Introdução</font></font></a><font><font> tutorial; </font><font>ele descreve como você pode usar CSS para especificar o aparecimento de listas. </font><font>Você cria um novo documento de amostra contendo listas, e um novo estilo que os estilos das listas.</font></font></p> + +<h2 class="clearLeft" id="Informação_Lists"><font><font>Informação: Lists</font></font></h2> + +<p><font><font>Se você aceitou o desafio na </font></font><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/ en-US / docs / Web / Guia / CSS / Getting_Started / Conteúdo"><font><font>última </font></font></a><font><font>seção, </font><font>em seguida, você viu como você pode adicionar conteúdo antes de qualquer elemento para exibi-lo como um item da lista.</font></font></p> + +<p><font><font>CSS proporciona propriedades especiais que são projetados para listas. </font><font>Geralmente é mais conveniente usar estas propriedades sempre que puder.</font></font></p> + +<p><font><font>Para especificar o estilo para uma lista, use o {{cssxref ("list-style")}} propriedade para especificar o tipo de marcador.</font></font></p> + +<p><font><font>O seletor na sua regra de CSS pode selecionar os elementos de item de lista (por exemplo, {{HTMLElement ("li")}}), ou pode selecionar o elemento primário da lista (por exemplo, {{HTMLElement ("ul")}}) de modo a que os elementos da lista herdam o modelo.</font></font></p> + +<h3 id="Listas_não_ordenadas"><font><font>Listas não ordenadas</font></font></h3> + +<p><font><font>Em uma lista </font></font><em><font><font>desordenada</font></font></em><font><font>, cada item da lista é marcado da mesma forma.</font></font></p> + +<p><font><font>CSS tem três tipos de marcadores, e aqui está como seu navegador exibe-os:</font></font></p> + +<ul style="padding-left: 2em;"> + <li style="list-style-type: disc;"><code><font><font>disc</font></font></code></li> + <li style="list-style-type: circle;"><code><font><font>circle</font></font></code></li> + <li style="list-style-type: square;"><code><font><font>square</font></font></code></li> +</ul> + +<p style="list-style-type: square;"> none</p> + +<p><font><font>Alternativamente, você pode especificar o URL de uma imagem.</font></font></p> + +<div class="tuto_example"> +<div class="tuto_type"><font><font>Exemplo</font></font></div> + +<p><font><font>Essas regras especificam diferentes marcadores para diferentes classes de item da lista:</font></font></p> + +<pre class="brush:css"><font><font>li.open {list-style: circle;} </font></font><font><font> +li.closed {list-style: disc;}</font></font> +</pre> + +<p><font><font>Quando estas classes são usadas em uma lista, que distinguir entre os itens abertos e fechados (por exemplo, em uma lista de tarefas):</font></font></p> + +<pre class="brush: html"><font><font><ul> </font></font><font><font> + <li class="open"> Lorem ipsum </ li> </font></font><font><font> + <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></font></font> +</pre> + +<p><font><font>O resultado pode parecer:</font></font></p> + +<p><font><font>{{EmbedLiveSample ('Listas_não_ordenadas', '', '', '')}}</font></font></p> +</div> + +<h3 id="Listas_ordenadas"><font><font>Listas ordenadas</font></font></h3> + +<p><font><font>Em uma lista<em>ordenada</em></font></font><font><font> , cada item da lista é marcado diferentemente para mostrar a sua posição na sequência.</font></font></p> + +<p><font><font>Use a propriedade {{cssxref ("list-style")}} para especificar o tipo de marcador:</font></font></p> + +<ul style="padding-left: 2em;"> + <li><code>decimal</code></li> + <li><code>lower-roman</code></li> + <li><code>upper-roman</code></li> + <li><code>lower-latin</code></li> + <li><code>upper-latin</code></li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type"><font><font>Exemplo</font></font></div> + +<p><font><font>Esta regra especifica que em {{HTMLElement ("OL")}} elementos com a classe </font></font><code><font><font>informações, os itens são identificados com letras maiúsculas.</font></font></code></p> + +<pre><code><ol class="info"> + <li>Lorem ipsum</li> + <li>Dolor sit</li> + <li>Amet consectetuer</li> + <li>Magna aliquam</li> + <li>Autem veleum</li> +</ol></code></pre> + +<pre class="brush:css"><font><font>ol.info {list-style: upper-latin;} +</font></font></pre> + +<p><font><font>O {{HTMLElement ("LI")}} elementos da lista herdam esse estilo:</font></font></p> + +<p><font><font>{{EmbedLiveSample ('Listas_ordenadas', '', '', '')}}</font></font></p> +</div> + +<div class="tuto_details"> +<div class="tuto_type"><font><font>Mais detalhes</font></font></div> + +<p><font><font>O {{cssxref ("list-style")}} propriedade é uma propriedade taquigrafia. </font><font>Em folhas de estilo complexas você pode preferir usar propriedades separadas para definir valores separados. </font><font>Para obter links para essas propriedades separadas, e mais detalhes de como CSS especifica listas, consulte o {{cssxref ("list-style")}} página de referência.</font></font></p> + +<p><font><font>Se você estiver usando uma linguagem de marcação como HTML que fornece etiquetas convencionais para não-ordenada ({{HTMLElement ("ul")}}) e ordenou ({{HTMLElement ("ol")}}) listas, então é uma boa prática para usar as marcas na forma como eles se destinam. </font><font>No entanto, você pode usar CSS para fazer {{HTMLElement ("ul")}} exibição ordenada e {{HTMLElement ("ol")}} visualização não ordenada, se desejar.</font></font></p> + +<p><font><font>Browsers diferem na maneira de implementar os estilos para listas. </font><font>Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.</font></font></p> +</div> + +<h3 id="Contadores"><font><font>Contadores</font></font></h3> + +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> +<p><strong><font><font>Nota: </font></font></strong><font><font> Alguns navegadores não suportam contadores. </font><font>O </font></font><a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html"><font><font>conteúdo CSS e compatibilidade do navegador</font></font></a><font><font> página no </font></font><a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/"><font><font>site de modo Quirks</font></font></a><font><font> contém um gráfico detalhado de compatibilidade do navegador para este e outros recursos CSS. </font><font>Páginas individuais na </font></font><a href="/en-US/docs/Web/CSS/Reference" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Reference"><font><font>referência CSS</font></font></a><font><font> neste local também têm tabelas de compatibilidade do navegador.</font></font></p> +</div> + +<p><font><font>Você pode usar contadores para numerar quaisquer elementos, não somente itens da lista. </font><font>Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.</font></font></p> + +<p><font><font>Para especificar a numeração, você precisa de um </font></font><em><font><font>contador</font></font></em><font><font> com um nome que você especificar.</font></font></p> + +<p><font><font>Em alguns elementos antes da contagem é começar, reinicie o contador com a propriedade {{cssxref ("counter-reset")}} eo nome do seu contador. </font><font>O pai dos elementos que você estiver contando é um bom lugar para fazer isso, mas você pode usar qualquer elemento que vem antes os itens da lista.</font></font></p> + +<p><font><font>Em cada elemento que o contador é incrementado, use a propriedade {{cssxref ("contra-incremento")}} eo nome do seu contador.</font></font></p> + +<p><font><font>Para mostrar seu contador, adicione {{cssxref (":: before")}} ou {{cssxref (":: after")}} para o selector e usar o </font></font><code><font><font>conteúdo</font></font></code><font><font> da propriedade (como você fez na página anterior, </font><font>Conteúdo) </font><font>.</font></font></p> + +<p><font><font>No valor do </font></font><code><font><font>conteúdo</font></font></code><font><font> de propriedade, especifique </font></font><code><font><font>counter ()</font></font></code><font><font> com o nome de seu contador. </font><font>Opcionalmente especifique um tipo. </font><font>Os tipos são os mesmos que na </font></font><strong><font><font>lista ordenada</font></font></strong><font><font> secção acima.</font></font></p> + +<p><font><font>Normalmente, o elemento que apresenta o contador também incrementa-lo.</font></font></p> + +<div class="tuto_example"> +<div class="tuto_type"><font><font>Exemplo</font></font></div> + +<p><font><font>Esta regra inicializa um contador para cada {{HTMLElement ("h3")}} elemento com a classe </font><font>numeradas:</font></font></p> + +<pre class="brush:css"><font><font>h3.numbered {counter-reset: mynum;} +</font></font></pre> + +<p> </p> + +<p><font><font>Esta regra mostra e incrementa o contador para cada {{HTMLElement ("p")}} elemento com a classe </font><font>numeradas:</font></font></p> + +<pre class="brush: html"><font><font><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></font></font> +</pre> + +<pre class="brush:css"><font><font>body </font></font><font><font> + {counter-reset: </font></font><font><font> +mynum;} </font></font><font><font> +p.numbered:before + {content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;}</font></font> +</pre> + +<p><font><font>O resultado se parece com isso:</font></font></p> + +<p><font><font>{{ EmbedLiveSample("Contadores", '300', '200', '') }}</font></font></p> +</div> + +<div class="tuto_details"> +<div class="tuto_type"><font><font>Mais detalhes</font></font></div> + +<p><font><font>Você não pode usar os contadores a menos que você sabe que todo mundo que lê o documento tem um navegador que os suporta.</font></font></p> + +<p><font><font>Se você é capaz de usar contadores, eles têm a vantagem de que você pode estilizar os contadores separadamente dos itens da lista. </font><font>No exemplo acima, os contadores estão em negrito mas os itens da lista não são.</font></font></p> + +<p><font><font>Você também pode usar contadores em formas mais complexas, por exemplo, para numerar seções, títulos, subtítulos e parágrafos em documentos formais. </font><font>Para mais detalhes, consulte </font></font><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters"><font><font>contadores automáticos e numeração</font></font></a><font><font> em CSS Specification.</font></font></p> +</div> + +<h2 id="Listas_denominadas_Ação"><font><font>Listas denominadas: Ação</font></font></h2> + +<p><font><font>Crie um novo documento HTML, </font><font>doc2.html. </font><font>Copie e cole o conteúdo daqui:</font></font></p> + +<pre class="brush:html;"><font><font><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document 2</title> + <link rel="stylesheet" href="style2.css"> + </head> + <body> + + <h3 id="oceans">The oceans</h3> + <ul> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</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></font></font> + +</pre> + +<p><font><font>Faça uma nova folha de estilo, </font><font>style2.css. </font><font>Copie e cole o conteúdo daqui:</font></font></p> + +<pre class="brush:css;"><font><font>/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +}</font></font> +</pre> + +<p><font><font>Se o layout e comentário não são a seu gosto, alterá-los.</font></font></p> + +<p><font><font>Abra o documento no seu browser. </font><font>Se o seu navegador suporta contadores, você verá algo parecido com o exemplo abaixo. </font><font>Se seu navegador não suporta contadores, então você não ver os números (e provavelmente nem mesmo os dois pontos):</font></font></p> + +<p><font><font>{{EmbedLiveSample ('Listas_denominadas_Ação', '300', '400', '')}}</font></font></p> + +<div class="tuto_example"> +<div class="tuto_type"><font><font>Desafios</font></font></div> + +<p><font><font>Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais romanos de I a V:</font></font></p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p><strong>The oceans</strong></p> + + <ul> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p><font><font>Mude sua folha de estilo para identificar os títulos com letras maiúsculas em parênteses como este:</font></font></p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p><strong>(A) The oceans</strong></p> + + <p><strong>. . .</strong></p> + + <p><strong>(B) Numbered paragraphs</strong></p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="EN-US / docs / Web / Guia / CSS / Introdução / desafio soluções # Lists"><font><font>Ver soluções para esses desafios.</font></font></a></p> + +<h2 id="Qual_o_proximo"><font><font>Qual o proximo?</font></font></h2> + +<p><font><font>{{NextPage ("/ en-US / docs / Web / Guia / CSS / Getting_Started / Boxes", "caixas")}} Quando seu navegador exibe seu documento de amostra, ele cria espaço ao redor dos elementos quando ele coloca-los na página. </font><font>A próxima página descreve como você pode usar CSS para trabalhar com as formas subjacentes de elementos, </font><font>caixas.</font></font></p> diff --git a/files/pt-br/web/css/getting_started/oque_é_css/index.html b/files/pt-br/web/css/getting_started/oque_é_css/index.html new file mode 100644 index 0000000000..b72101c453 --- /dev/null +++ b/files/pt-br/web/css/getting_started/oque_é_css/index.html @@ -0,0 +1,111 @@ +--- +title: O que é CSS +slug: Web/CSS/Getting_Started/Oque_é_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{previousPage("/en-US/docs/CSS/Getting_Started", "Getting started")}} Esta é a primeira seção do tutorial de <span class="seoSummary"> i<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">ntrodução as CSS </a> e explica o que é CSS. Você criará um documento simples para trabalhar com CSS nelas nas próximas seções.</span></p> + +<h2 class="clearLeft" id="O_que_é_CSS">O que é CSS ?</h2> + +<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) é uma linguagem para especificar como os documentos são apresentados aos usuários (Estilo do documento).</p> + +<p>Um <em>documento</em> é um conjunto de informações que são estruturadas utilizando uma <em>linguagem de marcação</em>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Examples</div> + +<ul> + <li>Um documento, é uma página da web como esta que você está lendo.<br> + A informação que você vê em uma página web é geralmente estruturado utilizando a linguagem de marcação HTML (HyperText Markup Language).</li> + <li>Dialogos, também chamados de Janelas Modais de um aplicativo, são frequentemente documentos.<br> + Tais diálogos podem também ser estruturados usando linguagem de marcação, como XUL. Este é frequentemente o caso em aplicações Mozilla, mas não é um caso comum.</li> +</ul> +</div> + +<p>Neste tutorial, temos boxes com o título <strong>Mais detalhes c</strong>omo o box abaixo, contento informações opcionais. Se você estiver com pressa para avançar com este tutorial, sinta-se a vontade para ignorar estas boxes e avançar com o tutorial, talvez lê-lo mais tarde. Caso contrário lê-los quando chegar a eles, e talvez siga os links para saber mais.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mais detalhes</div> + +<p>Um documento não é a mesma coisa que um arquivo, ele pode ou não estar armazenado em um arquivo.</p> + +<p>Por exemplo, o texto que você está lendo agora não é armazenado em um arquivo. Quando seu navegador solicita esta pagina, o servidor consulta um banco de dados e gera o documento, reunindo partes do documento a partir de muitos arquivos. No entanto, neste tutorial você irá 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 exemplo de site de web:</p> + +<table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="/en/HTML" title="en/HTML">HTML</a></td> + <td>para paginas web</td> + </tr> + <tr> + <td><a href="/en/XML" title="en/XML">XML</a></td> + <td>para documentos estruturados em geral</td> + </tr> + <tr> + <td><a href="/en/SVG" title="en/SVG">SVG</a></td> + <td>para gráficos</td> + </tr> + <tr> + <td><a href="/en/XUL" title="en/XUL">XUL</a></td> + <td>para interfaces de usuários em Mozilla</td> + </tr> + </tbody> +</table> + +<p>Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.</p> +</div> + +<p><em>Apresentar</em> um documento ao usuário significa convertê-lo em uma forma que os seres humanos possam fazer uso. Navegadores como Firefox, Chrome ou Internet Explorer, são projetados para apresentar documentos visualmente — por exemplo, na tela de um computador, projetor ou impressora.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mais detalhes</div> + +<p>CSS não é apenas para navegadores, e nem apenas para apresentação visual. Na terminoloia formal de CSS, o programa que apresenta um documento a um usuário é chamado de <em>user agent</em> (UA), no Brasil <span style="background-color: rgb(244, 244, 244);"><em>agente de usuário</em></span>. Um navegador é apenas um UA. No entanto, na parte I deste Tutorial você vai apenas trabalhar com CSS no navegador.</p> + +<p>Para mais definições formais sobre terminologia relacionadas com CSS, veja <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definições</a> na especificação CSS.</p> +</div> + +<h2 id="Ação_Criando_um_documento">Ação: Criando um documento</h2> + +<ol> + <li>Use seu computador para criar um novo diretório e um novo arquivo de texto dentro deste dire†ório. O arquivo terá o documento.</li> + <li>Copie e cole o código HTML abaixo . Salve o arquivo usando o nome <code>doc1.html</code> + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Documento de exemplo</title> + </head> + + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>No seu navegador, abra uma nova aba ou uma nova janela, e abra o arquivo que você acabou de salvar. + <p>Você deve ver o texto com as letras iniciais em negrito, como este:</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ê no seu navegador, pode não ser exatamente o mesmo que este, por causa das configurações em seu navegador e neste tutorial. Se existirem diferenças nas fontes espaçamentos ou cores que você vê, elas não são importantes.</p> + </li> +</ol> + +<h2 id="O_que_veremos_depois">O que veremos depois?</h2> + +<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Seu documento ainda não usa CSS. Na <a href="/en-US/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">próxima seção</a> você usará CSS para especificar o estilo.</p> diff --git a/files/pt-br/web/css/getting_started/porque_usar_css/index.html b/files/pt-br/web/css/getting_started/porque_usar_css/index.html new file mode 100644 index 0000000000..1219d9c096 --- /dev/null +++ b/files/pt-br/web/css/getting_started/porque_usar_css/index.html @@ -0,0 +1,105 @@ +--- +title: Por que usar CSS? +slug: Web/CSS/Getting_Started/Porque_usar_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}<span class="seoSummary">Esta segunda parte do <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> tutorial explica a relação entre as CSS e o documento. No exercício você aprenderá como criar uma folha de estilos e linka-la para o documento que você criou para sua seção.</span></p> + +<h2 class="clearLeft" id="Informação_Por_que_usar_CSS">Informação: Por que usar CSS?</h2> + +<p>As CSS são usadas para definir estilos para os seus documentos, incluindo o design, layout e as variações na exbição para diferentes dispositivos e tamanho de tela. Você pode colocar suas CSS dentro da tag <head> do seu documento com uma folha de estilos incorporada, ou anexar uma folha de estilos externa . Para linkar uma folha de estilos externa para o seu documento é simples, adicione um link para a sua folha de estilos na tag <head> de seu documento.</p> + +<p>Uma folha de estilo externa, tem muitas vantagens.:</p> + +<ul> + <li>Ajuda a evitar código repetido</li> + <li>Facilita a manutenção</li> + <li>Permite fazer mudança no site inteiro alterando apenas um arquivo.</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">Exemplo</div> + +<p>Usando CSS, você armazena as informações de estilo em arquivos comuns que todas as páginas compartilham. Por exemplo, quando você linka varios documentos para a mesma folha de estilo que define a cor dos cabeçalhos h2, você pode aplicar o estilo para tags de cabeçalho h2 globalmente alterando apenas um atributo css..</p> + +<p>Quando um usuario exibe uma página web, o navegador do usuário carrega as informações de estilo juntamente com o conteúdo da página.</p> + +<p>Quando um usuário imprime uma página da web,você pode fornecer informações de estilo diferente, que faz com que a página impressa fique de fácil leitura.</p> +</div> + +<p>Como o HTML e o CSS trabalham juntos? Em geral, você usa HTML para descrever o conteúdo do documento, não o estilo do documento. Você usa CSS para especificar o estilo do documento, e não o seu conteúdo. Mais adiante neste tutorial, você verá algumas exceções a esta disposição.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mais detalhes</div> + +<p>Uma linguagem de marcação como HTML também fornece maneiras de especificar estilo.</p> + +<p>Por exemplo, você pode usar a tag <b> para fazer o texto em negrito, e pode especificar a cor de fundo na sua tag <body>.</p> + +<p>Quando você usa CSS, normalmente evita usar esses recursos da linguagem de marcação, para deixar informações de estilo em um unico lugar.</p> +</div> + +<h2 id="Ação_Criando_uma_folha_de_estilo">Ação: Criando uma folha de estilo</h2> + +<ol> + <li><span id="result_box" lang="pt"><span class="hps">Crie outro</span> <span class="hps">arquivo de texto</span> <span class="hps">no mesmo</span> <span class="hps">diretório que o documento</span> <span class="hps">doc1.html</span> <span class="hps">você criou</span> <span class="hps">na primeira seção</span><span>.</span></span></li> + <li>Salve seu documento como: <code>style1.css</code>. Este arquivo será sua folha de estilos.</li> + <li>Em seu CSS, cole a linha abaixo, e salve o arquivo: + <pre class="brush: css">strong {color: red;} +</pre> + </li> +</ol> + +<h3 id="Linkando_seu_documento_para_sua_folha_de_estilo">Linkando seu documento para sua folha de estilo</h3> + +<ol> + <li>Para linkar seu documento para sua folha de estilos, edite seu arquivo HTML. Adicionando o código abaixo: + <pre class="brush: html; highlight:[6];"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Documento Simples com CSS</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas: + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}</p> + +<div class="tuto_example" id="challenge"> +<div class="tuto_type">Desafio</div> + +<p>Além do vermelho, as CSS permitem que você escolha alguns outros nomes de cores.</p> + +<p>Encontre mais cinco nomes de cores que as CSS trabalham.</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução para este desafio.</a></div> + +<h2 id="O_que_veremos">O que veremos?</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}Agora você tem um documento de exemplo linkando a uma folha de estilos, você está pronto para <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">aprender mais</a> sobre como seu navegador trabalha e exibe um documento.</p> diff --git a/files/pt-br/web/css/getting_started/seletores/index.html b/files/pt-br/web/css/getting_started/seletores/index.html new file mode 100644 index 0000000000..22b53c2049 --- /dev/null +++ b/files/pt-br/web/css/getting_started/seletores/index.html @@ -0,0 +1,429 @@ +--- +title: Seletores +slug: Web/CSS/Getting_Started/Seletores +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}<span class="seoSummary">Esta é a 5ª seção de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">Primeiros passos (Tutorial Css)</a>, ela explica como você pode aplicar estilos seletivamente e como diferentes tipos de seletores possuem diferentes prioridades. Você adiciona mais atributos para tags no seu documento e como você pode usa-los em sua folha de estilos.</span></p> + +<h2 class="clearLeft" id="Informações_Seletores">Informações: Seletores</h2> + +<p>CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:</p> + +<pre class="brush: css">strong { + color: red; +} +</pre> + +<p>No CSS, este código inteiro é uma <em>regra</em>. Esta regra inicia com <code>strong</code>, que é um <em>seletor</em>. Ele seleciona os elementos do DOM aos quais a regra se aplica.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mais detalhes</div> + +<p>A parte dentro das chaves é a <em>declaração</em>.</p> + +<p>A palavra-chave <code>color</code> é uma <em>propriedade e</em> <code>red</code> é um <em>valor</em>.</p> + +<p>O ponto e vírgula depois do par propriedade-valor o separa de outros pares propriedade-valor na mesma declaração.</p> + +<p>Esse tutorial se refere ao seletor <code>strong</code> como um seletor de <em>tag</em>. A Especificação do CSS se refere a este seletor como seletor de <em>tipo</em>.</p> +</div> + +<p>Esta página de tutorial explica mais sobre os seletores que você pode utilizar nas regras CSS.</p> + +<p>Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.</p> + +<p>Dois atributos são especiais para o CSS. São eles o <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> e o <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> + +<h3 id="Seletores_com_Classe">Seletores com Classe</h3> + +<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> em um elemento para atribuir o elemento a uma determinada classe. O nome da classe é de sua escolha. Muitos elementos em um documento podem pertencer a mesma classe.</p> + +<p>Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.</p> + +<h3 id="Seletores_com_ID">Seletores com ID</h3> + +<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.</p> + +<p>Em seu CSS, digite cerquilha <strong>(#)</strong> antes do ID quanto estiver usando em um seletor ID.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemplo</div> +Esta tag HTML tem tanto um atributo <code>class</code> quanto um atributo <code>id</code>: + +<pre class="brush: html"><p class="chave" id="principal"> +</pre> + +<p>O valor de <strong>id</strong>, <code>principal</code>, precisa ser unico no documento, mas outras tags no documento podem ter o atributo <strong>class</strong> com o mesmo nome, <code>chave</code>.</p> + +<p>Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe <code>chave</code>. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)</p> + +<pre class="brush: css">.chave { + color: green; +} +</pre> + +<p>Esta regra torna negrito um elemento com <strong>id</strong> <code>principal</code>:</p> + +<pre class="brush: css">#principal { + font-weight: bolder; +} +</pre> +</div> + +<h3 id="Seletores_de_Atributo">Seletores de Atributo</h3> + +<p>Você não está restrito aos dois atributos especiais, class e id. Você pode especificar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">outros atributos</a> usando colchetes. Dentro dos colchetes você insere o nome do atributo, opcionalmente seguido por um operador correspondente e um valor. Além disso, a seleção pode ser feita case-insensitive adicionando um "i" depois do valor, mas nem todos os browsers suportam esta funcionalidade ainda. Exemplos:</p> + +<dl> + <dt><code>[disabled]</code></dt> + <dd>Seleciona todos os elementos com o atributo "disabled".</dd> + <dt><code>[type='button']</code></dt> + <dd>Seleciona todos os elementos do tipo "button".</dd> + <dt><code>[class~=key]</code></dt> + <dd><font><font>Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). </font><font>Funcionalmente equivalente a </font></font><code>.key</code><font><font>.</font></font></dd> + <dt><code>[lang|=es]</code></dt> + <dd>Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).</dd> + <dt>[title*="example" i]</dt> + <dd><font>Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. </font><font>Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.</font></dd> + <dt><code>a[href^="https://"]</code></dt> + <dd>Seleciona links seguros.</dd> + <dt><code>img[src$=".png"]</code></dt> + <dd>IIndiretamente seleciona imagens PNG; qualquer imagem que seja PNG mas que a URL não termine em ".png" (como quando elas são uma query string) não serão selecionadas.</dd> +</dl> + +<h3 id="Seletores_de_pseudo-classes">Seletores de pseudo-classes</h3> + +<p><font><font>Uma </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" title="pt-BR / docs / Web / Guide / CSS / Pseudo-classes"><font><font>pseudo-classe</font></font></a><font><font> em CSS </font><font>é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. </font><font>Por exemplo </font></font> {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.</p> + +<p>Pseudo-classes, juntas com pseudo-elementos, te deixa aplicar um estilo para um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação à fatores externos como o histórico do navegador ({{ cssxref(":visited") }}, por exemplo), o estado do conteúdo (como {{ cssxref(":checked") }} no mesmo elemento do formulário), ou a posição do mouse (como {{ cssxref(":hover") }} que te permite saber se o mouse está sobre um elemento ou não). Para ver uma lista completa de seletores, visite <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Syntax</div> + +<pre class="brush:css">selector:pseudo-class { + property: value; +} +</pre> +</div> + +<h4 id="Lista_de_pseudo-classes">Lista de pseudo-classes</h4> + +<ul> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":visited") }}</li> + <li>{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":nth-child") }}</li> + <li>{{ Cssxref(":nth-last-child") }}</li> + <li>{{ Cssxref(":nth-of-type") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":disabled") }}</li> +</ul> + +<h2 id="Informação_Especificidade">Informação: Especificidade</h2> + +<p>Várias regras podem ter seletores que correspondem ao mesmo elemento. Se uma propriedade recebeu apenas uma regra, não há conflito e a propriedade será definida ao elemento. Se são aplicadas mais do que uma regra a um elemento e definido a mesma propriedade, então o CSS dará prioridade à regra que tem o seletor mais <a href="/en-US/docs/Web/CSS/Specificity">específico</a>. Um seletor ID é mais específico do que um seletor de classe, pseudo-classe ou atributo, que por sua vez é mais específico do que um de tag ou de pseudo-elemento.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mais detalhes</div> + +<p>Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor <code>.key</code> seleciona todos os elementos que têm a classe com o nome <code>key</code>. O seletor <code>p.key</code> seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe <code>key</code>.</p> +</div> + +<p>Se a folha de estilo possui regras conflitantes e elas são igualmente específicas, então o CSS dará prioridade à regra que é posterior na folha de estilo.</p> + +<p>Quando você tem um problema com regras conflitantes, tente resolvê-los tornando uma das regras mais específicas, para que ela seja priorizada. Se você não pode fazer isto, tente mover uma das regras perto do fim da folha de estilo e então ela será priorizada.</p> + +<h2 id="Information_Selectors_based_on_relationships">Information: Selectors based on relationships</h2> + +<p>CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.</p> + +<table id="relselectors"> + <caption>Common selectors based on relationships</caption> + <tbody> + <tr> + <td style="width: 10em;"><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Any E element that is a <em>descendant</em> of an A element (that is: a child, or a child of a child, <em>etc</em>.)</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Any E element that is a <em>child</em> (i.e. direct descendant) of an A element</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Any E element that is the <em>first child</em> of its parent</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Any E element that is the next <em>sibling</em> of a B element (that is: the next child of the same parent)</td> + </tr> + </tbody> +</table> + +<p>You can combine these to express complex relationships.</p> + +<p>You can also use the symbol <code>*</code> (asterisk) to mean "any element".</p> + +<div class="tuto_example"> +<div class="tuto_type">Example</div> + +<p>An HTML table has an <code>id</code> attribute, but its rows and cells do not have individual identifiers:</p> + +<pre class="brush: html"><table id="data-table-1"> +... +<tr> +<td>Prefix</td> +<td>0001</td> +<td>default</td> +</tr> +... +</pre> + +<p>These rules make the first cell in each row underline, and the sibling of first cell in each row strikethroughted (in example 2.nd cell) . They only affect one specific table in the document:</p> + +<pre class="brush:css"> #data-table-1 td:first-child {text-decoration: underline;} + #data-table-1 td:first-child + td {text-decoration: line-through;} +</pre> + +<p>The result looks like:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 18em;"> + <tbody> + <tr> + <td><u>Prefix</u></td> + <td><s>0001</s></td> + <td>default</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">More details</div> + +<p>In the usual way, if you make a selector more specific, then you increase its priority.</p> + +<p>If you use these techniques, you avoid the need to specify <code>class</code> or <code>id</code> attributes on so many tags in your document. Instead, CSS does the work.</p> + +<p>In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.</p> + +<p>For more examples about tables, see <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> in the CSS Reference page.</p> +</div> + +<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2> + +<ol> + <li>Edit your HTML file, and duplicate the paragraph by copying and pasting it.</li> + <li>Then add <strong>id</strong> and <strong>class</strong> attributes to the first copy, and an <strong>id</strong> attribute to the second copy as shown below. Alternatively, copy and paste the entire file again: + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p id="first"> + <strong class="carrot">C</strong>ascading + <strong class="spinach">S</strong>tyle + <strong class="spinach">S</strong>heets + </p> + <p id="second"> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>Now edit your CSS file. Replace the entire contents with: + <pre class="brush:css">strong { color: red; } +.carrot { color: orange; } +.spinach { color: green; } +#first { font-style: italic; } +</pre> + </li> + <li>Save the files and refresh your browser to see the result: + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><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><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>You can try rearranging the lines in your CSS file to show that the order has no effect.</p> + + <p>The class selectors <code>.carrot</code> and <code>.spinach</code> have priority over the tag selector <code>strong</code>.</p> + + <p>The ID selector <code>#first</code> has priority over the class and tag selectors.</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Challenges</div> + +<ol> + <li>Without changing your HTML file, add a single rule to your CSS file that keeps all the initial letters that same color as they are now, but makes all the other text in the second paragraph blue: + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><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> + </li> + <li>Now change the rule you have just added (without changing anything else), to make the first paragraph blue too: + <table style="background-color: white; border: 2px outset #3366bb; 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> + </li> +</ol> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<ol> + <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: + + <pre class="brush: css">#second { color: blue; } +</pre> + A more specific selector, <code>p#second</code> also works.</li> + <li>Change the selector of the new rule to be a tag selector using <code>p</code>: + <pre class="brush: css">p { color: blue; } +</pre> + </li> +</ol> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> + +<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2> + +<ol> + <li>Create an HTML file with following content: + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> + </body> +</html> +</pre> + </li> + <li>Now edit your CSS file. Replace the entire contents with: + <pre class="brush: css">a.homepage:link, a.homepage:visited { + padding: 1px 10px 1px 10px; + color: #fff; + background: #555; + border-radius: 3px; + border: 1px outset rgba(50,50,50,.5); + font-family: georgia, serif; + font-size: 14px; + font-style: italic; + text-decoration: none; +} + +a.homepage:hover, a.homepage:focus, a.homepage:active { + background-color: #666; +} +</pre> + </li> + <li>Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect): + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td> + </tr> + </tbody> + </table> + </li> +</ol> + +<h2 id="Action_Using_selectors_based_on_relationships_and_pseudo-classes">Action: Using selectors based on relationships and pseudo-classes</h2> + +<p>With selectors based on relationships and pseudo-classes you can create complex cascade algorithms. This is a common technique used, for example, in order to create <strong>pure-CSS dropdown menus</strong> (that is only CSS, without using <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). The essence of this technique is the creation of a rule like the following:</p> + +<pre class="brush: css">div.menu-bar ul ul { + display: none; +} + +div.menu-bar li:hover > ul { + display: block; +}</pre> + +<p>to be applied to an HTML structure like the following:</p> + +<pre class="brush: html"><div class="menu-bar"> + <ul> + <li> + <a href="example.html">Menu</a> + <ul> + <li> + <a href="example.html">Link</a> + </li> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + </ul> + </li> + </ul> +</div> +</pre> + +<p>See our complete <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> for a possible cue.</p> + +<h2 id="What_next">What next?</h2> + +<p>Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> |