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.
Atualmente, é quase impossível criar um site que não utilize Cascading Style Sheets (CSS). O nosso Digital Guide explica para você o que é CSS e como incluir CSS no HTML. Se você está começando a enveredar por essa linguagem de estilo agora, acesse este tutorial básico de CSS e conheça os principais truques de CSS: snippets que melhorarão os seus códigos.
Um comando CSS, também chamado de instrução CSS, deve ter a seguinte estrutura:
seletor | chave de abertura | propriedade | valor da propriedade | chave de fechamento |
---|---|---|---|---|
p
|
{
|
color:
|
navy;
|
}
|
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.
Em CSS, tudo o que é inserido entre / *…* /
é ignorado pelo navegador. Você pode usar a estrutura para acrescentar comentários ao seu código e para ocultar comandos CSS por motivos de testes, sem que seja preciso apagá-los ou reescrevê-los.
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.
Em comandos CSS, os nomes das classes e os nomes dos IDs são case sensitive, ou seja, sensíveis a maiúsculas e minúsculas. Fará diferença se você escrever a instrução para um ID como #AMARELO { … }
ou #amarelo { … }
. Portanto, digite as instruções de forma idêntica quando referentes a elementos HTML.
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.
Comando CSS | Descrição | Valores possíveis |
---|---|---|
linear-gradient
|
Gradiente linear de uma cor para outra ou com várias cores | to-top, to-right, 45deg (especificação livre de ângulo), cores com % como pontos de parada/transição |
radial-gradient
|
Gradiente circular de uma cor para outra | circle, ellipse com valores de pixels e cores |
conic-gradient
|
Transição de uma cor para outra em formato cônico | Cores com valores de % e ângulo inicial como números |
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:
Comando CSS | Descrição | Valores possíveis |
---|---|---|
font-style
|
Estilo da fonte | normal, italic, oblique |
font-variant
|
Variante da fonte | normal, small-caps |
font-weight
|
Espessura da fonte | normal (= 400), bold, bolder, lighter, 100 a 900 (em incrementos de 100) |
font-size / line-height
|
Tamanho da fonte | Especificação em px, %, em, rem, vw, vh |
font-family
|
Família da fonte | Fontes dependem do sistema operacional, do navegador e das extensões instaladas |
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
.
Em comandos CSS, nomes de fontes com espaços devem ser inseridos entre aspas simples ou duplas, como neste exemplo: font-family: "Lobster Two"
.
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:
Comando CSS | Descrição | Valores possíveis |
---|---|---|
text-align
|
Alinhamento do texto | left, right, center, justify |
text-decoration
|
Decoração do texto | underline, overline, line-through |
word-spacing
|
Espaçamento entre palavras | Valor numérico em pt (pontos) mm, cm, px, em, rem |
letter-spacing
|
Espaçamento entre caracteres | Valor numérico em pt (pontos) mm, cm, px, em, rem |
text-indent
|
Recuo da 1ª linha | Valor numérico em pt (pontos) mm, cm, px, em, rem |
text-transform
|
Maiúsculas e minúsculas | capitalize, uppercase, lowercase, none |
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:
Comando CSS | Descrição | Valores possíveis |
---|---|---|
border-width
|
Largura da borda | px, mm, in, em, rem |
border-style
|
Estilo da borda | none, hidden, dotted, dashed, double, groove, ridge, inset, outset |
border-color
|
Cor da borda | Ver seção sobre cores |
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.
Comando CSS | Descrição | Valores possíveis |
---|---|---|
padding: 1px
|
Espaçamento interno geral | px, em, mm, in, pt, pc, % |
padding: 1em 2.5em;
|
Espaçamento interno acima e abaixo (1º valor), esquerda e direita (2º valor) | px, em, mm, in, pt, pc, % |
padding: 5px 2px 4px;
|
Espaçamento interno acima (1º valor), esquerda e direita (2º valor), abaixo (3º valor) | px, em, mm, in, pt, pc, % |
padding-top: 1mm;
|
Espaçamento interno acima | px, em, mm, in, pt, pc, % |
padding-right: 1pc;
|
Espaçamento interno à direita | px, em, mm, in, pt, pc, % |
padding-bottom: 3pt;
|
Espaçamento interno abaixo | px, em, mm, in, pt, pc, % |
padding-left: 2in;
|
Espaçamento interno à esquerda | px, em, mm, in, pt, pc, % |
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
.
Comando CSS | Descrição | Valores possíveis |
---|---|---|
margin: 5px;
|
Espaçamento externo geral | px, em, mm, in, pt, pc, % |
margin: 2em 1.5em;
|
Espaçamento externo acima e abaixo (1º valor), esquerda e direita (2º valor) | px, em, mm, in, pt, pc, % |
margin: 2px 10px 15px;
|
Espaçamento externo acima (1º valor), esquerda e direita (2º valor), abaixo (3º valor) | px, em, mm, in, pt, pc, % |
margin-top: 2pc;
|
Espaçamento externo acima | px, em, mm, in, pt, pc, % |
margin-right: 5mm;
|
Espaçamento externo à direita | px, em, mm, in, pt, pc, % |
margin-bottom: 7pt;
|
Espaçamento externo abaixo | px, em, mm, in, pt, pc, % |
margin-left: 1in;
|
Espaçamento externo à esquerda | px, em, mm, in, pt, pc, % |
Ao calcular os elementos de um layout, é preciso que você considere todos os componentes. Ou seja: a largura do texto ou da imagem (width
), o espaçamento interno (padding
), a largura da borda (border-width
) e o espaçamento externo (margin
).
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.
Comando CSS | Descrição | Valores possíveis |
---|---|---|
a:link
|
Link em estado inicial | Pode ser combinado com comandos CSS |
a:hover
|
Link ao passar o ponteiro do mouse | Pode ser combinado com comandos CSS |
a:active
|
Link ao clicar | Pode ser combinado com comandos CSS |
a:focus
|
Link selecionado, por exemplo, com a tecla Tab | Pode ser combinado com comandos CSS |
a:visited
|
Link após ser acessado | Pode ser combinado com comandos CSS |
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.
Comando CSS | Descrição | Valores possíveis |
---|---|---|
background-color
|
Cor de fundo | Ver seção sobre cores |
background-image
|
Imagem de fundo | URL da imagem |
background-attachment
|
O plano de fundo se move ao rolar a tela ou permanece fixo? | scroll, fixed |
background-clip
|
Determina a qual seção as propriedades do plano de fundo se aplicam | padding-box, corner-box, content-box |
background-position
|
Alinhamento da imagem de fundo | top, center, bottom / left, center, right |
background-repeat
|
Se a imagem for menor que o plano de fundo, ela pode ser repetida | repeat, repeat-x (horizontal), repeat-y (vertical), space (repetir sem cortar), round (repetir com redimensionamento) |
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
.
Para que você possa consultar este tutorial de comandos CSS de um jeito bem mais fácil, fixe-o à sua barra de tarefas do Windows. Não sabe como? O nosso Digital Guie ensina você a fixar um site na barra de tarefas do Windows 11.