Significado dos colchetes no CSS

Vídeo: Curso de HTML e CSS - Tag br, ol, ul, li, img [Aula - 08]

Contente

Chaves
Parênteses
Colchetes
Chevrons
Notas no CSS
Referências
Recursos

A sigla CSS vem do inglês "cascading style sheets", ou "folhas de estilo em cascata". O CSS dá um maior grau de controle artístico e de design a desenvolvedores web e designers, separando o conteúdo dos parâmetros de exibição. As instruções do CSS são colocadas no cabeçalho de um documento web e depois indicadas dentro do corpo da página web por chaves – { }. Dentro das chaves ficam os parênteses – ( ) – ou colchetes – [ ] – que designam outros elementos do CSS.

Os colchetes do CSS são usados dentro do corpo de um documento web (Comstock/Comstock/Getty Images)

Chaves

As chaves são os elementos primários da sintaxe do CSS. Eles significam a abertura e o fechamento de todos os parâmetros de CSS contidos dentro deles. Representados como { }, eles seguem os elementos de CSS que significam uma imagem, posição, elemento de exibição ou qualquer combinação de elementos. As chaves podem existir dentro de qualquer elemento div/camada, e sempre estão dentro das tags " < /body>". Eis um exemplo:

div#example { padding: 5px; margin: 20px; width: 350px; }

Parênteses

Elementos relacionais, como porcentagens e cores, ficam dentro de parênteses. Os parênteses dão definição adicional a elementos do CSS. Nas versões do CSS anteriores ao CSS3, os parênteses podiam definir elementos da mesma forma que as chaves. Dois exemplos são a cor (definida pelo código hexadecimal) e imagens de fundo, respectivamente:

color:rgb(128, 128, 255); image:url("/images/bg.png")

Colchetes

Os colchetes – [ ] –, conhecidos como seletores de atributos, são usados para designar valores de atributos de um elemento. Havia quatro valores diferentes no CSS2 e foram acrescentados mas três com o CSS3. Os quatro seletores originais definem a presença do atributo – [title], correspondente a qualquer elemento que tenha um atributo "title" (título) especificado; o valor de atributo simples – input[type="enviar"], correspondente a qualquer elemento de entrada cujo tipo de atributo seja igual a "enviar"; o valor de atributo de lista – p[class~="literário"], correspondente a parágrafos cujo atributo de classe seja uma lista de palavras separadas por espaços, uma das quais é "literário"; e valor de atributo parcial – a[href^="http:"], correspondente a elementos de link cujo valor de atributo começa com "http:". Os colchetes não eram muito usados antes da introdução do Internet Explorer 7, pois o IE6 não os reconhecia.

Muitos símbolos algébricos são usados como elementos de CSS (BananaStock/BananaStock/Getty Images)

Chevrons

Os seletores e seções de documentos básicos da linguagem de marcação de hipertexto (em inglês, hypertext markup language, ou HTML) e da linguagem de marcação extensível (em inglês, extensible markup language, ou XML) são delimitados por colchetes pontudos, conhecidos como chevrons. Eles também representam um elemento filho de alguns elementos de CSS. No CSS, um "seletor filho" é formado por dois ou mais itens separados pelo chevron ">". Estes denotam certas seções definidas de uma página web: o corpo, que é a página visível; as camadas, que podem ser empilhadas como folhas de papel por cima umas das outras; ou a titulação, que denota certos objetos ou datas conhecidas como "microformatos".

Notas no CSS

Separados dos colchetes do CSS, mas ainda assim uma ferramenta organizacional valiosa para os layouts em CSS elaborados, são notas de folhas de estilo. Estes são comentários que não acrescentam nada ao código HTML, e portanto não aumentam o tempo de carregamento das páginas; eles proporcionam um contorno para o CSS longo e elaborado. As notas no CSS são colocadas dentro de seu próprio atributo – /* – desta maneira:

/ Qualquer comentário é contido dentro de segmentos delimitados por uma barra e um asterisco. /

Elas podem ser imensamente valiosas para ajudar a percorrer seções de folhas de estilo em cascata.