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 --- .../css_leg\303\255vel/index.html" | 188 --------------------- 1 file changed, 188 deletions(-) delete mode 100644 "files/pt-pt/web/css/como_come\303\247ar/css_leg\303\255vel/index.html" (limited to 'files/pt-pt/web/css/como_começar/css_legível/index.html') diff --git "a/files/pt-pt/web/css/como_come\303\247ar/css_leg\303\255vel/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/css_leg\303\255vel/index.html" deleted file mode 100644 index 08ede46aa3..0000000000 --- "a/files/pt-pt/web/css/como_come\303\247ar/css_leg\303\255vel/index.html" +++ /dev/null @@ -1,188 +0,0 @@ ---- -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") }}

-- cgit v1.2.3-54-g00ecf