From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../cascading_and_inheritance/index.html | 128 ------ .../getting_started/como_css_funciona/index.html | 126 ------ files/pt-br/web/css/getting_started/index.html | 98 ----- .../web/css/getting_started/javascript/index.html | 140 ------- .../pt-br/web/css/getting_started/lists/index.html | 272 ------------- .../getting_started/oque_é_css/index.html | 112 ------ .../css/getting_started/porque_usar_css/index.html | 106 ----- .../web/css/getting_started/seletores/index.html | 430 --------------------- 8 files changed, 1412 deletions(-) delete mode 100644 files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html delete mode 100644 files/pt-br/web/css/getting_started/como_css_funciona/index.html delete mode 100644 files/pt-br/web/css/getting_started/index.html delete mode 100644 files/pt-br/web/css/getting_started/javascript/index.html delete mode 100644 files/pt-br/web/css/getting_started/lists/index.html delete mode 100644 files/pt-br/web/css/getting_started/oque_é_css/index.html delete mode 100644 files/pt-br/web/css/getting_started/porque_usar_css/index.html delete mode 100644 files/pt-br/web/css/getting_started/seletores/index.html (limited to 'files/pt-br/web/css/getting_started') 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 deleted file mode 100644 index 7880e00f6d..0000000000 --- a/files/pt-br/web/css/getting_started/cascading_and_inheritance/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}Essa é a quarta seção do  Primeiros Passos (Tutorial CSS); 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.

- -

Informação: Cascata e Herança

- -

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.

- -

Existem três fontes principais de estilos que constituem a cascata. São elas:

- - - -

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.

- -
-
Exemplo
- -

Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.

- -

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 userContent.css do seu navegador.

- -

Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.

-
- -

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.

- -

Os {{ HTMLElement("strong") }} são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).

- -

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.

- -

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.

- -

Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.

- -

Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.

- -

Mais detalhes

- -
-

CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. 

- -

Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.

- -

Se você quiser saber todos os detalhes da cascata e herança, consulte  Assigning property values, Cascading, and Inheritance na especificação do CSS

-
- -

Ação: Usando herança

- -
    -
  1. Edite o seu arquivo CSS.
    2. -
  2. 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: - 
    p {color: blue; text-decoration: underline;}
-
    -
    3. -
  3. 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") }}.
    - -

    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") }}.

    -
    4. -
- - -
- - - - - - - - -
Antes
Cascading Style Sheets
- - - - - - - - -
Depois
Cascading Style Sheets
- -
-
Desafio
-Mude o seu estilo de modo que somente as letras vermelhas sublinhadas: - - - - - - - -
Cascading Style Sheets
- -
-
Possible solution
- -

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

- -
p {color: blue; }
-strong {color: red; text-decoration: underline;}
-
- -

 

-Hide solution
-Veja a solução do desafio.
- -

Qual o próximo?

- -

{{ 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 seletores.

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 deleted file mode 100644 index 2ead5ccae7..0000000000 --- a/files/pt-br/web/css/getting_started/como_css_funciona/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -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 -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }} Essa terceira seção do tutorial CSS Getting Started 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. 

- -

Informação: Como o CSS funciona

- -

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:

- -
    -
  1. 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.
    2. -
  2. O navegador exibe o conteúdo do DOM.
    3. -
- -

Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando tags, que são sequências que começam com '<' e terminam com '>'. A maioria dos elementos possui tags 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.

- -

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.

- -

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.

- -

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.

- -
-
Exemplo
-No seu documento de exemplo, a tag <p>  e seu final </p> criam um recipiente: - -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

Exemplo em tempo real

- -

http://jsfiddle.net/djaniketster/6jbpS/

- -

No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós 'strongs' e os nós de texto. Os nós 'strong'  são eles próprios pais, com nós de texto como filhos.

- -
P
-├─STRONG
-│ └─"C"
-├─"ascading"
-├─STRONG
-│ └─"S"
-├─"tyle"
-├─STRONG
-│ └─"S"
-└─"heets"
-
- -

Ação: Analisando um DOM

- -

Utilizando Inspetor DOM

- -

Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on Inspetor DOM do Mozilla (DOMi)  para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).

- -
    -
  1. Use seu navegador Mozilla para abrir seu documento HTML de exemplo.
    2. -
  2. Na barra de menu do seu navegador, escolha Ferramentas  > Inspetor DOM, ou Ferramentas > Desenvolvimento Web > Inspetor DOM. -
    -
    Mais detalhes
    - -

    Se o seu navegador Mozilla não ter o DOMi, você pode instalá-lo a partir do site de Add-ons  e reiniciar seu navegador.  Depois, retorne para esse tutorial.

    - -

    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.

    -
    -
    3. -
  3. No DOMi, expanda o nó do seu documento clicando em suas flechas. -

    Nota:  Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.

    - -

    Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:

    - - 
    │ ▼╴P
-│ │ │ ▼╴STRONG
-│ │ └#text
-│ ├╴#text
-│ ►╴STRONG
-│ │
    - -

    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.

    - -

    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.

    -
    4. -
- -
-
Desafio
- -

No DOMi, clique em um nó STRONG.

- -

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.

- - -
-
Possible solution
- -

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

-Hide solution
-Veja a solução para o desafio.
- -

Usando Raio-X Goggles da Web

- -

Raio-X Goggles da Web exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.

- -
    -
  1. Vá para a página inicial do Raio-X Goggles da Web.
    2. -
  2. Arraste o link do bookmarklet na página para a barra de ferramentas do seu navegador.
    3. -
  3. Abra o seu documento HTML de exemplo.
    4. -
  4. Ative o Raio-X Goggles da Web clicando no bookmarklet na sua barra de ferramentas.
    5. -
  5. Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.
    6. -
- -

O que vem depois?

- -

{{ 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 próxima página explica mais sobre essas interações.

diff --git a/files/pt-br/web/css/getting_started/index.html b/files/pt-br/web/css/getting_started/index.html deleted file mode 100644 index 389962ab07..0000000000 --- a/files/pt-br/web/css/getting_started/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Iniciando com o CSS -slug: Web/CSS/Getting_Started -tags: - - CSS - - Guia(2) - - Guía - - Iniciante - - Web -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

 

- -

Introdução

- -

Esse tutorial é uma introdução ao Cascading Style Sheets (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:

- - - - - -

Esse tutorial é baseado na Especificação do CSS 2.1.

- -

Quem deve usar esse tutorial?

- -

Esse tutorial é, principalmente, para iniciantes no CSS.

- -

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.

- -

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.

- -

Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.

- -

O que você precisa saber antes de começar?

- -

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.

- -

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.

- -

Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, você pode ignorá-las. O software referenciado por esse tutorial inclui:

- - - -

Nota: 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.

- -

Como usar esse tutorial

- -

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.

- -

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.

- -

Para testar seu entendimento, faça o desafio do fim de cada página. 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.

- -

Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda Mais detalhes (More details). Utilize os links para encontrar informações de referência sobre o CSS.

- -

Parte I do Tutorial

- -

Uma guia básico passo a passo do CSS

- -
    -
  1. O que é o CSS
    2. -
  2. Porque usar o CSS
    3. -
  3. Como o CSS funciona
    4. -
  4. Cascata e herança
    5. -
  5. Seletores
    6. -
  6. CSS legível
    7. -
  7. Estilos de texto
    8. -
  8. Cores
    9. -
  9. Conteúdo
    10. -
  10. Listas
    11. -
  11. Caixas
    12. -
  12. Layout
    13. -
  13. Tabelas
    14. -
  14. Mídia
    15. -
- -

Parte II do Tutorial

- -

Exemplos do uso do CSS juntamente com outras tecnologias

- -
    -
  1. JavaScript
    2. -
  2. Gráficos SVG
    3. -
  3. Dados XML
    4. -
  4. Ligações XBL
    5. -
  5. Interfaces de usuário XUL
    6. -
- -

{{ CSSTutorialTOC() }}

- -

{{ 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" } ) }}

diff --git a/files/pt-br/web/css/getting_started/javascript/index.html b/files/pt-br/web/css/getting_started/javascript/index.html deleted file mode 100644 index 544deb8960..0000000000 --- a/files/pt-br/web/css/getting_started/javascript/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: JavaScript e CSS -slug: Web/CSS/Getting_Started/JavaScript -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -

{{ CSSTutorialTOC() }}

-

Esta é a pirmeira sessão da Parte II do Tutorial de CSS. A parte II consém alguns exemplos que mostram o escopo do CSS usado com outras tecnologias web e Mozilla.

-

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.

-

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.

-

Sessão Anterior (da Parte I): Media
- Próxima sessão: SVG

-

Informação: JavaScript

-

JavaScript é um programming language. JavaScript é largamente utilizado para pronmover interatividade em web sites e aplicações.

-

JavaScript pode interagir com stylesheets, permitindo a você criar programas que mudam o eastilo de um documento de forma dinâmica

-

Há três formas de fazer isso:

- - - - - - - - -
- Mais detalhes
Para mais informações sobre JavaScript, veja a página JavaScript nesta wiki.
-

Ação: Uma demonstração de  JavaScript

-

Faça um novo documento em HTML, doc5.html. Copie e cole o conteúdo daqui, tenha certeza de rolar para copiar todo o código:

-
- 
<!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>
-
-
-

Crie um novo arquivo  CSS, style5.css. Copie e cole o conteúdo daqui:

-
- 
/*** JavaScript demonstration ***/
-#square {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  margin-bottom: 1em;
-}
-
-button {
-  padding: .5em 2em;
-}
-
-
-

Crie um novo arquivo de texto, script5.js. Coie e cole o conteúdo daqui:

-
- 
// 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");
-}
-
-
-

Abra o documento no seu Browser e pressione o botão.

-

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:

- - - - - - - -
- - - - - - -
-

JavaScript demonstration

-
- 		- - - - - - -
-

JavaScript demonstration

-
-
-
- Notas importantes sobre esta demonstração: - -
- - - - - - - -
- Desafio
-

Mude o script e então o square salta para a direita em 20 em quando muda as cores, e salta de volta depois.

-
-

Veja a solução deste desafio.

-

O que vem agora?

-

Se você teve dificuldade para entender esta página, ou se tem algum coment[ario sobre, por favor, contribua nesta página de Discussão.

-

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 stylesheets) para selecionar elementos. A próxima página demonstra isso: XBL bindings

diff --git a/files/pt-br/web/css/getting_started/lists/index.html b/files/pt-br/web/css/getting_started/lists/index.html deleted file mode 100644 index 72dc8dc227..0000000000 --- a/files/pt-br/web/css/getting_started/lists/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Manipulando Listas -slug: Web/CSS/Getting_Started/Lists -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") }}

- -

Este é o 10º seção do CSS Introdução tutorial; ele descreve como você pode usar CSS para especificar o aparecimento de listas. Você cria um novo documento de amostra contendo listas, e um novo estilo que os estilos das listas.

- -

Informação: Lists

- -

Se você aceitou o desafio na última seção, em seguida, você viu como você pode adicionar conteúdo antes de qualquer elemento para exibi-lo como um item da lista.

- -

CSS proporciona propriedades especiais que são projetados para listas. Geralmente é mais conveniente usar estas propriedades sempre que puder.

- -

Para especificar o estilo para uma lista, use o {{cssxref ("list-style")}} propriedade para especificar o tipo de marcador.

- -

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.

- -

Listas não ordenadas

- -

Em uma lista desordenada, cada item da lista é marcado da mesma forma.

- -

CSS tem três tipos de marcadores, e aqui está como seu navegador exibe-os:

- - - -

        none

- -

Alternativamente, você pode especificar o URL de uma imagem.

- -
-
Exemplo
- -

Essas regras especificam diferentes marcadores para diferentes classes de item da lista:

- -
li.open {list-style: circle;} 
-li.closed {list-style: disc;}
-
- -

Quando estas classes são usadas em uma lista, que distinguir entre os itens abertos e fechados (por exemplo, em uma lista de tarefas):

- -
<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>
-
- -

O resultado pode parecer:

- -

{{EmbedLiveSample ('Listas_não_ordenadas', '', '', '')}}

-
- -

Listas ordenadas

- -

Em uma listaordenada , cada item da lista é marcado diferentemente para mostrar a sua posição na sequência.

- -

Use a propriedade {{cssxref ("list-style")}} para especificar o tipo de marcador:

- - - -
-
Exemplo
- -

Esta regra especifica que em {{HTMLElement ("OL")}} elementos com a classe informações, os itens são identificados com letras maiúsculas.

- -
<ol class="info">
-  <li>Lorem ipsum</li>
-  <li>Dolor sit</li>
-  <li>Amet consectetuer</li>
-  <li>Magna aliquam</li>
-  <li>Autem veleum</li>
-</ol>
- -
ol.info {list-style: upper-latin;}
-
- -

O {{HTMLElement ("LI")}} elementos da lista herdam esse estilo:

- -

{{EmbedLiveSample ('Listas_ordenadas', '', '', '')}}

-
- -
-
Mais detalhes
- -

O {{cssxref ("list-style")}} propriedade é uma propriedade taquigrafia. Em folhas de estilo complexas você pode preferir usar propriedades separadas para definir valores separados. 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.

- -

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. No entanto, você pode usar CSS para fazer {{HTMLElement ("ul")}} exibição ordenada e {{HTMLElement ("ol")}} visualização não ordenada, se desejar.

- -

Browsers diferem na maneira de implementar os estilos para listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.

-
- -

Contadores

- -
-

Nota:  Alguns navegadores não suportam contadores. O conteúdo CSS e compatibilidade do navegador página no site de modo Quirks contém um gráfico detalhado de compatibilidade do navegador para este e outros recursos CSS. Páginas individuais na referência CSS neste local também têm tabelas de compatibilidade do navegador.

-
- -

Você pode usar contadores para numerar quaisquer elementos, não somente itens da lista. Por exemplo, em alguns documentos você pode querer numerar cabeçalhos ou parágrafos.

- -

Para especificar a numeração, você precisa de um contador com um nome que você especificar.

- -

Em alguns elementos antes da contagem é começar, reinicie o contador com a propriedade {{cssxref ("counter-reset")}} eo nome do seu contador. 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.

- -

Em cada elemento que o contador é incrementado, use a propriedade {{cssxref ("contra-incremento")}} eo nome do seu contador.

- -

Para mostrar seu contador, adicione {{cssxref (":: before")}} ou {{cssxref (":: after")}} para o selector e usar o conteúdo da propriedade (como você fez na página anterior, Conteúdo) .

- -

No valor do conteúdo de propriedade, especifique counter () com o nome de seu contador. Opcionalmente especifique um tipo. Os tipos são os mesmos que na lista ordenada secção acima.

- -

Normalmente, o elemento que apresenta o contador também incrementa-lo.

- -
-
Exemplo
- -

Esta regra inicializa um contador para cada {{HTMLElement ("h3")}} elemento com a classe numeradas:

- -
h3.numbered {counter-reset: mynum;}
-
- -

 

- -

Esta regra mostra e incrementa o contador para cada {{HTMLElement ("p")}} elemento com a classe numeradas:

- -
<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 
-   {counter-reset: 
-mynum;} 
-p.numbered:before
-  {content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-
- -

O resultado se parece com isso:

- -

{{ EmbedLiveSample("Contadores", '300', '200', '') }}

-
- -
-
Mais detalhes
- -

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.

- -

Se você é capaz de usar contadores, eles têm a vantagem de que você pode estilizar os contadores separadamente dos itens da lista. No exemplo acima, os contadores estão em negrito mas os itens da lista não são.

- -

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. Para mais detalhes, consulte contadores automáticos e numeração em CSS Specification.

-
- -

Listas denominadas: Ação

- -

Crie um novo documento HTML, doc2.html. Copie e cole o conteúdo daqui:

- -
<!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>
-
-
- -

Faça uma nova folha de estilo, style2.css. Copie e cole o conteúdo daqui:

- -
/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}
-
- -

Se o layout e comentário não são a seu gosto, alterá-los.

- -

Abra o documento no seu browser. Se o seu navegador suporta contadores, você verá algo parecido com o exemplo abaixo. Se seu navegador não suporta contadores, então você não ver os números (e provavelmente nem mesmo os dois pontos):

- -

{{EmbedLiveSample ('Listas_denominadas_Ação', '300', '400', '')}}

- -
-
Desafios
- -

Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais romanos de I a V:

- - - - - - - -
-

The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

 

- -

Mude sua folha de estilo para identificar os títulos com letras maiúsculas em parênteses como este:

- - - - - - - -
-

(A) The oceans

- -

. . .

- -

(B) Numbered paragraphs

- -

. . .

-
-
- -

Ver soluções para esses desafios.

- -

Qual o proximo?

- -

{{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. A próxima página descreve como você pode usar CSS para trabalhar com as formas subjacentes de elementos, caixas.

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 deleted file mode 100644 index 1ccc04f0ce..0000000000 --- a/files/pt-br/web/css/getting_started/oque_é_css/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: O que é CSS -slug: Web/CSS/Getting_Started/Oque_é_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{previousPage("/en-US/docs/CSS/Getting_Started", "Getting started")}} Esta é a primeira seção do tutorial de  introdução as CSS  e explica o que é CSS. Você criará um documento simples para trabalhar com CSS nelas nas próximas seções.

- -

O que é CSS ?

- -

Cascading Style Sheets (CSS) é uma linguagem para especificar como os documentos são apresentados aos usuários (Estilo do documento).

- -

Um documento é um conjunto de informações que são estruturadas utilizando uma linguagem de marcação.

- -
-
Examples
- - -
- -

Neste tutorial, temos boxes com o título Mais detalhes como 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.

- -
-
Mais detalhes
- -

Um documento não é a mesma coisa que um arquivo, ele pode ou não estar armazenado em um arquivo.

- -

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.

- -

Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste exemplo de site de web:

- - - - - - - - - - - - - - - - - - - - -
HTMLpara paginas web
XMLpara documentos estruturados em geral
SVGpara gráficos
XULpara interfaces de usuários em Mozilla
- -

Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.

-
- -

Apresentar 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.

- -
-
Mais detalhes
- -

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 user agent (UA), no Brasil agente de usuário. Um navegador é apenas um UA. No entanto, na parte I deste Tutorial você vai apenas trabalhar com CSS no navegador.

- -

Para mais definições formais sobre  terminologia relacionadas com CSS, veja Definições na especificação CSS.

-
- -

Ação: Criando um documento

- -
    -
  1. Use seu computador para criar um novo diretório e um novo arquivo de texto dentro deste dire†ório. O arquivo terá o documento.
    2. -
  2. Copie e cole o código HTML abaixo . Salve o arquivo usando o nome doc1.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>
-
    -
    3. -
  3. No seu navegador, abra uma nova aba ou uma nova janela, e abra o arquivo que você acabou de salvar. -

    Você deve ver o texto  com as letras iniciais em negrito, como este:

    - - - - - - - -
    Cascading Style Sheets
    - -

    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.

    -
    4. -
- -

O que veremos depois?

- -

{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Seu documento ainda não usa CSS. Na próxima seção você usará CSS para especificar o estilo.

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 deleted file mode 100644 index 453aa4c966..0000000000 --- a/files/pt-br/web/css/getting_started/porque_usar_css/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Por que usar CSS? -slug: Web/CSS/Getting_Started/Porque_usar_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}Esta segunda parte do  CSS Getting Started 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.

- -

Informação: Por que usar CSS?

- -

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.

- -

Uma folha de estilo externa, tem muitas vantagens.:

- - - -
-
Exemplo
- -

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..

- -

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.

- -

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.

-
- -

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.

- -
-
Mais detalhes
- -

Uma linguagem de marcação como HTML também fornece maneiras de especificar estilo.

- -

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>.

- -

Quando você usa CSS, normalmente evita usar esses recursos da linguagem de marcação, para deixar informações de estilo em um unico lugar.

-
- -

Ação: Criando uma folha de estilo

- -
    -
  1. Crie outro arquivo de texto no mesmo diretório que o documento doc1.html você criou na primeira seção.
    2. -
  2. Salve seu documento como: style1.css. Este arquivo será sua folha de estilos.
    3. -
  3. Em seu CSS, cole a linha abaixo, e salve o arquivo: - 
    strong {color: red;}
-
    -
    4. -
- -

Linkando seu documento para sua folha de estilo

- -
    -
  1. Para linkar seu documento para sua folha de estilos, edite seu arquivo HTML. Adicionando o código abaixo: - 
    <!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>
-
    -
    2. -
  2. Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas: - - - - - - -
    Cascading Style Sheets
    -
    3. -
- -

{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}

- -
-
Desafio
- -

Além do vermelho, as CSS permitem que você escolha alguns outros nomes de cores.

- -

Encontre mais cinco nomes de cores que as CSS trabalham.

- -
-
Possible solution
- -

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

-Hide solution
-Veja a solução para este desafio.
- -

O que veremos?

- -

{{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  aprender mais sobre como seu navegador trabalha e exibe um documento.

diff --git a/files/pt-br/web/css/getting_started/seletores/index.html b/files/pt-br/web/css/getting_started/seletores/index.html deleted file mode 100644 index 3870c68936..0000000000 --- a/files/pt-br/web/css/getting_started/seletores/index.html +++ /dev/null @@ -1,430 +0,0 @@ ---- -title: Seletores -slug: Web/CSS/Getting_Started/Seletores -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Esta é a 5ª seção de Primeiros passos (Tutorial Css), 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.

- -

Informações: Seletores

- -

CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:

- -
strong {
-  color: red;
-}
-
- -

No CSS, este código inteiro é uma regra. Esta regra inicia com strong, que é um seletor. Ele seleciona os elementos do DOM aos quais a regra se aplica.

- -
-
Mais detalhes
- -

A parte dentro das chaves é a declaração.

- -

A palavra-chave color é uma propriedade e red é um valor.

- -

O ponto e vírgula depois do par propriedade-valor o separa de outros pares propriedade-valor na mesma declaração.

- -

Esse tutorial se refere ao seletor strong como um seletor de tag. A Especificação do CSS se refere a este seletor como seletor de tipo.

-
- -

Esta página de tutorial explica mais sobre os seletores que você pode utilizar nas regras CSS.

- -

Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.

- -

Dois atributos são especiais para o CSS. São eles o class e o id.

- -

Seletores com Classe

- -

Use o atributo class 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.

- -

Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.

- -

Seletores com ID

- -

Use o atributo id em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.

- -

Em seu CSS, digite cerquilha (#) antes do ID quanto estiver usando em um seletor ID.

- -
-
Exemplo
-Esta tag HTML tem tanto um atributo class quanto um atributo id: - -
<p class="chave" id="principal">
-
- -

O valor de id, principal, precisa ser unico no documento, mas outras tags no documento podem ter o atributo class com o mesmo nome, chave.

- -

Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe chave. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)

- -
.chave {
-  color: green;
-}
-
- -

Esta regra torna negrito um elemento com id principal:

- -
#principal {
-  font-weight: bolder;
-}
-
-
- -

Seletores de Atributo

- -

Você não está restrito aos dois atributos especiais, class e id. Você pode especificar outros atributos 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:

- -
-
[disabled]
-
Seleciona todos os elementos com o atributo "disabled".
-
[type='button']
-
Seleciona todos os elementos do tipo "button".
-
[class~=key]
-
Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). Funcionalmente equivalente a .key.
-
[lang|=es]
-
Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).
-
[title*="example" i]
-
Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.
-
a[href^="https://"]
-
Seleciona links seguros.
-
img[src$=".png"]
-
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.
-
- -

Seletores de pseudo-classes

- -

Uma pseudo-classe em CSS é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. Por exemplo  {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.

- -

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 CSS3 Selectors working spec.

- -
-
Syntax
- -
selector:pseudo-class {
-  property: value;
-}
-
-
- -

Lista de pseudo-classes

- - - -

Informação: Especificidade

- -

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 específico. 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.

- -
-
Mais detalhes
- -

Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor .key seleciona todos os elementos que têm a classe com o nome key. O seletor p.key seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe key.

-
- -

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.

- -

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.

- -

Information: Selectors based on relationships

- -

CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.

- - - - - - - - - - - - - - - - - - - - - - - - - -
Common selectors based on relationships
SelectorSelects
A EAny E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > EAny E element that is a child (i.e. direct descendant) of an A element
E:first-childAny E element that is the first child of its parent
B + EAny E element that is the next sibling of a B element (that is: the next child of the same parent)
- -

You can combine these to express complex relationships.

- -

You can also use the symbol * (asterisk) to mean "any element".

- -
-
Example
- -

An HTML table has an id attribute, but its rows and cells do not have individual identifiers:

- -
<table id="data-table-1">
-...
-<tr>
-<td>Prefix</td>
-<td>0001</td>
-<td>default</td>
-</tr>
-...
-
- -

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:

- -
    #data-table-1 td:first-child {text-decoration: underline;}
-    #data-table-1 td:first-child + td {text-decoration: line-through;}
-
- -

The result looks like:

- - - - - - - -
- - - - - - - - -
Prefix0001default
-
-
- -
-
More details
- -

In the usual way, if you make a selector more specific, then you increase its priority.

- -

If you use these techniques, you avoid the need to specify class or id attributes on so many tags in your document. Instead, CSS does the work.

- -

In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.

- -

For more examples about tables, see Tables in the CSS Reference page.

-
- -

Action: Using class and ID selectors

- -
    -
  1. Edit your HTML file, and duplicate the paragraph by copying and pasting it.
    2. -
  2. Then add id and class attributes to the first copy, and an id attribute to the second copy as shown below. Alternatively, copy and paste the entire file again: - 
    <!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>
-
    -
    3. -
  3. Now edit your CSS file. Replace the entire contents with: - 
    strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
    -
    4. -
  4. Save the files and refresh your browser to see the result: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    - -

    You can try rearranging the lines in your CSS file to show that the order has no effect.

    - -

    The class selectors .carrot and .spinach have priority over the tag selector strong.

    - -

    The ID selector #first has priority over the class and tag selectors.

    -
    5. -
- -
-
Challenges
- -
    -
  1. 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: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. Now change the rule you have just added (without changing anything else), to make the first paragraph blue too: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    3. -
- -
-
Possible solution
- -
    -
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: - - 
    #second { color: blue; }
-
    - A more specific selector, p#second also works.
    2. -
  2. Change the selector of the new rule to be a tag selector using p: - 
    p { color: blue; }
-
    -
    3. -
-Hide solution
-See a solution for the challenge.
- -

Action: Using pseudo-classes selectors

- -
    -
  1. Create an HTML file with following content: - 
    <!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>
-
    -
    2. -
  2. Now edit your CSS file. Replace the entire contents with: - 
    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;
-}
-
    -
    3. -
  3. Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect): - - - - - - -
    Go to our Home page  
    -
    4. -
- -

Action: Using selectors based on relationships and pseudo-classes

- -

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 pure-CSS dropdown menus (that is only CSS, without using JavaScript). The essence of this technique is the creation of a rule like the following:

- -
div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
- -

to be applied to an HTML structure like the following:

- -
<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>
-
- -

See our complete CSS-based dropdown menu example for a possible cue.

- -

What next?

- -

Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS easier to read.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

-- cgit v1.2.3-54-g00ecf