Os comandos CSS mais importantes

Provavelmente você terá de utilizar diferentes comandos CSS durante a criação ou a manutenção de um site. Por isso, este tutorial apresenta os comandos CSS mais importantes e frequentemente aplicados, assim como a finalidade de cada um e alguns exemplos de códigos. Continue lendo para melhorar as suas habilidades de web design.

Abrangência dos comandos CSS

Originalmente, comandos CSS serviam apenas para definir fontes, cores de fontes, tabelas e elementos rodeados de texto. No entanto, a importância e a abrangência da linguagem de estilo CSS se expandiu consideravelmente com o passar do tempo. Hoje em dia, ela permite a geração de gradientes de cores, recortes de imagens, sombras, cantos arredondados, animações e muito mais.

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

Combinados, propriedade e valor da propriedade formam uma declaração.

Ao programar em CSS, você deve ter em mente que, apesar de contínuos ajustes e melhorias, nem todos os navegadores “entendem” a linguagem por completo. Prefixos de navegador conseguem contornar esse problema, direcionando comandos CSS a navegadores específicos. 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 gratuitamente a compatibilidade de comandos CSS com os navegadores mais comuns.

CSS Flexbox, CSS Grid e CSS Media Queries, por sua vez, foram desenvolvidos para a facilitar a criação de sites responsivos. Juntamente com novos comandos CSS, esses recursos ajudam na implementaçã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 componente de um site. Quase qualquer elemento pode ter uma cor própria ou ganhar um gradiente de cores.

Especificar valores de cores com comandos CSS

• Hexcode: #63f0ac
• Nome da cor: red, green, blue, coral, white, black…
• RGB: rgb(238,130,238) e transparência RGB com rgba(238,130,238, 0.7)
• HSL com transparência: hsla(140,20%,50%,0.5) - Hue (tom): de 0 a 360 graus na roda de cores - Saturation (saturação): de 0% (incolor) a 100% (intensidade máxima) - Lightness (claridade): de 0% (preto) a 100% (branco) - Valor de transparência 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 propriedade 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 gradientes de cores com comandos CSS

Antigamente, era preciso usar arquivos de imagem para criar gradientes 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 utilizados na especificação de cores, incluindo valores de cor com transparência.

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 propriedades 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 componentes dessa instrução CSS, na ordem em que devem ser especificados:

A definição de font-family, para o corpo do site, é herdada por todas as instruções subordinadas hierarquicamente. A cor da fonte não é definida pela instrução font, mas sim pela especificação color:nome_da_cor.

Nosso artigo especializado em tipografia no web design responsivo apresenta mais informações sobre as unidades de medida utilizadas para tamanhos de fonte (font-size).

Comandos CSS para layouts de texto

Além de fontes, cores e tamanhos, outros detalhes tipográficos influenciam a legibilidade 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 propriedades, de modo semelhante ao elemento font.

Por exemplo: para enquadrarmos 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 componentes desse comando CSS:

Linhas ao longo de cada lado de uma imagem ou retângulo podem ser posicionadas com os comandos border-top, border-right, border-bottom e border-left, com os mesmos atributos utilizados na notação abreviada border.

Comandos CSS para espaçamentos

Existem dois tipos de espaçamento:

• padding é o espaçamento interno entre o conteúdo e o elemento que o cerca
• margin é o espaçamento externo entre um elemento e outro elemento adjacente

Espaçamento interno

O comando padding define o espaçamento entre uma imagem ou bloco de texto e a borda que o circunda. Existem formas abreviadas e instruções específicas para cada lado de um bloco de conteúdo.

Quando na forma abreviada padding, caso todas as quatro posições estejam preenchidas com valores, elas serão consideradas 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* /

Espaçamento 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 representação visual diferente. Além de outros aspectos, você também poderá determinar 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;}

Geralmente, as chamadas pseudoclasses podem ser modificadas para se alterar as cores de um link. Em princípio, contudo, qualquer comando CSS admissível pode ser incorporado 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 incorporar uma imagem a ele. No caso de imagens, você ainda poderá definir características adicionais.

Todos esses são comandos detalhados. 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, integramos os comandos background-color, background-image e background-repeat.