Os comandos CSS mais im­por­tan­tes

Pro­va­vel­mente você terá de utilizar di­fe­ren­tes comandos CSS durante a criação ou a ma­nu­ten­ção de um site. Por isso, este tutorial apresenta os comandos CSS mais im­por­tan­tes e fre­quen­te­mente aplicados, assim como a fi­na­li­dade de cada um e alguns exemplos de códigos. Continue lendo para melhorar as suas ha­bi­li­da­des de web design.

Abran­gên­cia dos comandos CSS

Ori­gi­nal­mente, comandos CSS serviam apenas para definir fontes, cores de fontes, tabelas e elementos rodeados de texto. No entanto, a im­por­tân­cia e a abran­gên­cia da linguagem de estilo CSS se expandiu con­si­de­ra­vel­mente com o passar do tempo. Hoje em dia, ela permite a geração de gra­di­en­tes de cores, recortes de imagens, sombras, cantos ar­re­don­da­dos, animações e muito mais.

Um comando CSS, também chamado de instrução CSS, deve ter a seguinte estrutura:

Com­bi­na­dos, pro­pri­e­dade e valor da pro­pri­e­dade formam uma de­cla­ra­ção.

Ao programar em CSS, você deve ter em mente que, apesar de contínuos ajustes e melhorias, nem todos os na­ve­ga­do­res “entendem” a linguagem por completo. Prefixos de navegador conseguem contornar esse problema, di­re­ci­o­nando comandos CSS a na­ve­ga­do­res es­pe­cí­fi­cos. São esses os prefixos:

• -moz- para o Mozilla Firefox
• -ms- para o Microsoft Edge
• -khtml- para o Konqueror
• -o- para versões antigas do Opera
• -webkit- para o Safari, o Chrome e as novas versões do Opera

Observe o exemplo de aplicação:

.box {
	-moz-border-radius: 10px; / *instrução para Firefox* /
border-radius: 10px;
}

No site caniuse, você pode conferir gra­tui­ta­mente a com­pa­ti­bi­li­dade de comandos CSS com os na­ve­ga­do­res mais comuns.

CSS Flexbox, CSS Grid e CSS Media Queries, por sua vez, foram de­sen­vol­vi­dos para a facilitar a criação de sites res­pon­si­vos. Jun­ta­mente com novos comandos CSS, esses recursos ajudam na im­ple­men­ta­ção do princípio Mobile First.

Comandos CSS para cores

As cores da internet são baseadas no espaço de cores RGB. Comandos CSS podem ser usados para definir cores para cada com­po­nente de um site. Quase qualquer elemento pode ter uma cor própria ou ganhar um gradiente de cores.

Es­pe­ci­fi­car valores de cores com comandos CSS

• Hexcode: #63f0ac
• Nome da cor: red, green, blue, coral, white, black…
• RGB: rgb(238,130,238) e trans­pa­rên­cia RGB com rgba(238,130,238, 0.7)
• HSL com trans­pa­rên­cia: hsla(140,20%,50%,0.5) - Hue (tom): de 0 a 360 graus na roda de cores - Sa­tu­ra­tion (saturação): de 0% (incolor) a 100% (in­ten­si­dade máxima) - Lightness (claridade): de 0% (preto) a 100% (branco) - Valor de trans­pa­rên­cia numérico até 1.0 = cobertura total da cor

Exemplos de cores para elementos HTML

Para definir uma cor de fonte, você pode utilizar a pro­pri­e­dade color:

p { color: red; } / *um parágrafo em vermelho* /
div { color: #ffc3dd; } / *contêiner div com fonte em rosa claro* /
h1 { color: rgba(220,0,218,0.85); } / *título em violeta intenso com transparência de 85%* /

Criar gra­di­en­tes de cores com comandos CSS

An­ti­ga­mente, era preciso usar arquivos de imagem para criar gra­di­en­tes de cores. Hoje em dia, contudo, é fácil gerá-los com comandos CSS. É possível fazer isso com o uso da instrução background-image: gradient ou de sua forma abreviada background: gradient. Em gradient, defina um valor para uma imagem sem dimensões e gere um gradiente de cores, que poderá ser alterado em pontos definidos.

Essa tabela apresenta apenas alguns dos atributos possíveis. Todos os valores comuns podem ser uti­li­za­dos na es­pe­ci­fi­ca­ção de cores, incluindo valores de cor com trans­pa­rên­cia.

Acompanhe um exemplo de notação de um comando CSS completo:

.box { background-image: linear-gradient(to top, white 0%, black 50%); }

Comandos CSS para fontes

Com o comando CSS font, você pode , de uma só vez, alterar as seis pro­pri­e­da­des de uma fonte em uso:

p { font: italic small-caps 700 1.2em/1.5em Arial, Helvetica, sans-serif; }

Confira, na tabela, cada um dos com­po­nen­tes dessa instrução CSS, na ordem em que devem ser es­pe­ci­fi­ca­dos:

A definição de font-family, para o corpo do site, é herdada por todas as ins­tru­ções su­bor­di­na­das hi­e­rar­qui­ca­mente. A cor da fonte não é definida pela instrução font, mas sim pela es­pe­ci­fi­ca­ção color:nome_da_cor.

Nosso artigo es­pe­ci­a­li­zado em ti­po­gra­fia no web design res­pon­sivo apresenta mais in­for­ma­ções sobre as unidades de medida uti­li­za­das para tamanhos de fonte (font-size).

Comandos CSS para layouts de texto

Além de fontes, cores e tamanhos, outros detalhes ti­po­grá­fi­cos in­flu­en­ciam a le­gi­bi­li­dade de um site. Entre eles estão:

Comandos CSS para linhas e bordas

Para criar bordas, você deve fazer uso do elemento CSS border, que reúne em si várias pro­pri­e­da­des, de modo se­me­lhante ao elemento font.

Por exemplo: para en­qua­drar­mos uma imagem (com a tag HTML img) em uma linha de 5 pixels de espessura na cor azul-marinho, usamos a seguinte notação abreviada:

img { border: 5px solid #000080; }

Analise os com­po­nen­tes desse comando CSS:

Linhas ao longo de cada lado de uma imagem ou retângulo podem ser po­si­ci­o­na­das com os comandos border-top, border-right, border-bottom e border-left, com os mesmos atributos uti­li­za­dos na notação abreviada border.

Comandos CSS para es­pa­ça­men­tos

Existem dois tipos de es­pa­ça­mento:

• padding é o es­pa­ça­mento interno entre o conteúdo e o elemento que o cerca
• margin é o es­pa­ça­mento externo entre um elemento e outro elemento adjacente

Es­pa­ça­mento interno

O comando padding define o es­pa­ça­mento entre uma imagem ou bloco de texto e a borda que o circunda. Existem formas abre­vi­a­das e ins­tru­ções es­pe­cí­fi­cas para cada lado de um bloco de conteúdo.

Quando na forma abreviada padding, caso todas as quatro posições estejam pre­en­chi­das com valores, elas serão con­si­de­ra­das em sentido horário, de cima para baixo. O exemplo torna o conceito mais claro:

p { padding: 5px 0 5px 0; } / *5 pixels acima e abaixo, nenhum espaçamento interno à direita e à esquerda* /

Es­pa­ça­mento externo

O comando CSS margin determina a distância entre um elemento de layout e o elemento adjacente. A notação e a indicação de cada valor são idênticas às de padding.

Comandos CSS para links

Se você definir a aparência dos links de um site com a linguagem de estilo CSS, cada status de link poderá ganhar uma re­pre­sen­ta­ção visual diferente. Além de outros aspectos, você também poderá de­ter­mi­nar como um link será exibido ao se passar o mouse sobre ele, ao se clicar e ao se selecioná-lo (com a tecla Tab, por exemplo).

a:link   { background-color: black; color: white;}

Ge­ral­mente, as chamadas pseu­do­clas­ses podem ser mo­di­fi­ca­das para se alterar as cores de um link. Em princípio, contudo, qualquer comando CSS ad­mis­sí­vel pode ser in­cor­po­rado a essas classes.

Comandos CSS para planos de fundo

O plano de fundo de um site também pode ser alterado pela linguagem de estilo CSS. É possível, por exemplo, escolher uma cor ou in­cor­po­rar uma imagem a ele. No caso de imagens, você ainda poderá definir ca­rac­te­rís­ti­cas adi­ci­o­nais.

Todos esses são comandos de­ta­lha­dos. Eles também podem ser aninhados sob o comando superior background. Observe:

background: white url("http://example.org/image.png")
    repeat-x

Na instrução acima, in­te­gra­mos os comandos background-color, background-image e background-repeat.