Exemplo de comentário CSS - Como comentar CSS

Os comentários são usados ​​em CSS para explicar um bloco de código ou para fazer alterações temporárias durante o desenvolvimento. O código comentado não executa.

Os comentários de uma ou de várias linhas em CSS começam /*e terminam com */, e você pode adicionar quantos comentários desejar à sua folha de estilo. Por exemplo:

/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */

Você também pode tornar seus comentários mais legíveis estilizando-os:

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

Organizando CSS com comentários

Em projetos maiores, os arquivos CSS podem aumentar rapidamente de tamanho e se tornar difíceis de manter. Pode ser útil organizar seu CSS em seções distintas com um índice para facilitar a localização de certas regras no futuro:

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

Um pouco mais sobre CSS: Sintaxe CSS e Seletores

Quando falamos sobre a sintaxe do CSS, estamos falando sobre como as coisas são dispostas. Existem regras sobre o que vai aonde, tanto para que você possa escrever CSS de forma consistente e um programa (como um navegador) possa interpretá-lo e aplicá-lo à página corretamente.

Existem duas maneiras principais de escrever CSS.

CSS Inline

Especificações sobre a especificidade de CSS: truques de CSS

CSS embutido aplica estilo a um único elemento e seus filhos, até que outro estilo substituindo o primeiro seja encontrado.

Para aplicar CSS embutido, adicione o atributo “style” a um elemento HTML que você gostaria de modificar. Entre aspas, inclua uma lista delimitada por ponto-e-vírgula de pares de chave / valor (cada um separado por dois pontos) indicando os estilos a serem definidos.

Aqui está um exemplo de CSS inline. As palavras “Um” e “Dois” terão uma cor de fundo amarela e a cor do texto vermelha. A palavra “Três” tem um novo estilo que substitui o primeiro e terá uma cor de fundo verde e uma cor de texto ciano. No exemplo, estamos aplicando estilos a tags, mas você pode aplicar um estilo a qualquer elemento HTML.

 One Two Three 

CSS Interno

Embora escrever um estilo embutido seja uma maneira rápida de alterar um único elemento, há uma maneira mais eficiente de aplicar o mesmo estilo a muitos elementos da página de uma vez.

O CSS interno tem seus estilos especificados na tag e está embutido na tag.

Aqui está um exemplo que tem um efeito semelhante ao exemplo “inline” acima, exceto que o CSS foi extraído para sua própria área. As palavras “Um” e “Dois” corresponderão ao divseletor e serão um texto vermelho em um fundo amarelo. As palavras "Três" e "Quatro" também correspondem ao divseletor, mas também correspondem ao .nested_divseletor que se aplica a qualquer elemento HTML que faça referência a essa classe. Esse seletor mais específico substitui o primeiro e eles acabam aparecendo como texto ciano em um fundo verde.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

Os seletores mostrados acima são extremamente simples, mas podem se tornar bastante complexos. Por exemplo, é possível aplicar estilos apenas a elementos aninhados; ou seja, um elemento que é filho de outro elemento.

Aqui está um exemplo onde estamos especificando um estilo que deve ser aplicado apenas a divelementos que são filhos diretos de outros divelementos. O resultado é que “Dois” e “Três” aparecerão como texto vermelho em um fundo amarelo, mas “Um” e “Quatro” não serão afetados (e provavelmente o texto preto em um fundo branco).

 div > div { color: red; background: yellow; } One Two Three Four 

CSS Externo

Todo o estilo tem seu próprio documento que está vinculado na tag. A extensão do arquivo vinculado é.css