From 2c2df5ea01eb5cd8b9ea226b2869337e59c5fe3e Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:50:24 +0100 Subject: unslug pt-pt: move --- .../cascade_and_inheritance/index.html | 135 +++++ files/pt-pt/learn/css/building_blocks/index.html | 359 +++++++++++ .../learn/css/building_blocks/selectors/index.html | 208 +++++++ .../css/building_blocks/styling_tables/index.html | 655 +++++++++++++++++++++ .../building_blocks/values_and_units/index.html | 341 +++++++++++ files/pt-pt/learn/css/css_layout/index.html | 453 ++++++++++++++ files/pt-pt/learn/css/estilo_de_texto/index.html | 136 ----- .../first_steps/how_css_is_structured/index.html | 188 ++++++ .../learn/css/first_steps/how_css_works/index.html | 130 ++++ files/pt-pt/learn/css/first_steps/index.html | 92 +++ files/pt-pt/learn/css/howto/css_faq/index.html | 229 +++++++ files/pt-pt/learn/css/howto/faq_de_css/index.html | 229 ------- .../learn/css/howto/generated_content/index.html | 188 ++++++ .../learn/css/styling_text/fundamentals/index.html | 158 +++++ files/pt-pt/learn/css/styling_text/index.html | 136 +++++ .../css/styling_text/styling_lists/index.html | 362 ++++++++++++ 16 files changed, 3634 insertions(+), 365 deletions(-) create mode 100644 files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/pt-pt/learn/css/building_blocks/index.html create mode 100644 files/pt-pt/learn/css/building_blocks/selectors/index.html create mode 100644 files/pt-pt/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/pt-pt/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/pt-pt/learn/css/css_layout/index.html delete mode 100644 files/pt-pt/learn/css/estilo_de_texto/index.html create mode 100644 files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/pt-pt/learn/css/first_steps/how_css_works/index.html create mode 100644 files/pt-pt/learn/css/first_steps/index.html create mode 100644 files/pt-pt/learn/css/howto/css_faq/index.html delete mode 100644 files/pt-pt/learn/css/howto/faq_de_css/index.html create mode 100644 files/pt-pt/learn/css/howto/generated_content/index.html create mode 100644 files/pt-pt/learn/css/styling_text/fundamentals/index.html create mode 100644 files/pt-pt/learn/css/styling_text/index.html create mode 100644 files/pt-pt/learn/css/styling_text/styling_lists/index.html (limited to 'files/pt-pt/learn/css') diff --git a/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..b73abb297f --- /dev/null +++ b/files/pt-pt/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,135 @@ +--- +title: Cascata e herança +slug: Web/CSS/Como_começar/Cascata_e_herança +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}

+ +

Esta página esboça como folhas de estilo interagem numa cascata, e como os elementos subordinados herdam o estilo do elementos primários.

+ +

Você alterará à sua folha de estilo de amostra, usando herança para mudar o estilo de muitas partes do seu documento em um passo.

+ +

Informação: Cascata e herança

+ +

O estilo final para um elemento pode ser especificado em muitos lugares diferentes, que pode interagir num meio complexo. Esta interação complexa faz CSS poderoso, mas às vezes isto pode deixar confuso e difícil de depurar.

+ +

Três códigos principais de informação de estilo formam uma cascata. Eles são:

+ + + +

O estilo do usuário modifica o estilo padrão do navegador. O estilo do autor do documento então modifica algum outro estilo. Neste tutorial, você é o autor do seu documeto de amostra, e você trabalha somente com folhas de estilo do autor.

+ + + + + + + + +
Exemplo
Quando você lê este documento no seu navegador Mozilla, parte do estilo que você vê, vem do padrão do seu navegador para HTML. +

Parte do estilo deve vir das configurações do seu navegador em Opções, ou de um arquivo userConten.css no seu perfil no navegador.

+ +

Parte do seu estilo vem de folhas de estilo ligadas ao documento pelo server do wiki.

+
+ +


+ Quando você abre seu documento de amostra no seu navegador, os elementos STRONG são mais fortes do que o resto do texto. Isto vem do estilo padrão do seu navegador para o HTML.

+ +

Os elementos STRONG são vermelhos, Isto vem da sua folha de estilo de amostra.

+ +

Os elementos STRONG as vezes também herdam muito do estilo de elemento P, pois eles são subordinados. No mesmo caminho, o elemento P herda muito do estilo do elemento BODY.

+ +

Para estilos em cascata, o autor das folhas de estilo tem prioridade, depois o leitor das folhas de estilo, e por último o padrão do navegador.

+ +

Para estilos em herança, um nó subordinado tem prioridade sobre o estilo que herdou do nó principal.

+ +

Estas não são as únicas propriedades que se aplicam. Uma página posterior neste turorial explicará mais.

+ + + + + + + + +
Mais detalhes
CSS às vezes providencia um meio para o leitor anular o estilo do autor do documento, usando a palavra-chave !important. +

Este meio é para o autor do documento, você não pode sempre predizer exatamente o que os leitores verão.

+ +

Se você quer saber todos os detalhes sobre cascata e herança, veja Assigning property values, Cascading, and Inheritance na CSS Specification.

+
+ +

Ação: Usando herança

+ +

Edite seu arquivo de amostra CSS.

+ +

Adicione esta linha copiando e colando isto. Não importa realmente se você adicionar a linha antes ou depois da que já está lá. Entretando, adicionar isto no topo é mais lógico pois no seu documento o elemento P é primário ao elemento STRONG:

+ +
p {color: blue; text-decoration: underline;}
+
+ +

Agora atualize seu navegador para ver o efeito no seu documento de amostra. O sublinhado afeta todo o texto no parágrafo, incluindo as letras iniciais. Os elementos STRONG herdaram o estilo sublinhado do elemento primário P.

+ +

Mas os elementos STRONG ainda são vermelhos. A cor vermelha é própria do estilo, então isto tem prioridade sobre a cor azul do seu elemento primário P.

+ + + + + + + + +
+ + + + + + + +
Antes
Cascading Style Sheets
+ 		+ + + + + + + +
Depois
Cascading Style Sheets
+
+ +

 

+ + + + + + + + +
Desafio
Mude sua folha de estilo deixando somente as letras vermelhas sublinhadas: + + + + + + +
Cascading Style Sheets
+
+ +

 

+ +

O que vem depois?

+ +

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

+ +

Sua folha de estilo de amostra especifica o estilo para os tags, P e STRONG, mudando o estilo dos elementos correspondentes em todo o seu documento original. A próxima página descreve como espeficar estilos em meios mais seletivos: Seletores

+ +

{{ PreviousNext("CSS:Como começar:Como o CSS trabalha", "CSS:Como começar:Seletores") }}

diff --git a/files/pt-pt/learn/css/building_blocks/index.html b/files/pt-pt/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..dff3dfb0ac --- /dev/null +++ b/files/pt-pt/learn/css/building_blocks/index.html @@ -0,0 +1,359 @@ +--- +title: Caixas +slug: Web/CSS/Como_começar/Caixas +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +

{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}

+ +

Esta página descreve como você pode usar as CSS para controlar o espaço que um elemento ocupa quando é exibido.

+ +

Em seu documento de amostra, você muda o espaçamento e adiciona regras decorativas.

+ +

Informação: Caixas

+ +

Quando seu navegador exibe um elemento, o elemento ocupa um espaço. Existem quatro partes do espaço que ele ocupa.

+ +

No meio, está o espaço que o elemento precisa para exibir seu conteúdo. Em torno disso, está o enchimento. Em torno disso, está a borda. Em torno disso, está a margem.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

A paleta cinza mostra partes da disposição.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Isto é o que você vê em seu navegador.

+
+ +

O enchimento, a borda e a margem podem ter diferentes tamanhos no topo, na direita, em baixo e na esquerda do elemento. Qualquer ou todos estes tamanhos podem ser zero.

+ +

O enchimento é sempre da mesma cor do fundo do elemento. Então quando você configura a cor de fundo, você vê a cor aplicada ao próprio elemento e ao seu enchimento. A margem é sempre transparente.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

O elemento tem um fundo verde.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

É isto que você vê no seu navegador.

+
+ +

Bordas

+ +

Você pode usar bordas para decorar elementos com linhas ou caixas.

+ +

Para especificar a mesma borda em torno de todo o elemento, use a propriedade border. Especifique a largura (usualmente em pixels para exibir na tela), o estilo, e a cor.

+ +

Os estilos são:

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

Você pode também configurar o estilo para none ou hidden para remover a borda explicitamente, ou configurar a cor para transparent para fazer a borda invisível sem mudar a disposição.

+ +

Para especificar bordas em um lado de cada vez, use as propriedades: border-top, border-right, border-bottom, border-left. Você pode usar isto para especificar uma borda em somente um lado, ou diferentes bordas em diferentes lados.

+ + + + + + + + +
Exemplos
Esta regra configura a cor de fundo e a borda do topo dos elementos do cabeçalho: +
+ 
+h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+
+
+ +

O resultado deve ser como este:

+ + + + + + + +
+

Cabeçalho elegante

+
+ +


+ Esta regra faz as imagens fáceis de ver dando-as uma borda com um cinza-médio em toda a volta:

+ +
+ 
+img {border: 2px solid #ccc;}
+
+
+ +

O resultado deve ser como este:

+ + + + + + + + +
Imagem:Image:Blue-rule.png
+
+ +

Margens e enchimento

+ +

Use margens e enchimento para ajustar a posição dos elementos e para criar espaços ao redor deles.

+ +

Use a propriedade margin ou a propriedade padding para configurar a largura da margem ou do enchimento respectivamente.

+ +

Se você especificar uma largura, isto se aplicará em torno de todo o elemento (topo, direita, baixo e esquerda).

+ +

Se você especificar duas larguras, a primeira se aplicará ao topo e à baixo, e a segunda à direita e à esquerda.

+ +

Você pode especificar todas as quatro larguras na ordem: topo, direita, baixo, esquerda.

+ + + + + + + + +
Exemplo
Esta regra diferencia parágrafos com a classe remark dando-os uma borda vermelha em toda a sua volta. +

O Enchimento em toda a volta separa um pouco a borda do texto.

+ +

Uma margem esquerda identifica o parágrafo relativo ao resto do texto:

+ +
+ 
+p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+
+ +

O resultado deve ser como este:

+ + + + + + + +
+

Aqui está um parágrafo normal.

+ +

Aqui está um com observação.

+
+
+ + + + + + + + +
Mais detalhes
Quando você usa margens e enchimento para ajustar o modo como os elementos são exibidos, suas regras de estilo interagem com o padrão dos navegadores de maneiras que podem ser complexas. +

Navegadores diferentes exibem os elementos diferentemente. Os resultados podem ser similares antes de sua folha de estilo mudar coisas. Algumas vezes isto pode fazer sua folha de estilo dar resultados surpreendedores.

+ +

Para ter o resultado que você precisa, você pode ter que mudar a marcação do seu documento. A próxima página deste tutorial tem mais informações sobre isto.

+ +

Para informações detalhas sobre enchimento, margens e bordas, veja Box model em CSS Specification.

+
+ +

Ação: Adicionando bordas

+ +

Edite seu arquivo CSS. Adicione esta regra para desenhar uma linha até o fim da página sobre cada cabeçalho:

+ +
+
h3 {border-top: 1px solid gray;}
+
+
+ +

Se você pegou o desafio na página anterior, modifique a regra que você criou, se não, adicione esta nova regra para adicionar um espaço em baixo de cada item da lista:

+ +
+
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+
+ +

Atualize seu navegador para ver o resultado:

+ + + + + + + +
+

(A) Os oceanos

+ +
    +
  • Ártico
    • +
  • Atlântico
    • +
  • Pacífico
    • +
  • Índico
    • +
  • Antártico
    • +
+ +

(B) Parágrafos numerados

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ + + + + + + + +
Desafio
Adicione uma regra à sua folha de estilo, fazendo um borda larga em toda a volta dos oceanos em uma cor que te lembre o mar — algo como isto: + + + + + + +
+

(A) Os oceanos

+ +
+
    +
  • Ártico
    • +
  • Atlântico
    • +
  • Pacífico
    • +
  • Índico
    • +
  • Antártico
    • +
+
+ +

(B) Parágrafos numerados

+ +

. . .

+
+ +

(Não é necessário fazer exatamente com a largura e a cor que usadas aqui.)

+
+ +

O que vem depois

+ +

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

+ +

Especificando margens e enchimento, você modificou a disposição do seu documento. Na próxima página você poderá mudar a disposição do seu documento de outras maneiras: Disposição

+ +

{{ PreviousNext("CSS:Como começar:Listas", "CSS:Como começar:Disposição") }}

diff --git a/files/pt-pt/learn/css/building_blocks/selectors/index.html b/files/pt-pt/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..f9d4505614 --- /dev/null +++ b/files/pt-pt/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,208 @@ +--- +title: Seletores +slug: Web/CSS/Como_começar/Seletores +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +

{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}

+ +

Esta página explica como você pode aplicar estilos seletivamente, e como diferentes tipos de seletor têm propriedades diferentes.

+ +

Você adiciona alguns atributos às tags do seu documento de amostra, e usa estes atributos em sua folha de estilo de amostra.

+ +

Informação: Seletores

+ +

CSS tem sua própria terminologia para descrever a linguagem CSS. Anteriormente neste tutorial, você criou uma linha em sua folha de estilo com esta:

+ +
+
strong {color: red;}
+
+
+ +

Na terminologia das CSS, esta linha inteira é uma regra. Esta regra começa com STRONG, que é um seletor. Isto seleciona que elementos no DOM a regra se aplicará.

+ + + + + + + + +
Mais detalhes
A parte interior 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 separa isto de outros pares propriedade-valor na mesma descrição.

+ +

Este tutorial refere-se a um seletor STRONG, como um seletor de tag. A Especificação das CSS refere-se a isto como um seletor de tipo.

+
+ +

Esta página do tutorial explica mais sobre os seletores que você pode usar nas regras das CSS.

+ +

Em adição aos nomes de tags, você pode usar valores de atributo nos seletores. Isto permite a você que as regras tornem-se mais específicas.

+ +

Dois atributos tem estado especial para as CSS. Eles são class e id.

+ +

Use o atributo class em uma tag para nomear a tag com um nome de classe. Isto é, o nome que você escolher para a classe.

+ +

Na sua folha de estilo, digite um registro completo (período) antes do nome de classe quando você usá-lo em um seletor.

+ +

Use o atributo id em uma tag para nomear a tag com um nome de id. Isto é, o nome que você escolher para o id. O nome do id deve ser único no documento.

+ +

Na sua folha de estilo, digite um sinal de número (#) antes do id quando você usá-lo em um seletor.

+ + + + + + + + +
Exemplos
Este tag HTML tem ambos os atributos class e id. +
+ 
+<P class="key" id="principal">
+
+
+ +

O id, principal, deve ser o único no documento, mas outras tags no documento podem ter o mesmo nome de classe, key.

+ +

Em uma folha de estilo CSS, esta regra faz todos os elementos da classe key verdes. (Eles podem não ser todos elementos P.)

+ +
+ 
+.key {color: green;}
+
+
+ +

Esta regra faz um elemento com o id principal negrito:

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

Se mais de uma regra se aplicar a um elemento e especificar a mesma propriedade, então CSS dará prioridade para a regra que tiver o seletor mais específico. Um seletor id é mais específíco que um seletor classe, que por sua vez é mais específico que um seletor tag.

+ + + + + + + + +
Mais detalhes
Você pode combinar seletores para fazer um seletor mais específico. +

Por exemplo, o seletor .key seleciona todos os elementos que tem o nome de classe key. O seletor p.key seleciona somente os elementos P que tiverem o nome de classe key.

+ +

Você não está restrito aos dois atributos especiais, class e id. Você pode especificar outros atributos igualando entre colchetes. Por exemplo, o seletor {{ mediawiki.external('type=button') }} seleciona todos os elementos que tiverem um atributo type com o valor button.

+ +

Uma página posterior deste tutorial (Tabelas) tem informações sobre seletores complexos baseados em parentescos.

+ +

Para um informação completa sobre seletores, veja Selectors na CSS Specification.

+
+ +

Se sua folha de estilo tiver regras conflitantes e elas estiverem igualmente especificadas, então CSS dará prioridade para a regra que foi especificada por último na folha de estilo.

+ +

Quando você tiver um problema com regras conflitantes, tente resolvê-lo fazendo uma das regras mais especificada, então ela terá prioridade. Se você não puder fazer isto, tente mover uma das regras para mais perto do fim da folha de estilo, então esta terá prioridade.

+ +

Ação: Usando seletores de classe e id

+ +

Edite seu arquivo HTML, e duplique o paragrafo copiando e colando-o. Então adicione os atributos de id e classe na primeira cópia, e um id na segunda cópia como mostrado abaixo. Um alternativa é copiar e colar o arquivo inteiro novamente:

+ +
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+  <HEAD>
+  <TITLE>Documento de amostra</TITLE>
+  <LINK rel="stylesheet" type="text/css" 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>
+
+
+ +

Agora edite seu arquivo CSS. Substitua os componentes inteiros com:

+ +
+
strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+
+
+ +


+ Atualize seu navegador para ver o resultado:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +


+ Você pode tentar re-dispor as linhas no seu arquivo CSS para mostrar que a ordem não muda o efeito.

+ +

Os seletores de classe .carrot e .spinach tem prioridade sobre o seletor de tag STRONG.

+ +

O seletor id #first tem prioridade sobre a classe o os seletores de tag.

+ + + + + + + + +
Desafios
Sem mudar seu arquivo HTML, adicione uma única regra para seu arquivo CSS deixando todas as letras iniciais da mesma cor que estão agora, mas fazendo todo o segundo parágrafo aparecer em azul: + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

Agora mude a regra que você acabou de adicionar (sem mudar mais nenhuma coisa), para fazer o primeiro parágrafo em azul também:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+
+ +

O que vem depois?

+ +

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

+ +

Sua folha de estilo de amostra está começando a parecer densa e complicada. A próxima página descreve caminhos para fazer o CSS mais fácil de ler: CSS legível

+ +

{{ PreviousNext("CSS:Como começar:Cascata e herança", "CSS:Como começar:CSS legível") }}

diff --git a/files/pt-pt/learn/css/building_blocks/styling_tables/index.html b/files/pt-pt/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..ff21a00c82 --- /dev/null +++ b/files/pt-pt/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,655 @@ +--- +title: Tabelas +slug: Web/CSS/Como_começar/Tabelas +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +

{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}

+ +

Esta página descreve seletores mais avançados, e algumas maneiras específicas para estilizar tabelas.

+ +

Você cria um novo documento de amostra contendo uma tabela, e uma folha de estilo para isto.

+ +

Informação: Mais seletores

+ +

CSS possui algumas maneiras para selecionar elementos baseadas nas relações entre eles. Você pode usá-las para fazer seletores que sejam mais específicos.

+ +

Aqui está um sumário de seletores baseados em relações:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SeletorSeleciona
A EQualquer elemento E que seja descendente de um elemento A (isso é: um subitem, ou um subitem de um sub item, etc.)
A > EQualquer elemento E que seja subitem de um elemento A
E:first-childQualque elemento E que seja o primeiro subitem do seu principal
B + EQualquer elemento E que seja o próximo irmão de um elemento B (isso é: o próximo subitem do mesmo principal)
+ +

Você pode combinar isto para expressar relações complexas.

+ +

Você pode também usar o símbolo * (asterisco) para dizer "qualquer elemento".

+ + + + + + + + +
Exemplo
Uma tabela HTML tem um atributo id, mas suas linhas e células não tem identificadores individuais: +
+ 
+<TABLE id="data-table-1">
+...
+<TR>
+<TD>Prefix</TD>
+<TD>0001</TD>
+<TD>default</TD>
+</TR>
+...
+
+
+ +

Estas regras fazem a primeira célula em cada linha em negrito, e a segunda célula em cada linha monoespaçada. Elas afetam somente uma tabela específica no documento:

+ +
+
    +
  1. data-table-1 td:first-child {font-weight: bolder;}
    2. +
  2. data-table-1 td:first-child + td {font-family: monospace;}
    3. +
+
+ +

O resultado é algo como isto:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ + + + + + + + +
Mais detalhes
De maneira usual, se você faz um seletor mais específico então você aumenta sua prioridade. +

Usando estas técnicas, você evita precisar especificar atributos class ou id em muitas tags no seu documento. Em vez disso, CSS faz o trabalho.

+ +

Em grandes projetos onde a velocidade é importante, você pode fazer suas folhas de estilo mais eficientes evitando regras complexas que dependem da relação entre elementos.

+ +

Para detalhes completos sobre seletores, veja Selectors em CSS Specification.

+
+ +

Informação: Tabelas

+ +

Uma tabela é um arranjo de informação em uma grade retangular. Algumas tabelas podem ser complexas, e para tabelas complexas diferentes navegadores podem exibir diferentes resultados.

+ +

Quando você desenha seu documento, use e a tabela para expressar as relações entre as peças da informação. Então não importará se os diferentes navegadores apresentarem a informação de maneiras levemente diferentes, pois o significado ainda pode ser compreendido.

+ +

Não use tabelas de maneiras não usuais para produzir disposições visuais particulares. As técnicas na página anterior deste tutorial (Disposição) são melhores para isto.

+ +

Estrutura da tabela

+ +

Em uma tabela, cada peça de informação é exibida em uma célula.

+ +

As células em uma linha horizontal na página compõem uma linha.

+ +

Em algumas tabelas, as linhas podem ser agrupadas. Um grupo especial de linhas no começo da tabela é o cabeçalho. Um grupo especial de linhas no final da tabela é o rodapé. As linhas principais na tabela são o corpo, e elas podem também estar em grupos.

+ +

As células em uma linha vertical na página compõem uma coluna, mas as colunas têm usos limitados nas tabelas das CSS.

+ + + + + + + + +
Exemplo
A tabela de seletores próxima ao topo desta página tem dez células em cinco linhas. +

A primeira linha é o cabeçalho. As outras quatro linhas são o corpo. Não há um rodapé.

+ +

Ela tem duas colunas.

+
+ +

Este tutorial somente cobre tabelas simples, onde os resultados são razoavelmente previsíveis. Em uma tabela simples, toda célula ocupa somente uma linha e coluna. Você pode usar CSS para tabelas complexas onde células expandam (extendam-se sobre) mais do que uma linha ou coluna, mas tabelas como estas estão fora do escopo deste tutorial básico.

+ +

Bordas

+ +

Células não têm margens.

+ +

Células têm bordas e enchimento. Por padrão, as bordas são separadas pelo valor da propriedade border-spacing da tabela. Você pode também remover o espaçamento completamente configurando a propriedade border-collapse da tabela para collapse.

+ + + + + + + + +
Exemplo
Aqui estão três tabelas. +

A tabela da esquerda tem espaçamento de borda 0.5 em. A tabela do centro tem espaçamento da borda zero. A tabela da direita tem bordas unidas:

+ + + + + + + + + +
+ + + + + + + + + + + +
PausCopas
OurosEspadas
+ 		+ + + + + + + + + + + +
PausCopas
OurosEspadas
+ 		+ + + + + + + + + + + +
PausCopas
OurosEspadas
+
+
+ +

Subtítulos

+ +

Um subtítulo é uma etiqueta que se aplica à tabela inteira. Por padrão, isto é mostrado no topo da tabela.

+ +

Para mover isto para o fim, configure a propriedade caption-side para bottom. A propriedade é herdada, então alternativamente você pode configurar isto na tabela em outro elemento ascendente.

+ +

Para estilizar o texto do subtítulo, use qualquer das propriedades usuais para texto.

+ + + + + + + + +
Exemplo
Esta tabela tem um subtítulo no fim: +
+ 
+#demo-table > caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+  }
+
+
+ + + + + + + +
+ + + + + + + +
Naipes
+ + + + + + + + + + + +
PausCopas
OurosEspadas
+
+
+
+ +

Células vazias

+ +

Você pode exibir células vazias (isto é, suas bordas e fundos) especificando empty-cells: show; para o elemento da tabela.

+ +

Você pode escondê-los especificando empty-cells:hide;. Então, se um elemento principal tem um fundo e o chama, isto mostra através da célula vazia.

+ + + + + + + + +
Exemplo
Estas tabelas tem um fundo de verde pálido. Suas células tem um fundo de cinza pálido e bordas de cinza escuro. +

Na esquerda da tabela, a célula vazia é mostrada. Na direita, é escondida:

+ + + + + + + + +
+ + + + + + + + + + + +
 Copas
OurosEspadas
+ 		+ + + + + + + + + + + +
 Copas
OurosEspadas
+
+
+ + + + + + + + +
Mais detalhes
Para informações detalhasdas sobre tabelas, veja Tables em CSS Specification. +

A informação lá vai além do que há neste tutorial, mas não cobre as diferenças entre os navegadores que podem afetar tabelas complexas.

+
+ +

Ação: Estilizando uma tabela

+ +

Faça um novo documento HTML, doc3.html. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:

+ +
+
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+<HEAD>
+<TITLE>Documento de amostra 3</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style3.css">
+</HEAD>
+<BODY>
+
+<TABLE id="demo-table">
+<CAPTION>Oceanos</CAPTION>
+
+<THEAD>
+<TR>
+<TH></TH>
+<TH>Área</TH>
+<TH>Profundidade Média</TH>
+</TR>
+<TR>
+<TH></TH>
+<TH>milhões de km<SUP>2</SUP></TH>
+<TH>m</TH>
+</TR>
+</THEAD>
+
+<TBODY>
+<TR>
+<TH>Ártico</TH>
+<TD>13,000</TD>
+<TD>1,200</TD>
+</TR>
+<TR>
+<TH>Atlântico</TH>
+<TD>87,000</TD>
+<TD>3,900</TD>
+</TR>
+<TR>
+<TH>Pacífico</TH>
+<TD>180,000</TD>
+<TD>4,000</TD>
+</TR>
+<TR>
+<TH>Índico</TH>
+<TD>75,000</TD>
+<TD>3,900</TD>
+</TR>
+<TR>
+<TH>Antártico</TH>
+<TD>20,000</TD>
+<TD>4,500</TD>
+</TR>
+</TBODY>
+
+<TFOOT>
+<TR>
+<TH>Total</TH>
+<TD>361,000</TD>
+<TD></TD>
+</TR>
+<TR>
+<TH>Média</TH>
+<TD>72,000</TD>
+<TD>3,800</TD>
+</TR>
+</TFOOT>
+
+</TABLE>
+
+</BODY>
+</HTML>
+
+
+ +

Crie uma nova folha de estilo, style3.css. Copie e cole o conteúdo daqui, tendo certeza que você rolou a tela para pegar tudo isto:

+ +
+
/*** Estilo para doc3.html (Tabelas) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+  }
+
+#demo-table > caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+  }
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+  }
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+  }
+
+
+/* header */
+#demo-table > thead > tr:first-child > th {
+  text-align: center;
+  color: blue;
+  }
+
+#demo-table > thead > tr + tr > th {
+  font-style: italic;
+  color: gray;
+  }
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+  }
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+  }
+
+#demo-table tbody th:after {
+  content: ":";
+  }
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+  }
+
+#demo-table tfoot th {
+  color: blue;
+  }
+
+#demo-table tfoot th:after {
+  content: ":";
+  }
+
+#demo-table > tfoot td {
+  background-color: #cee;
+  }
+
+#demo-table > tfoot > tr:first-child td {
+  border-top: .2em solid #7a7;
+  }
+
+
+ +

Abra o documento no seu navegador. Deve ser muito similar a este:

+ + + + + + + +
+
+

Oceanos

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 ÁreaProfundidade média
 milhões de km2m
Ártico:13,0001,200
Atlântico:87,0003,900
Pacífico:180,0004,000
Índico:75,0003,900
Antártico:20,0004,500
Total:361,000 
Média:72,0003,800
+
+
+
+ +

Compare estas regras em sua folha de estilo com a tabela exibida, para se assegurar de que entende o efeito de cada regra. Se você achou uma regra com a qual não está seguro sobre, descomente-a e atualize o navegador para ver o que acontece.

+ +

Aqui estão algumas notas sobre esta tabela:

+ + + + + + + + + + +
Desafios
Mude a folha de estilo para fazer a tabela parecer com isto: + + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 ÁreaProfundidade média
 milhões de km2m
Ártico:13,0001,200
Atlântico:87,0003,900
Pacífico:180,0004,000
Índico:75,0003,900
Antártico:20,0004,500
Total:361,000 
Média:72,0003,800
+
+ +

Oceanos

+
+
+
+ +

O que vem depois?

+ +

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

+ +

Esta é a última página deste tutorial que foca as propriedades e valores das CSS. Para um sumário completo de propriedades e valores, veja Full property table em CSS Specification.

+ +

A próxima página mostra novamente o propósito e a estrutura das folhas de estilo CSS: Mídia

+ +

{{ PreviousNext("CSS:Como começar:Disposição", "CSS:Como começar:Mídia") }}

diff --git a/files/pt-pt/learn/css/building_blocks/values_and_units/index.html b/files/pt-pt/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..d5c15375d7 --- /dev/null +++ b/files/pt-pt/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,341 @@ +--- +title: Cor +slug: Web/CSS/Como_começar/Cor +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +

{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}

+ +

Esta página explica mais sobre como você pode especificar cores no CSS.

+ +

Em sua folha de estilo de amostra, você é introduzido nas cores de fundo.

+ +

Informação: Cor

+ +

Neste tutorial até agora, você usou um limitado número de cores nomeadas. CSS 2 suporta ao todo 17 cores nomeadas. Alguns dos nomes podem não ser o que você espera:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 black gray silver white 
primáriasred lime blue 
secundáriasyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
+ +

 

+ + + + + + + + +
Mais detalhes
Seu navegador pode suportar muitas cores nomeadas, como: + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+ +

Para detalhes sobre esta lista extendida, veja: SVG color keywords no CSS 3 Color Module. Cuidado ao usar cores nomeadas, pois seu navegador pode não suportar.

+
+ +


+ Para uma paleta maior, específica de cores de componentes vermelho, verde ou azul você precisa usar um sinal numérico (#) e três digitos hexadecimais na faixa de 0 – 9 e a – f. As letras a – f representam os valores 10 – 15:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
+ +


+ Para a paleta total, especifique dois digitos hexadecimais por cada componente:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
+ +

Você pode usualmente pegar estes seis digitos em código hexadeximal de seu programa de imagens ou alguma outra ferramenta.

+ + + + + + + + + + + +
Exemplos
Com uma pequena prática, você pode ajustar as cores de três digitos manualmente para a maioria dos propósitos: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Começe com vermelho puro: #f00
Para tornar isto mais pálido, adicione um pouco de verde e azul: #f77
Para tornar isto mais alaranjado, adicione um pouquinho mais de verde: #fa7
Para tornar isto mais escuro, reduza todos os componentes: #c74
Para reduzir a saturação, faça os componentes mais parecidos: #c98
Se você quiser deixar todos os componentes iguais, você obterá cinza: #ccc
+
Para uma sombra pastel como azul pálido: + + + + + + + + + + + + + +
Começe com branco puro: #fff
Reduza um pouco os outros componentes: #eef
+
+ + + + + + + + +
Mais detalhes
Você pode também especificar uma cor usando valores decimais RGB na faixa de 0 – 255, ou porcentagens. +

Por exemplo, este marrom (vermelho escuro):

+ +
+ 
+rgb(128, 0, 0)
+
+
+ +


+ Para maiores detalhes sobre como especificar cores, veja: Colors na CSS Specification.

+ +

Para informação sobre sistema de cores combinadas como o Menu and ThreeDFace, veja: CSS2 System Colors na CSS Specification.

+
+ +

Propriedades de cor

+ +

Você já usou a propriedade color para textos.

+ +

Você também já usou a propriedade background-color para mudar elementos de fundo.

+ +

Fundos podem ser configurados para transparent para remover qualquer cor explicitamente, reavaliando os elementos principais do fundo.

+ + + + + + + + +
Exemplo
As caixas de Exemplo neste tutorial usam este fundo amarelo pálido: +
+ 
+background-color: #fffff4;
+
+
+ +

As caixas de Mais detalhes usam esta paleta cinza:

+ +
+ 
+background-color: #f4f4f4;
+
+
+
+ +

Ação: Usando códigos de cor

+ +

Edite seu arquivo CSS. Faça a mudança mostrada aqui em negrito, para dar às letras iniciais um fundo azul pálido. (O layout e os comentários no seu arquivo irão provavelmente diferir do arquivo mostrado aqui. Mantenha o layout e os comentários como você preferir.)

+ +
+
/*** CSS Tutorial: Página de Cor ***/
+
+/* Fonte da Página */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* Parágrafos */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* Letras Iniciais */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
+
+
+ +

Atualize seu navegador para ver o resultado:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ + + + + + + + +
Desafio
No seu arquivo CSS, mude todos os nomes das cores para o código de cor com três digitos sem afetar o resultado. +

(Isto não pode ser feito exatamente, mas você pode deixar parecido. Para fazer isso exatamente você precisa do código com seis dígitos, e você precisa olhar a Especificação CSS ou usar uma ferramenta gráfica para converter as cores.)

+
+ +

O que vem depois?

+ +

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

+ +

Seu documento de amostra e sua folha de estilo de amostra separam rigorosamente o conteúdo do estilo.

+ +

A próxima página explica como você pode fazer exceções para separar rigorosamente: Conteúdo

+ +

{{ PreviousNext("CSS:Como começar:Estilos de texto", "CSS:Como começar:Conteúdo") }}

diff --git a/files/pt-pt/learn/css/css_layout/index.html b/files/pt-pt/learn/css/css_layout/index.html new file mode 100644 index 0000000000..0612aad9b5 --- /dev/null +++ b/files/pt-pt/learn/css/css_layout/index.html @@ -0,0 +1,453 @@ +--- +title: Disposição +slug: Web/CSS/Como_começar/Disposição +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/Layout +--- +

{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}

+ +

Esta página descreve algumas maneiras para ajustar a disposição do seu documento.

+ +

Você muda a disposição do seu documento de amostra...

+ +

Informação: Disposição

+ +

Você pode usar as CSS para especificar vários efeitos visuais que mudam a disposição do seu documento. Algumas técnicas para especificação da disposição são avançadas,e além do alcance deste tutorial básico.

+ +

Quando você desenha uma disposição que aparece similar em vários navegadores, sua folha de estilo interage com a folha de estilo padrão do navegador e o motor de disposição em alguns caminhos pode se tornar complexo. Isto é também uma matéria avançada, além do alcance deste tutorial básico.

+ +

Esta página descreve algumas técnicas simples que você pode tentar.

+ +

Estrutura do documento

+ +

Se você quer controlar a disposição do seu documento, então você pode ter que mudar sua estrutura.

+ +

A linguagem de marcação do seu documento pode ter tags com propósito geral para criar a estrutura. Por exemplo, no HTML você pode usar a tag DIV para criar a estrutura.

+ + + + + + + + +
Exemplo
No seu documento de amostra, os parágrafos numerados sob o segundo título não tem um "recipiente" próprio. +

Sua folha de estilo não pode desenhar uma borda ao redor destes parágrafos, porque não há elemento especificado no seletor.

+ +

Para fixar este problema estrutural, você pode adicionar uma tag DIV em torno dos parágrafos. Esta tag é única, então isto pode ser identificado por um atributo id:

+ +
+ 
+<H3 class="numbered">Parágrafos numerados</H3>
+<DIV id="numbered">
+<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>
+</DIV>
+
+
+ +

Agora sua folha de estilo pode use uma regra para especificar bordas em tordo de ambas as listas:

+ +
+ 
+ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+  }
+
+
+ +

O resultado deve ser como este:

+ + + + + + + +
+

(A) Os oceanos

+ +
+
    +
  • Ártico
    • +
  • Atlântico
    • +
  • Pacífico
    • +
  • Índico
    • +
  • Antártico
    • +
+
+ +

(B) Parágrafos numerados

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+
+ +

Tamanhos das unidades

+ +

Anteriormente neste tutorial, você especificou tamanhos em pixels (px). Estes são apropriados para alguns propósitos em um dispositivo de exposição como uma tela de computador. Mas quando o usuário muda o tamanho da fonte, sua disposição pode ficar errada.

+ +

Para muitos propósitos é melhor especificar tamanhos com porcentagem ou em ems (em). Um em é nominalmente o tamanho da fonte corrente (a largura de uma letra m). Quando o usuário muda o tamanho da fonte, sua disposição ajusta-se automaticamente.

+ + + + + + + + +
Exemplo
A borda da esquerda deste texto tem o tamanho especificado em pixels. +

A borda da direita tem o tamanho especificado em ems. No seu navegador, mude o tamanho da fonte para ver como a borda da direita se ajusta mas a borda da esquerda não:

+ + + + + + + +
+
Redimensione-me por favor
+
+
+ + + + + + + + +
Mais detalhes
Para outros dispositivos, outras unidades de comprimento são apropriadas. +

Há mais informação sobre isto em uma página anterior deste tutorial.

+ +

Para detalhes completos sobre os valores e unidades que você pode usar, veja Values em CSS Specification.

+
+ +

Disposição do texto

+ +

Duas propriedades especificam como o conteúdo de um elemento é alinhado. Você pode usá-las para ajustes simples na disposição:

+ + + +
+
Alinha o conteúdo. Use um destes valores: left, right, center, justify
+
+ + + +
+
Indenta o conteúdo, colocando o espaço que você especificar.
+
+ +

Estas propriedades aplicam-se a qualquer conteúdo como texto no elemento, não somente ao texto atual. Lembre-se que elas são herdadas pelo elemento filho, então você pode ter que desativá-las nos elementos filhos para não se surpreender com os resultados.

+ + + + + + + + +
Exemplo
Para centralizar títulos: +
+ 
+h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+  }
+
+
+ +

Resulta em:

+ + + + + + + +
+

(A) Os oceanos

+
+ +

Em um documento HTML, o conteúdo que você vê abaixo do título não é contido estruturalmente pelo título. Então quando você alinha um título como isto, as tags abaixo do título não são afetadas pela herança.

+
+ +

Flutuantes

+ +

A propriedade float força um elemento para a esquerda ou direita. Isto é uma maneira simples de controlar sua posição e tamanho.

+ +

O resto do conteúdo do documento normalmente flui ao redor do elemento flutuado. Você pode controlar isto usando a propriedade clear em outros elementos para fazê-los permanecer sem flutuantes.

+ + + + + + + + +
Exemplo
Em seu documento de amostra, as listas esticam através da janela. Você pode prevenir isto flutuando-os para a esquerda. +

Para manter os títulos no lugar, você precisa também especificar que eles permaneçam limpos de flutuantes à sua esquerda:

+ +
+ 
+ul, #numbered {float: left;}
+h3 {clear: left;}
+
+
+ +

O resultado deve se parecer com isto:

+ + + + + + + +
+

(A) Os oceanos

+ +
+
    +
  • Ártico
    • +
  • Atlântico
    • +
  • Pacífico
    • +
  • Índico
    • +
  • Antártico
    • +
+
+ +

(B) Parágrafos numerados

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+ +

(Um pequeno enchimento é necessário à direita das caixas, onde a borda fica muito perto do texto.)

+
+ +

Posicionamento

+ +

Você pode especificar a posição dos elementos de quatro maneiras, especificando a propriedade position e um dos valores seguintes:

+ +

Estas são propriedades avançadas. É possível usá-las de maneiras simples — esta é a razão pela qual elas são mencionadas neste tutorial básico. Mas usando-as para disposições complexas pode-se dificultar.

+ + + +
+
A posição do elemento é alterada relativamente à sua posição normal.
+
Use-o para mover um elemento por uma quantidade especificada. Às vezes você pode usar a margem do elemento para obter o mesmo efeito.
+
+ + + +
+
A posição do elemento é fixa.
+
Especifique a posição do elemento relativa à janela do documento. Mesmo que o resto do documento seja rolado, o elemento permanece fixo.
+
+ + + +
+
A posição do documento é fixada relativamente a um elemento pai.
+
Somente um elemento pai que esteja posicionado com relative, fixed ou absolute o fará.
+
+ +
+
Você pode tornar qualquer elemento principal apropriado, especificando position: relative; sem especificar qualquer movimento.
+
+ + + +
+
O padrão. Use este valor caso precise desativar a posição explicitamente.
+
+ +

Agora, com estes valores da propriedade position (exeto para static), especifique uma ou mais propriedades: top, right, bottom, left, width, height para identificar onde você quer que o elemento apareça, e talvez também seu tamanho.

+ + + + + + + + +
Exemplo
Para posicionar dois elementos no topo, crie um "recipiente" principal em seu documento com os dois elementos dentre dele: +
+ 
+<DIV id="parent-div">
+<P id="forward">/</P>
+<P id="back">\</P>
+</DIV>
+
+
+ +

Na sua folha de estilo, faça a posição principal relative. Ela não precisa que seja especificado qualquer movimento atual. Faça a posição subordinada absolute:

+ +
+ 
+#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+  }
+
+#forward, #back {
+  position: absolute;
+  margin:0px;
+  top: 0px;
+  left: 0px;
+  }
+
+#forward {
+  color: blue;
+  }
+
+#back {
+  color: red;
+  }
+
+
+ +

O resultado deve ser como isto, com a contra barra (\) sobre a barra (/):

+ +
+

/

+ +

\

+
+ + + + + + + +
 
+ +

 

+
+ + + + + + + + +
Mais detalhes
A história completa sobre posicionamento toma dois complexos capítulos em CSS Specification: Visual formatting model e Visual formatting model details. +

Se você está desenhando folhas de estilo para trabalharem em vários navegadores, então você também precisa levar em conta as diferenças na maneira em que os navegadores interpretam o padrão, e talvez bugs em algumas versões de alguns navegadores.

+
+ +

Ação: Especificando a disposição

+ +

Mude seu documento de amostra e sua folha de estilo usando os exemplos anteriores nas seções Estrutura do documento e Flutuantes.

+ +

No exemplo dos Flutuantes, adicione enchimento para separar o texto da borda direita por 0,5 em.

+ + + + + + + + +
Desafio
Mude seu documento de amostra, adicionando esta tag perto do fim, somente antes de </BODY> + 
+<IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+ +

Se você não baixou o arquivo de imagem anteriormente neste tutorial, baixe-o agora:

+ + + + + + + +
Image:Yellow-pin.png
+ +

Prediga onde a imagem irá aparecer no seu documento. Então atualize seu navegador para ver se você estava certo.

+ +

Adicione uma regra à sua folha de estilo que fixe a imagem no topo e a direita do seu documento.

+ +

Atualize seu navegador e diminua o tamanho da janela. Cheque se a imagem permanece no topo e a direita mesmo que você role seu documento:

+ +
+
+

(A) Os oceanos

+ +
+
    +
  • Ártico
    • +
  • Atlântico
    • +
  • Pacífico
    • +
  • Índico
    • +
  • Antártico
    • +
+
+ +

(B) Parágrafos numerados

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +

 

+ +
Yellow map pin
+
+
+
+ +

O que vem depois?

+ +

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

+ +

A próxima página descreve seletores para regras mais avançadas das CSS, e algumas maneiras específicas de estilizar tabelas: Tabelas

+ +

{{ PreviousNext("CSS:Como começar:Caixas", "CSS:Como começar:Tabelas") }}

diff --git a/files/pt-pt/learn/css/estilo_de_texto/index.html b/files/pt-pt/learn/css/estilo_de_texto/index.html deleted file mode 100644 index 5d00bc90c5..0000000000 --- a/files/pt-pt/learn/css/estilo_de_texto/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Estilizar texto -slug: Learn/CSS/Estilo_de_texto -tags: - - CSS - - Hiperligações - - Principiante - - Texto - - Tipos de Letra - - letra - - lina - - listas - - modulo - - sombra - - tipo de letra - - tipos de letra da Web -translation_of: Learn/CSS/Styling_text ---- -
{{LearnSidebar}}
- -

Com os conceitos básicos da linguagem CSS cobertos, o próximo tópico de CSS para se concentrar será o estilo de texto - uma das coisas mais comuns que irá fazer com CSS. Aqui, nós vamos ver os fundamentos do estilo de texto, incluindo a configuração do tipo de letra, negrito, itálico, espaçamento de linha e letra, sombras e outros recursos de texto. Nós completamos o módulo ao analisar a aplicação de tipos de letra personalizadas para a sua página, e listas de estilo e hiperligações.

- -

Pré-requisitos

- -

Before starting this module, you should already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.

- -
-

Nota: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin, CodePen or Thimble.

-
- -

Guias

- -

This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.

- -
-
Fundamental text and font styling
-
In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
-
Styling lists
-
Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.
-
Styling links
-
When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.
-
Web fonts
-
Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.
-
- -

Avaliações

- -

The following assessments will test your understanding of the text styling techniques covered in the guides above.

- -
-
Typesetting a community school homepage
-
In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.
-
- -
- - - - - -
diff --git a/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html b/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..08ede46aa3 --- /dev/null +++ b/files/pt-pt/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,188 @@ +--- +title: CSS legível +slug: Web/CSS/Como_começar/CSS_legível +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +

{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}

+ +

Esta página discute o estilo e a gramática da linguagem CSS.

+ +

Você muda a maneira em que seu arquivo de amostra CSS é exibido, para torná-lo mais legível.

+ +

Informação: CSS legível

+ +

Você pode adicionar espaço em branco e comentários na sua folha de estilo para fazê-la mais legível. Você pode também juntar seletores de grupo, quando as mesmas regras de estilo se aplicam aos elementos selecionados em meios diferentes.

+ +

Espaço em branco

+ +

Espaços em branco significam espaços reais, tabs e quebras de linha. Você pode adicionar espaços em branco para tornar suas folhas de estilo mais legíveis.

+ +

Seu arquivo de amostra de CSS atualmente tem uma regra por linha, e quase o mínimo de espaço em branco. Em uma uma folha de estilo complexa esta disposição pode dificultar a leitura, dificultando também a manutenção da sua folha de estilo.

+ +

A disposição que você escolhe é usualmente um preferência pessoal, mas se suas folhas de estilo são parte de projetos compartilhados, estes projetos podem ter suas próprias convenções.

+ + + + + + + + +
Exemplos
Algumas pessoas gostam de uma diposição compacta que temos usado, somente dividindo a linha quando ela se torna muito longa: + 
+.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+ +

Algumas pessoas preferem uma propriedade-valor por linha:

+ +
+ 
+.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+
+ +

Algumas pessoas usam tabs – dois espaços, quatro espaços, ou um tab são comuns:

+ +
+ 
+.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+
+ +

Algumas pessoas gostam de enfileirar a linha verticalmente (mas é difícil de manter uma disposição assim):

+ +
+ 
+.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+
+ +

Algumas pessoas usam tabs para a disposição. Algumas pessoas usam somente espaços.

+
+ +

Comentários

+ +

Comentários em CSS começam com /* e terminam com */.

+ +

Você pode usar comentários para fazer comentários reais na sua folha de estilo, e também para descomentar partes que estiverem temporariamente para propósito de testes.

+ +

Para comentar parte da folha de estilo, coloque a parte em um comentário então o navegador ignorará isso. Tome cuidado onde você começa e termina o seu comentário. O resto da sua folha de estilo ainda deve ter a sintaxe correta.

+ + + + + + + + +
Exemplo
+
+ 
+/* Estilo para a letra C inicial no primeiro parágrafo */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+
+ +

Seletores agrupados

+ +

Quando muitos elementos tiverem o mesmo estilo, você pode especificar um grupo de seletores, separando-os com comentários. A declaração se aplica a todos os elementos selecionados.

+ +

Em outra parte da sua folha de estilo você pode especificar os mesmos seletores, de novo individualmente, para aplicar estilo individual às suas regras.

+ + + + + + + + +
Exemplo
Esta regra faz os elementos H1, H2 and H3 da mesma cor. +

Isto é conveniente para especificar a cor em somente um lugar, no caso em que precisa ser alterado.

+ +
+ 
+/* cores para os cabeçalhos */
+h1, h2, h3 {color: navy;}
+
+
+
+ +

Ação: Adicionando comentários e melhorando o arranjo

+ +

Edite seu arquivo CSS, e assegure-se que ele tem todas as regras nele (em qualquer ordem):

+ +
+
strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
+
+ +

Faça isto mais legível rearranjando isto em um meio que possa ser achado lógicamente, adicionando espaços em branco e comentários da maneira que você achar melhor.

+ +

Salve o arquivo e atualize a tela do seu navegador, assegure-se que as mudanças que você fez não afetaram o modo como a folha de estilo trabalha:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ + + + + + + + +
Desafio
Comente parte de sua folha de estilo, sem mudar qualquer coisa, para fazer a primeira letra de seu documento vermelha: + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

(Existe mais de uma maneira de fazer isto.)

+
+ +

O que vem depois?

+ +

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

+ +

Seu documento de amostra usou o texto em itálico e o texto com sublinhado. A próxima página descreve mais caminhos para especificar a aparência do texto no seu documento: Estilos de texto

+ +

{{ PreviousNext("CSS:Como começar:Seletores", "CSS:Como começar:Estilos de texto") }}

diff --git a/files/pt-pt/learn/css/first_steps/how_css_works/index.html b/files/pt-pt/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..bd667439ff --- /dev/null +++ b/files/pt-pt/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,130 @@ +--- +title: Como o CSS trabalha +slug: Web/CSS/Como_começar/Como_o_CSS_trabalha +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +--- +

{{ PreviousNext("CSS:Como começar:Porque usar CSS", "CSS:Como começar:Cascata e herança") }}

+ +

Esta página explica como o CSS trabalha no seu navegador. Você analiza seu documento de amostra, reavaliando os detalhes do seu estilo.

+ +

Informação: Como o CSS trabalha

+ +

Quando o Mozilla exibe um documento, é necessário combinar o conteúdo do documento com seu estilo de informação. Então o documento é processado em dois estágios:

+ + + + + +

Uma linguagem de marcação usa tags para definir a estrutura do documento. Uma tag pode armazenar outras tags entre seu início e fim.

+ +

Um DOM tem a estrutura como a de uma árvore. Cada tag e período do texto na linguagem de marcação torna-se um nó na estrutura da árvore. Os nós do DOM não são armazenadores. Em substituição, eles são primários aos nós subordinados.

+ +

Os nós que correspondem a tags também são conhecidos por elementos.

+ + + + + + + + +
Exemplo
No seu documento de amostra, a tag <p> e seu fim </p> criam um armazenamento: +
+ 
+<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+
+ +

No DOM, o corespondente ao nó P é um primário. Os subordinados são os nós STRONG e os nós do texto. Os nós STRONG são os primários, e os nós do texto são os subordinados.

+ +
+

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

+
+
+ +

O entendimento do DOM ajuda-o a projetar, depurar e manter seu CSS, pois o DOM é onde o seu CSS e o conteúdo do documento se unem.

+ +

Ação: Analizando um DOM

+ +

Para analizar um DOM, você precisa de um software especial. Aqui, você usa o DOM Inspector (DOMi) da Mozilla para analizar um DOM.

+ +

Use seu navegador Mozilla para abrir seu documento simples.

+ +

Na barra de menu do seu navegador, escolha Ferramentas – DOM Inspector, ou talvez Ferramentas – Desenvolvimento Web – DOM Inspector.

+ + + + + + + + +
Mais detalhes
Se seu navegador Mozilla não tem o DOMi, você pode reinstalá-lo assegurando-se de escolher para instalar o componente de ferramentas da web. Então retorne a este tutorial. +

Se você não quiser instalar o DOMi, você pode pular esta seção e ir diretamente para a próxima página. Pulando esta seção você não interfere com o resto deste tutorial.

+
+ +


+ No DOMi, expanda os nós do seu documento clicando em suas flechas.

+ +

Nota: O espaçamento em seu arquivo HTML faz com que o DOMi mostre alguns nós de texto vazios, que você pode ignorar.

+ +

O resultado deve ser parecido com isto, dependendo do que você tenha expandido:

+ + + + + + + +
+
+

│
+ ▼╴P │ │ │ ▼╴STRONG │ │ └#text │ ├╴#text │ ▶╴STRONG │ │

+
+
+ +

Quando você seleciona algum nó, você pode usar o painel direito do DOMi para achar mais sobre ele. Por exemplo, quando você seleciona um nó do texto, DOMi mostra para você o texto no painel da direita.

+ +

Quando você seleciona um elemento nó, DOMi o analiza e fornece uma enorme quantidade de informações no seu painel direito. A informação sobre estilo é somente uma parte das informações que ele fornece.

+ + + + + + + + +
Desafio
No DOMi, clique no nó STRONG. +

Use o painel direito do DOMi para achar onde fica a cor do nó (vermelho) e onde sua aparência é mais forte que o texto normal (negrito).

+
+ +

O que vem depois?

+ +

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

+ +

Se você tomou o desafio, você viu o estilo da informação em mais de um lugar interagir para criar o estilo final para um elemento.

+ +

A próxima página explica mais sobre estas interações: Cascata e herança

+ +

{{ PreviousNext("CSS:Como começar:Porque usar CSS", "CSS:Como começar:Cascata e herança") }}

diff --git a/files/pt-pt/learn/css/first_steps/index.html b/files/pt-pt/learn/css/first_steps/index.html new file mode 100644 index 0000000000..fa514756bd --- /dev/null +++ b/files/pt-pt/learn/css/first_steps/index.html @@ -0,0 +1,92 @@ +--- +title: Como começar +slug: Web/CSS/Como_começar +tags: + - CSS + - 'CSS:Como_começar' + - Todas_as_Categorias +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

 

+ +

Introdução

+ +

Este tutorial o introduz às CSS (Cascading Style Sheets - Folhas de Estilo em Cascata).

+ +

Este tutorial o orienta nos recursos básicos de CSS com exemplos práticos que você pode experimentar sozinho em seu computador. Ele é dividido em duas partes:

+ + + + + +

Este tutorial é baseado na CSS 2.1 Specification.

+ +

Quem deve ler este tutorial?

+ +

Este tutorial é direcionado para iniciantes em CSS, mas você também poderá usá-lo caso tenha alguma experiência em CSS.

+ +

Se você é um iniciante em CSS, leia a Parte I deste tutorial para entender CSS e aprender a usá-lo. Em seguida, leia a Parte II para entender o escopo de CSS no Mozilla.

+ +

Se você conhece CSS, poderá ignorar as partes desse tutorial que já conhece e ler apenas as partes que lhe interessam.

+ +

Se você já tem experiência em CSS mas não no Mozilla, pode ir direto para a Parte II.

+ +

O que você precisa antes de começar?

+ +

Para melhor aproveitar este tutorial, você precisa de um editor de arquivos de texto e um navegador Mozilla (Firefox, Mozilla Suite ou Seamonkey). Você também deve saber como utilizá-los de um modo básico.

+ +

Se não deseja editar arquivos, você pode apenas ler o tutorial e observar as imagens, mas este não é o melhor modo de aprendizado.

+ +

Poucas partes deste tutorial podem requerer outro software Mozilla. Essas partes são opcionais. Você pode ignorar essas partes se não desejar fazer o download de outro software Mozilla.

+ +

Nota: As CSS oferece modos de se trabalhar com cores, de modo que partes deste tutorial dependem de cores. Você poderá utilizar essas partes facilmente somente se tiver um monitor colorido e uma visão colorida normal.

+ +

Como utilizar este tutorial

+ +

Para utilizar este tutorial, leia cuidadosamente as páginas e em seqüência. Se perder uma página, você poderá ter dificuldades para entender as páginas posteriores.

+ +

Em cada página, utilize a seçãoInformações para entender como o CSS funciona. Utilize a seçãoAções para tentar usar o CSS em seu próprio computador.

+ +

Para testar seus conhecimentos, faça o teste ao final de cada página. As soluções para alguns testes são reveladas nas páginas posteriores no tutorial.

+ +

Para se aprofundar em CSS, leia as informações nas caixas entituladasMais detalhes. Utilize os links para localizar informações referentes às CSS.

+ +

Tutorial Parte I

+ +

Um guia passo-a-passo para CSS.

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

Tutorial Parte II

+ +

Exemplos que mostram o escopo da CSS no Mozilla.

+ +
    +
  1. JavaScript
    2. +
  2. XBL bindings
    3. +
  3. Interfaces de usuário XUL
    4. +
  4. Gráficos SVG
    5. +
  5. Dados XML
    6. +
+ +

{{ languages( { "en": "en/CSS/Getting_Started", "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", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git a/files/pt-pt/learn/css/howto/css_faq/index.html b/files/pt-pt/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..357e271657 --- /dev/null +++ b/files/pt-pt/learn/css/howto/css_faq/index.html @@ -0,0 +1,229 @@ +--- +title: Perguntas Frequentes sobre CSS +slug: Learn/CSS/Howto/FAQ_de_CSS +tags: + - CSS + - Exemplo + - FAQ + - Guía + - Web + - questões +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

Why doesn't my CSS, which is valid, render correctly?

+ +

Browsers use the DOCTYPE declaration to choose whether to show the document using a mode that is more compatible  with Web standards or with old browser bugs. Using a correct and modern DOCTYPE declaration at the start of your HTML will improve browser standards compliance.

+ +

Modern browsers have two main rendering modes:

+ + + +

Gecko-based browsers, have a third Almost Standards Mode that has only a few minor quirks.

+ +

This is a list of the most commonly used DOCTYPE declarations that will trigger Standards or Almost Standards mode:

+ +
<!DOCTYPE html> /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
+                   parser, this is the recommended doctype */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+ +

When at all possible, you should just use the HTML5 doctype.

+ +

Why doesn't my CSS, which is valid, render at all?

+ +

Here are some possible causes:

+ + + +

What is the difference between id and class?

+ +

HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.

+ + + +

It is generally recommended to use classes as much as possible, and to use ids only when absolutely necessary for specific uses (like to connect label and form elements or for styling elements that must be semantically unique):

+ + + +
+

Note: See Selectors for more information.

+
+ +

How do I restore the default value of a property?

+ +

Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property. For example:

+ +
/* Heading default color is black */
+h1 { color: red; }
+h1 { color: black; }
+ +

This has changed with CSS 2; the keyword initial is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.

+ +
/* Heading default color is black */
+h1 { color: red; }
+h1 { color: initial; }
+ +

How do I derive one style from another?

+ +

CSS does not exactly allow one style to be defined in terms of another. (See Eric Meyer's note about the Working Group's stance). However, assigning multiple classes to a single element can provide the same effect, and CSS Variables now provide a way to define style information in one place that can be reused in multiple places.

+ +

How do I assign multiple classes to an element?

+ +

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant.

+ +

Why don't my style rules work properly?

+ +

Style rules that are syntactically correct may not apply in certain situations. You can use DOM Inspector's CSS Style Rules view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.

+ +

HTML elements hierarchy

+ +

The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.

+ +
.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+<!-- news item text is black, but corporate name is red and in bold -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+
+ +

In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.

+ +

Explicitly re-defined style rule

+ +

In CSS stylesheets, order is important. If you define a rule and then you re-define the same rule, the last definition is used.

+ +
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  other rules             */
+/*  other rules             */
+/*  other rules             */
+.stockSymbol { font-weight: normal; }
+
+<!-- most text is in bold, except "GE", which is red and not bold -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.

+ +

Use of a shorthand property

+ +

Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to their default values. This means that a previous rule for a single attribute could be implicitly overridden.

+ +
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order is important.

+ +
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now set to normal */
+}
+
+ +

Use of the * selector

+ +

The * wildcard selector refers to any element, and it has to be used with particular care.

+ +
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+
+ +

In this example the body * selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So font-weight: bold; applied to the .corpName class is overridden by font-weight: normal; applied to all elements in the body.

+ +

The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.

+ +

Specificity in CSS

+ +

When multiple rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) has the highest specificity and will override any selectors, followed by ID selectors, then class selectors, and eventually element selectors. The text color of the below {{htmlelement("div")}} will therefore be red.

+ +
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+ +

The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the CSS 2.1 Specification chapter 6.4.3.

+ +

What do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do?

+ +

These properties, called prefixed properties, are extensions to the CSS standard. They allow use of experimental and non-standard features in browsers without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.

+ +

The use of such properties on production websites is not recommended — they have already created a huge web compatibility mess. For example, many developers only using the -webkit- prefixed version of a property when the non-prefixed version is supported across all browsers meant that a feature relying on that property would break in non-webkit-based browsers, completely needlessly. This problem got so bad that other browsers started to implement -webkit- prefixed aliases to improve web compatibility, as specified in the Compatibility Living Standard.

+ +

In fact most browsers now do not use CSS prefixes when implementing experimental features, insteading implementing those features only on Nightly browser versions or similar.

+ +

If you need to use prefixes in your work, you are advised to write your code in a way that uses the prefixed versions first, but then includes a non-prefixed standard version afterwards so it can automatically override the prefixed versions where supported. For example:

+ +
-ms-transform: rotate(90deg);
+-webkit-transform: rotate(90deg);
+transform: rotate(90deg);
+ +
+

Note: For more information on dealing with prefixed properties, see Handling common HTML and CSS problems — Handling CSS prefixes from our Cross-browser testing module.

+
+ +
+

Note: See the Mozilla CSS Extensions page for more information on the Mozilla-prefixed CSS properties.

+
+ +

How does z-index relate to positioning?

+ +

The z-index property specifies the stack order of elements.

+ +

An element with a higher z-index/stack order is always rendered in front of an element with a lower z-index/stack order on the screen. Z-index will only work on elements that have a specified position (position:absolute, position:relative, or position:fixed).

+ +
+

Nota: For more information, see our Positioning learning article, and in particular the Introducing z-index section.

+
diff --git a/files/pt-pt/learn/css/howto/faq_de_css/index.html b/files/pt-pt/learn/css/howto/faq_de_css/index.html deleted file mode 100644 index 357e271657..0000000000 --- a/files/pt-pt/learn/css/howto/faq_de_css/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Perguntas Frequentes sobre CSS -slug: Learn/CSS/Howto/FAQ_de_CSS -tags: - - CSS - - Exemplo - - FAQ - - Guía - - Web - - questões -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -

Why doesn't my CSS, which is valid, render correctly?

- -

Browsers use the DOCTYPE declaration to choose whether to show the document using a mode that is more compatible  with Web standards or with old browser bugs. Using a correct and modern DOCTYPE declaration at the start of your HTML will improve browser standards compliance.

- -

Modern browsers have two main rendering modes:

- - - -

Gecko-based browsers, have a third Almost Standards Mode that has only a few minor quirks.

- -

This is a list of the most commonly used DOCTYPE declarations that will trigger Standards or Almost Standards mode:

- -
<!DOCTYPE html> /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
-                   parser, this is the recommended doctype */
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
-"http://www.w3.org/TR/html4/loose.dtd">
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
- -

When at all possible, you should just use the HTML5 doctype.

- -

Why doesn't my CSS, which is valid, render at all?

- -

Here are some possible causes:

- - - -

What is the difference between id and class?

- -

HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.

- - - -

It is generally recommended to use classes as much as possible, and to use ids only when absolutely necessary for specific uses (like to connect label and form elements or for styling elements that must be semantically unique):

- - - -
-

Note: See Selectors for more information.

-
- -

How do I restore the default value of a property?

- -

Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property. For example:

- -
/* Heading default color is black */
-h1 { color: red; }
-h1 { color: black; }
- -

This has changed with CSS 2; the keyword initial is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.

- -
/* Heading default color is black */
-h1 { color: red; }
-h1 { color: initial; }
- -

How do I derive one style from another?

- -

CSS does not exactly allow one style to be defined in terms of another. (See Eric Meyer's note about the Working Group's stance). However, assigning multiple classes to a single element can provide the same effect, and CSS Variables now provide a way to define style information in one place that can be reused in multiple places.

- -

How do I assign multiple classes to an element?

- -

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.

- -
<style type="text/css">
-.news { background: black; color: white; }
-.today { font-weight: bold; }
-</style>
-
-<div class="news today">
-... content of today's news ...
-</div>
-
- -

If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the class attribute is not relevant.

- -

Why don't my style rules work properly?

- -

Style rules that are syntactically correct may not apply in certain situations. You can use DOM Inspector's CSS Style Rules view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.

- -

HTML elements hierarchy

- -

The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.

- -
.news { color: black; }
-.corpName { font-weight: bold; color: red; }
-
-<!-- news item text is black, but corporate name is red and in bold -->
-<div class="news">
-   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
-</div>
-
- -

In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.

- -

Explicitly re-defined style rule

- -

In CSS stylesheets, order is important. If you define a rule and then you re-define the same rule, the last definition is used.

- -
#stockTicker { font-weight: bold; }
-.stockSymbol { color: red; }
-/*  other rules             */
-/*  other rules             */
-/*  other rules             */
-.stockSymbol { font-weight: normal; }
-
-<!-- most text is in bold, except "GE", which is red and not bold -->
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</div>
-
- -

To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.

- -

Use of a shorthand property

- -

Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to their default values. This means that a previous rule for a single attribute could be implicitly overridden.

- -
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
-.stockSymbol { font: 14px Arial; color: red; }
-
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</div>
-
- -

In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order is important.

- -
#stockTicker {
-   font-weight: bold;
-   font: 12px Verdana;  /* font-weight is now set to normal */
-}
-
- -

Use of the * selector

- -

The * wildcard selector refers to any element, and it has to be used with particular care.

- -
body * { font-weight: normal; }
-#stockTicker { font: 12px Verdana; }
-.corpName { font-weight: bold; }
-.stockUp { color: red; }
-
-<div id="section">
-   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
-</div>
-
- -

In this example the body * selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So font-weight: bold; applied to the .corpName class is overridden by font-weight: normal; applied to all elements in the body.

- -

The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.

- -

Specificity in CSS

- -

When multiple rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) has the highest specificity and will override any selectors, followed by ID selectors, then class selectors, and eventually element selectors. The text color of the below {{htmlelement("div")}} will therefore be red.

- -
div { color: black; }
-#orange { color: orange; }
-.green { color: green; }
-
-<div id="orange" class="green" style="color: red;">This is red</div>
-
- -

The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the CSS 2.1 Specification chapter 6.4.3.

- -

What do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do?

- -

These properties, called prefixed properties, are extensions to the CSS standard. They allow use of experimental and non-standard features in browsers without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.

- -

The use of such properties on production websites is not recommended — they have already created a huge web compatibility mess. For example, many developers only using the -webkit- prefixed version of a property when the non-prefixed version is supported across all browsers meant that a feature relying on that property would break in non-webkit-based browsers, completely needlessly. This problem got so bad that other browsers started to implement -webkit- prefixed aliases to improve web compatibility, as specified in the Compatibility Living Standard.

- -

In fact most browsers now do not use CSS prefixes when implementing experimental features, insteading implementing those features only on Nightly browser versions or similar.

- -

If you need to use prefixes in your work, you are advised to write your code in a way that uses the prefixed versions first, but then includes a non-prefixed standard version afterwards so it can automatically override the prefixed versions where supported. For example:

- -
-ms-transform: rotate(90deg);
--webkit-transform: rotate(90deg);
-transform: rotate(90deg);
- -
-

Note: For more information on dealing with prefixed properties, see Handling common HTML and CSS problems — Handling CSS prefixes from our Cross-browser testing module.

-
- -
-

Note: See the Mozilla CSS Extensions page for more information on the Mozilla-prefixed CSS properties.

-
- -

How does z-index relate to positioning?

- -

The z-index property specifies the stack order of elements.

- -

An element with a higher z-index/stack order is always rendered in front of an element with a lower z-index/stack order on the screen. Z-index will only work on elements that have a specified position (position:absolute, position:relative, or position:fixed).

- -
-

Nota: For more information, see our Positioning learning article, and in particular the Introducing z-index section.

-
diff --git a/files/pt-pt/learn/css/howto/generated_content/index.html b/files/pt-pt/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..523c408aad --- /dev/null +++ b/files/pt-pt/learn/css/howto/generated_content/index.html @@ -0,0 +1,188 @@ +--- +title: Conteúdo +slug: Web/CSS/Como_começar/Conteúdo +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Howto/Generated_content +--- +

{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}

+ +

Esta página descreve algumas maneiras que você pode usar no CSS para adicionar conteúdo quando um documento é exibido.

+ +

Você modifica sua folha de estilo para adicionar conteúdo de texto e uma imagem.

+ +

Informação: Conteúdo

+ +

Uma das vantagens importantes das CSS é que ele o ajuda a separar o estilo do documento do seu conteúdo. Mas há situações onde faz sentido especificar certo conteúdo como parte de sua folha de estilo, não como parte do seu documento.

+ +

O conteúdo especificado em uma folha de estilo pode consistir em texto ou imagens. Você especifica o conteúdo em sua folha de estilo quando o conteúdo tem uma ligação próxima à estrutura do documento.

+ + + + + + + + +
Mais detalhes
Especificar o conteúdo em uma folha de estilo pode causar complicações. Por exemplo, você pode ter versões diferentes da língua do seu documento que compartilham uma folha de estilo. Se parte da folha de estilo tem que ser traduzida, isto mostra que você precisa por estas partes da folha de estilo em arquivos separados e arrumá-los para então ligá-los com a versão apropriada da língua do seu documento. +

Estas complicações não surgem se o conteúdo que você especificou consistir em símbolos ou imagens que se aplicam em todas as línguas e culturas.

+ +


+ O conteúdo especificado em uma folha de estilo não se tornará parte do DOM.

+
+ +

Conteúdo do texto

+ +

CSS pode inserir um texto antes ou depois de um elemento. Para especificar isto, faça uma regra e adicione :before ou :after ao seletor. Na declaração, especifique a propriedade content com o conteúdo do texto como seu valor.

+ + + + + + + + +
Exemplo
Esta regra adiciona o texto Referência: antes de todo elemento com a classe ref: +
+ 
+.ref:before {
+  font-weight: bold;
+  color: navy;
+  content: "Referência: ";
+  }
+
+
+
+ + + + + + + + +
Mais detalhes
O caractere de configuração de uma folha de estilo é por padrão o UTF-8, mas isto pode ser especificado na ligação, na própria folha de estilo ou por outras maneiras. Para detalhes, veja 4.4 CSS style sheet representation na CSS Specification. +

Caracteres individuais podem às vezes ser especificados por um mecanismo de escape que use o contra barra (\) com o caráter de escape. Por exemplo, \265B é um símbolo do xadrez para a rainha preta ♛. Para detalhes, veja Referring to characters not represented in a character encoding e também Characters and case em CSS Specification.

+
+ +

Conteúdo da imagem

+ +

Para adicionar uma imagem antes ou depois de um elemento, você pode especificar a URL de um arquivo de imagem no valor da propriedade content.

+ + + + + + + + +
Exemplo
Esta regra adiciona um espaço e um ícone depois de cada ligação da classe glossary: +
+ 
+a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+
+
+
+ +


+ Para adicionar uma imagem ao fundo de um elemento, especifique a URL de um arquivo de imagem no valor da propriedade background. Isto é uma propriedade que especifica a cor do fundo, a imagem, como a imagem repete, e alguns outros detalhes.

+ + + + + + + + +
Exemplo
Esta regra configura o fundo de um elemento específico, usando uma URL para especificar um arquivo de imagem. +

O seletor especifica o id do elemento. O valor no-repeat faz a imagem aparecer apenas uma vez:

+ +
+ 
+#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+
+
+
+ + + + + + + + +
Mais detalhes
Para informações sobre propriedades individuais que afetam o fundo, e sobre outras opções que você pode especificar para as imagens de fundo, veja The background na CSS Specification.
+ +

Ação: Adicionando uma imagem de fundo

+ +

Esta imagem é um quadrado branco com uma linha azul em baixo. Baixe o arquivo desta imagem no mesmo diretório do seu arquivo CSS:

+ + + + + + + +
Image:Blue-rule.png
+ +

(Por exemplo, clique com o botão direito sobre isto para abrir o menu de contexto, então escolha Salvar Imagem Como... e especifique o diretório que você está usando para este tutorial.)

+ +

Edite o seu arquivo CSS e adicione esta regra ao corpo, configurando a imagem de fundo para a página inteira.

+ +
+
background: url("Blue-rule.png");
+
+
+ +

O valor repeat é o padrão, então isto não precisa ser especificado. A imagem é repetida horizontal e verticalmente, dando a aparência parecida com a de um papel de escrita com linhas:

+ +
+

Image:Blue-rule-ground.png

+ +
+
+

Cascading Style Sheets

+
+ +
+

Cascading Style Sheets

+
+
+
+ + + + + + + + +
Desafio
Baixe esta imagem: + + + + + + +
Image:Yellow-pin.png
+ +

Adicione uma regra à sua folha de estilo então isto mostrará a imagem no começo de cada linha:

+ +
+

Image:Blue-rule-ground.png

+ +
+
image:Yellow-pin.png Cascading Style Sheets
+ +
image:Yellow-pin.png Cascading Style Sheets
+
+
+
+ +

O que vem depois?

+ +

Uma maneira comum de adicionar conteúdo à folha de estilo é marcar os itens em listas. Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

+ +

A próxima página descreve como especificar o estilo para elementos de listas: Listas

+ +

{{ PreviousNext("CSS:Como começar:Cor", "CSS:Como começar:Listas") }}

diff --git a/files/pt-pt/learn/css/styling_text/fundamentals/index.html b/files/pt-pt/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..373688d00f --- /dev/null +++ b/files/pt-pt/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,158 @@ +--- +title: Estilos de texto +slug: Web/CSS/Como_começar/Estilos_de_texto +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +

{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}

+ +

Esta página dá mais exemplos de estilos de texto.

+ +

Você modifica sua folha de estilo de amostra para usar diferentes fontes.

+ +

Informação: Estilos de texto

+ +

CSS tem várias propriedades para estilos de texto.

+ +

Há uma conveniente propriedade de abreviação de caracteres/palavras que facilitam a escrita, font, que você pode usar para especificar várias coisas de uma vez — por exemplo:

+ + + + + + + + + + +
Exemplo
+
+ 
+p {font: italic 75%/125% "Comic Sans MS", cursive;}
+
+
+ +

Esta regra coloca várias propriedades da fonte, fazendo todos os parágrafos em itálico.

+ +

O tamanho da fonte é três quartos (75%) do tamanho em cada elemento do paragrafo principal e a altura da linha é 125% (um pouco mais espaçada que o normal).

+ +

O tipo da fonte é Comic Sans MS, mas se a fonte não estiver disponível então o navegador usará sua fonte cursiva padrão (escrita a mão).

+ +

A regra tem o efeito colateral de desativar o negrito e as letras minúsculas (colocando-os no estilo normal)

+
+ +

Tipos de fonte

+ +

Você não pode predizer quais fontes os leitores do seu documento terão. Então quando você especifica tipos de fonte é uma boa idéia colocar uma lista de alternativas em ordem de preferência.

+ +

Acabe a lista com um dos tipos de fontes internas padrão: serif, sans-serif, cursive, fantasy ou monospace. (Algumas destas podem ser configuradas nas Opções do seu navegador.)

+ +

Se o tipo não for suportado por algumas características no documento, então o navegador pode substituí-lo por um tipo diferente. Por exemplo, o documento pode conter caracteres especiais que a fonte não suporte. Se o navegador puder encontrar outra fonte que tenha os caracteres, então ele usará a outra fonte.

+ +

Para especificar um tipo de fonte por conta própria, use a propriedade font-family.

+ +

Tamanho da fonte

+ +

Leitores que usam os navegadores Mozilla podem configurar o tamanho padrão das fontes em Opções, e mudar o tamanho do texto quando lêem uma página, isso a torna boa para você usá-la com tamanho relativos onde você puder.

+ +

Você pode usar alguns valores internos para o tamanho das fontes, como: small, medium e large. Você pode também usar valores relativos para o tamanho das fontes do elemento primário, como: smaller, larger, 150% ou 1.5em.

+ +

Se necessário você pode especificar um tamanho atual, como: 12px (12 pixels) para um instrumento de exibição ou 12pt (12 pontos) para uma impressora. Este tamanho é nominalmente a largura de uma letra m, mas fontes variam na maneira do tamanho, você vê relatos do tamanho que você especifica.

+ +

Para especificar um tamanho de fonte por conta própria, use a propriedade font-size.

+ +

Altura da linha

+ +

A altura da linha especifica o espaçamento entre linhas. Se seu documento tem longos parágrafos com muitas linhas, um espaçamento mais largo que o normal faz com que a leitura seja mais fácil, especialmente se o tamanho da fonte for pequeno.

+ +

Para especificar a altura da linha por conta própria, use a propriedade line-height.

+ +

Decoração

+ +

A propriedade separada text-decoration pode especificar outros estilos, como underline ou line-through. Você pode configurar isto para none removendo explicitamente qualquer decoração.

+ +

Outras propriedades

+ +

Para especificar itálico por conta própria, use font-style: italic;
+ Para especificar negrito por conta própria, use font-weight: bold;
+ Para especificar letras minúsculas por conta própria, use font-variant: small-caps;

+ +

Para tornar qualquer destes valores individualmente desativado, você pode especificar o valor normal ou inherit.

+ + + + + + + + +
Mais detalhes
Você pode especificar os estilos do texto em uma variedade de outras maneiras. +

Por exemplo, algumas propriedades mencionadas aqui têm outros valores que podem ser usados.

+ +

Em uma folha de estilo complexa, evite usar a propriedade de abreviação de caracteres/palavras que facilitam a escrita font, por causa de seus efeitos colaterais (o re-escolher de outras propriedades individuais).

+ +

Para maiores detalhes sobre as propriedades relacionadas às fontes, veja Fonts na especificação do CSS. Para maiores detalhes sobre decoração de textos, veja Text.

+
+ +

Ação: Especificando fontes

+ +

Para um documento de amostra, você pode escolher a fonte do elemento BODY e o resto do documento herda as configurações.

+ +

Edite seu arquivo CSS. Adicione esta regra para mudar a fonte completamente. O topo do arquivo CSS é um local lógico para isto, mas isto terá o mesmo efeito em qualquer lugar que for posicionado:

+ +
+
body {font: 16px "Comic Sans MS", cursive;}
+
+
+ +

Adicione um comentário à regra, e deixe um espaço em branco para fazer sua disposição preferido.

+ +

Atualize seu navegador para ver o efeito. Se o seu sistema tem Comic Sans MS, ou outra fonte cursiva que não suporta itálico, então seu navegador escolhe um tipo diferente de fonte para o texto em itálico na primeira linha:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

Da barra de menu do seu navegador, escolha Exibir – Tamanho do Texto – Aumentar. Mesmo que o estilo especificado seja 16 pixels, um usuário lendo o documento pode mudar o tamanho.

+ + + + + + + + +
Desafio
Sem mudar mais nada, faça todas as seis letras iniciais duas vezes o tamanho na fonte serifada padrão do navegador: + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+
+ +

O que vem depois?

+ +

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

+ +

Seu documento de amostra está pronto para usar várias cores nomeadas. A próxima página lista os nomes das cores padrão e explica como você pode especificar outras: Cor

+ +

{{ PreviousNext("CSS:Como começar:CSS legível", "CSS:Como começar:Cor") }}

diff --git a/files/pt-pt/learn/css/styling_text/index.html b/files/pt-pt/learn/css/styling_text/index.html new file mode 100644 index 0000000000..5d00bc90c5 --- /dev/null +++ b/files/pt-pt/learn/css/styling_text/index.html @@ -0,0 +1,136 @@ +--- +title: Estilizar texto +slug: Learn/CSS/Estilo_de_texto +tags: + - CSS + - Hiperligações + - Principiante + - Texto + - Tipos de Letra + - letra + - lina + - listas + - modulo + - sombra + - tipo de letra + - tipos de letra da Web +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

Com os conceitos básicos da linguagem CSS cobertos, o próximo tópico de CSS para se concentrar será o estilo de texto - uma das coisas mais comuns que irá fazer com CSS. Aqui, nós vamos ver os fundamentos do estilo de texto, incluindo a configuração do tipo de letra, negrito, itálico, espaçamento de linha e letra, sombras e outros recursos de texto. Nós completamos o módulo ao analisar a aplicação de tipos de letra personalizadas para a sua página, e listas de estilo e hiperligações.

+ +

Pré-requisitos

+ +

Before starting this module, you should already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.

+ +
+

Nota: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin, CodePen or Thimble.

+
+ +

Guias

+ +

This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.

+ +
+
Fundamental text and font styling
+
In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
+
Styling lists
+
Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.
+
Styling links
+
When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.
+
Web fonts
+
Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.
+
+ +

Avaliações

+ +

The following assessments will test your understanding of the text styling techniques covered in the guides above.

+ +
+
Typesetting a community school homepage
+
In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.
+
+ +
+ + + + + +
diff --git a/files/pt-pt/learn/css/styling_text/styling_lists/index.html b/files/pt-pt/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..cff2108b51 --- /dev/null +++ b/files/pt-pt/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,362 @@ +--- +title: Listas +slug: Web/CSS/Como_começar/Listas +tags: + - 'CSS:Como_começar' +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +

{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}

+ +

Esta página descreve como você pode usar as CSS para especificar a aparência das listas.

+ +

Você cria um novo documento de amostra contendo listas, e uma nova folha de estilo que estiliza as listas.

+ +

Informação: Listas

+ +

Se você resolveu o desafio da última página (Conteúdo), então você viu como você pode adicionar conteúdo antes de qualquer elemento para mostrar isto como o item de uma lista.

+ +

CSS proporciona propriedades especiais que foram designadas para listas. Geralmente é mais conveniente usar estas propriedades sempre que você puder.

+ +

Para especificar o estilo para uma lista, use a propriedade list-style para especificar o tipo de marcador.

+ +

O seletor nas regras do seu CSS pode selecionar qualquer um dos elementos na sua lista de itens (por exemplo, LI), ou isto pode selecionar o elemento primário da lista (por exemplo, UL). Então os elementos da lista herdam o estilo.

+ +

Listas não ordenadas

+ +

Em uma lista não ordenada, cada item da lista é marcado da mesma maneira.

+ +

CSS tem três tipos de marcador. Aqui está como seu navegador os mostra:

+ + + +

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

+ + + + + + + + +
Exemplo
Estas regras especificam diferentes marcadores para diferentes classes de itens da lista: +
+ 
+li.open {list-style: circle;}
+li.closed {list-style: disc;}
+
+
+ +

Quando estas classes são usadas em uma lista, elas distinguem entre os itens aberto (open) e fechado (closed):

+ +
+ 
+<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 será parecido com:

+ + + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+ +

Listas ordenadas

+ +

Em uma lista ordenada, cada item da lista é marcado diferentemente para mostrar a posição em seqüência.

+ +

Use a propriedade list-style para especificar o tipo de marcador:

+ + + + + + + + + + +
Exemplo
Esta regra especifica os elementos OL com a classe info, os itens são identificados com letras maiúsculas. +
+ 
+ol.info {list-style: upper-latin;}
+
+
+ +

Os elementos LI na lista herdam este estilo:

+ + + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+ + + + + + + + +
Mais detalhes
A propriedade list-style é uma propriedade "abreviada". Em folhas de estilo complexas você pode preferir usar propriedades separadas para configurar valores separados. Para detalhes sobre estas propriedades separadas, e mais detalhes sobre como as CSS especificam listas, veja Lists na CSS Specification. +

Se você está usando a linguagem de marcação como o HTML que proporciona tags convecionais para listas não ordenadas (UL) e ordenadas (OL), então é bom praticar usando tags da maneira que foi explicado. Contudo, você pode usar as CSS para fazer UL mostrar ordenado e OL para mostrar não ordenado se você precisar.

+ +

Os navegadores diferem no modo como implementam os estilos das listas. Não espere que sua folha de estilo dê resultados idênticos em todos os navegadores.

+
+ +

Contadores

+ +
+

Note:  Alguns navegadores não suportam contadores.

+
+ +

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

+ +

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

+ +

Em alguns elementos antes da contagem começar, re-inicie o contador com a propriedade counter-reset e o nome do seu contador. O principal dos elementos que você estiver contando é um bom lugar para isto, mas você pode usar qualquer elemento que esteja antes da lista de itens.

+ +

Em cada elemento que o contador incrementar, use a propriedade counter-increment e o nome do seu contador.

+ +

Para mostrar seu contador, adicione :before ou :after ao seletor e use a propriedade content (como fez na página anterior, Conteúdo).

+ +

No valor da propriedade content, especifique counter() com o nome do seu contador. Opcionalmente especifique um tipo. Os tipos são como na seção passada em Listas ordenadas.

+ +

Normalmente o elemento que mostra o contador também incrementa isto.

+ + + + + + + + +
Exemplo
Esta regra inicializa um contador para cada elemento H3 com a classe numbered: +
+ 
+h3.numbered {counter-reset: mynum;}
+
+
+ +

Esta regra mostra e incrementa o contador para cada elemento P com a classe numbered:

+ +
+ 
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}
+
+
+ +

O resultado se parece com isto:

+ + + + + + + +
Cabeçalho + +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+ + + + + + + + +
Mais detalhes
Você não pode usar contadores a menos que você saiba que todos os que lêem o seu documento têm um navegador que os suporta. +

Se você puder usar contadores, eles tem a vantagem de que você pode estilizar os contadores separadamente da lista de itens. No exemplo anterior, os contadores estão em negrito mas a os itens da lista não.

+ +

Você pode também usar contadores em meios mais complexos — por exemplo, para numerar seções, cabeçalhos, sub-cabeçalhos e parágrafos em documentos formais. Para detalhes, veja Automatic counters and numbering em CSS Specification.

+
+ +

Ação: Listas denominadas

+ +

Crie um novo documento HTML, doc2.html. Copie e cole o conteúdo daqui, tendo certeza de que você rola o mouse para pegar tudo isto:

+ +
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+<HEAD>
+<TITLE>Documento de amostra 2</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style2.css">
+</HEAD>
+<BODY>
+
+<H3 id="oceans">Os oceanos</H3>
+<UL>
+<LI>Ártico</LI>
+<LI>Atlântico</LI>
+<LI>Pacífico</LI>
+<LI>Índico</LI>
+<LI>Antártico</LI>
+</UL>
+
+<H3 class="numbered">Numbered paragraphs</H3>
+<P class="numbered">Lorem ipsum</P>
+<P class="numbered">Dolor sit</P>
+<P class="numbered">Amet consectetuer</P>
+<P class="numbered">Magna aliquam</P>
+<P class="numbered">Autem veleum</P>
+
+</BODY>
+</HTML>
+
+
+ +

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

+ +
+
/* parágrafos numerados */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}
+
+
+ +

Se a disposição e o comentário não estiver ao seu gosto, mude-os.

+ +

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

+ + + + + + + +
+

Os oceanos

+ +
    +
  • Ártico
    • +
  • Atlântico
    • +
  • Pacífico
    • +
  • Índico
    • +
  • Antártico
    • +
+ +

Parágrafos numerados

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ + + + + + + + +
Desafios
Adicione uma regra à sua folha de estilo, para numerar os oceanos usando numerais Romanos de i até v: + + + + + + +
+

Os oceanos

+ +
    +
  • Ártico
    • +
  • Atlântico
    • +
  • Pacífico
    • +
  • Índico
    • +
  • Antártico
    • +
+
+ +


+ Se o seu navegador suporta contadores, mude sua folha de estilo para identificar o cabeçalho com letras maiúsculas em parênteses como isto:

+ + + + + + + +
+

(A) Os oceanos

+ +

. . .

+ +

(B) Parágrafos numerados

+ +

. . .

+
+
+ +

O que vem depois?

+ +

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

+ +

Quando seu navegador exibe seu documento de amostra, cria espaços ao redor dos elementos quando eles são exibidos na página.

+ +

A próxima página descreve como você pode usar as CSS para trabalhar com formas subjacentes de elementos: Caixas

+ +

{{ PreviousNext("CSS:Como começar:Conteúdo", "CSS:Como começar:Caixas") }}

-- cgit v1.2.3-54-g00ecf