Introdução ao CSS

por |

CSS (Cascading Style Sheets) é uma linguagem de folhas de estilo, usada para descrever a apresentação de documentos e aplicativos escritos em linguagens de marcação como, por exemplo, HTML, XML e SVG. O CSS foi desenvolvido para separar o conteúdo do documento da apresentação do documento, podendo definir cores, fontes e layout. Dessa forma, é possível criar uma apresentação para a tela e outra para a impressão, por exemplo.

Tipos de mídia

Existem atualmente 10 tipos de mídia válidos, sendo os 3 primeiros compatíveis com a maioria dos navegadores. Eles são:

Mídia Descrição
all Todas as mídias (padrão)
screen Telas de computadores
print Páginas impressas
handheld Dispositivos de mão, como celulares
projection Projetores
tv Televisores
braille Dispositivos táteis de braille
embossed Impressão em relevo de braille
speech Dispositivos sintetizadores de voz
tty Teletipos e dispositivos portáteis de capacidade limitada

Aplicação

Há três formas de aplicar CSS a um documento HTML:

Ligando a um arquivo externo

Ligar a um arquivo externo é a forma preferível, por separar o conteúdo da apresentação.

…
<head>
    <link type="stylesheet" href="assets/css/style.css">
    <link type="stylesheet" href="assets/css/print.css" media="print">
</head>
…

O atributo “media” é opcional, e indica o tipo da mídia da apresentação.

Definindo no cabeçalho do documento

…
<head>
    <style>
        b,
        strong {
            color: red;
        }
    </style>
    <style media="print">
        b,
        strong {
            color: gray;
            text-decoration: underline;
        }
    </style>
</head>
…

O tipo da mídia também pode ser especificado no CSS:

…
<head>
    <style>
        b,
        strong {
            color: red;
        }

        @media print {
            b,
            strong {
                color: gray;
                text-decoration: underline;
            }
        }
    </style>
</head>
…

Definindo diretamente nos elementos (inline)

…
<body>
    <p>
        Diga <strong style="color: red">não</strong> à opressão.
    </p>
</body>
…

Dessa forma não há como especificar o tipo da mídia, nem como reutilizar o estilo em outros elementos.

Seletores

Há diversas maneiras de especificar a quais elementos se está definindo a apresentação; são chamados de “seletores”, e são separados por vírgula. No exemplo abaixo, é aplicada a cor vermelha às tags de negrito (b ou strong), e a cor azul à tag b com a classe .blue.

…
<head>
    <style>
        b,
        strong {
            color: red;
        }
        b.blue {
            color: blue;
        }
    </style>
</head>
<body>
    <p>
        Diga <strong>não</strong> à <b class="blue">opressão</b>.
    </p>
</body>
…

Os seletores podem sem combinados para criar regras mais complexas. Segue os tipos mais comuns de seletores:

Sintaxe Descrição
* Qualquer elemento
tag Especifica uma tag
.classe Especifica uma classe, que pode ser usada em vários elementos
#id Especifica uma ID, que pode ser usada apenas em um elemento
[atributo] Especifica a existência de um atributo
[atributo="valor"] Especifica que o valor do atributo é igual a um determinado valor
[atributo^="valor"] Especifica que o valor do atributo começa com um determinado valor
[atributo$="valor"] Especifica que o valor do atributo termina com um determinado valor
[atributo*="valor"] Especifica que o valor do atributo possui um determinado valor
elemento1 elemento2 Especifica que um elemento está dentro de outro elemento
elemento1 > elemento2 Especifica que um elemento está diretamente dentro de outro elemento
:empty Pseudo-classe que especifica elementos vazios
:first-child Pseudo-classe que especifica o primeiro elemento
:last-child Pseudo-classe que especifica o último elemento
:nth-child(an+b) Pseudo-classe que especifica o enésimo elemento, determinado por uma expressão. a especifica de quantos em quantos elementos, e b especifica o primeiro elemento da contagem. Por exemplo, para elementos pares, usa-se 2n ou even, e para ímpares, usa-se 2n+1 ou odd.
:not(seletor) Pseudo-classe que especifica o inverso do seletor
::first-letter Pseudo-elemento que representa a primeira letra do elemento
::first-line Pseudo-elemento que representa a primeira linha do elemento
::before Pseudo-elemento que representa o que vem antes do elemento
::after Pseudo-elemento que representa o que vem depois do elemento

Há diversos outros seletores; para saber mais, consulte: https://developer.mozilla.org/en-US/docs/Glossary/CSS_Selector (em inglês).

Propriedades

As propriedades são definidas usando a seguinte sintaxe:

propriedade: valor;
Exemplo: 
color: black;

Comentários

Tudo que estiver entre /* e */ será ignorado pelo navegador; são os comentários. Servem para documentar o código.

Cores

As cores podem ser definidas de quatro formas diferentes: palavra-chave, valor hexadecimal, RGB(A), e HSL(A).

  • Palavra-chave: yellow
  • Hexadecimal: #FFFF00
  • RGB (Vermelho, Verde e Azul): rgb(255, 255, 0) ou rgb(100%, 100%, 0)
    • As três cores primárias vão de 0 a 255
  • HSL (Matiz, Saturação e Luminosidade): hsl(60, 100%, 50%)
    • Matiz é um grau de cor, que vai de 0 a 360 – 0 (ou 360) é vermelho, 120 é verde, e 240 é azul
    • Saturação é uma porcentagem, onde 0 é um tom de cinza, e 100% é a cor completa
    • Luminosidade é uma porcentagem, onde 0 é preto, e 100% é branco

É possível especificar a opacidade (Alpha) para cores em RGB e HSL, como o quarto parâmetro, que vai de 0.0 (totalmente transparente) a 1.0 (totalmente opaco):

  • RGBA: rgba(255, 255, 0, 0.5)
  • HSLA: hsla(60, 100%, 50%, 0.5)

Gradientes

O primeiro parâmetro especifica a direção do gradiente, e os demais (sem limite) as cores e ponto de início. Exemplo:

.rgb {
    width: 100%;
    height: 120px;
    background-image: linear-gradient(to right, red 0%, green 50%, blue 100%);
}

Para gradientes diagonais, usa-se um valor em degraus no primeiro parâmetro. Exemplo: 130deg. Também é possível criar gradientes radiais. Exemplo:

.rgb {
    width: 100%;
    height: 120px;
    background-image: radial-gradient(ellipse at center, red 0%, green 50%, blue 100%);
}

Fontes

Há dois tipos de fontes: as com serifa (serif), e as sem serifa (sans-serif). Quando o navegador não encontra uma fonte especificada, ele tenta usar uma semelhante. É possível especificar também o estilo da fonte (normal, itálica, e oblíqua), e a espessura (normal e negrito).

i,
em {
    font-family: "Arial", sans-serif; /* Na ausência da fonte, usar qualquer fonte sem serifa */
    font-size: 16px; /* 16 pixels, 12 pontos, 1.0 em, ou 100% */
    font-style: italic; /* Valores possíveis: normal, italic, oblique, e inherit */
    font-weight: normal; /* Espessura da fonte. Permite valor numérico, de 100 a 900 */
}

Para o tamanho da fonte, é possível usar diversas unidades de medidas, sendo as mais comuns px (pixels), pt (pontos), em e % (relativos ao tamanho da fonte do elemento pai).

Para a propriedade font-style, é possível dar o valor inherit, que significa que herdará o estilo do elemento pai. No caso da propriedade font-weight, é possível dar um valor relativo ao elemento pai, lighter (mais claro) e bolder (mais negrito).

É possível usar fontes que não vêm instaladas no computador. Exemplo:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), /* Fonte instalada */
         local('OpenSans'),
         url(../fonts/OpenSans.woff2) format('woff2'), /* Formato preferível */
         url(../fonts/OpenSans.woff) format('woff'); /* Formato de compatibilidade */
}

A Google oferece um serviço de diretório de fontes bacana, o Google Fonts, onde você pode escolher entre diversas fontes otimizadas para a web.

Layout

Display

Há diversos modos de layout suportados (e outros em desenvolvimento). No HTML, por padrão, o modo de layout é decidido por elemento (imagens são inline, parágrafos são block, etc). Para uma lista completa, consulte: https://developer.mozilla.org/en-US/docs/Web/CSS/display (em inglês).

Position

Há quatro formas de posicionamento atualmente suportadas:

static
fluxo normal. As propriedades top, right, bottom, left e z-index não têm efeito
relative
fluxo relativo. As posições são calculadas a partir dos elementos adjacentes
absolute
o posicionamento é calculado a partir do topo da página
fixed
o posicionamento é calculado a partir do topo da página, mas é fixo independente da rolagem

Exemplo:

#chat {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9; /* Camada no qual o elemento se encontra. Permite sobrepor outros elementos */
}

Alinhamento

Para alinhar elementos inline, como imagens e texto, é possível usar a propriedade text-align (alinhamento horizontal) e vertical-align (alinhamento vertical). Exemplo:

.h-center-inline {
    text-align: center;
}
.v-center-inline {
    vertical-align: middle;
}

Entretanto, para elementos block é necessário alguns hacks:

/* Alinha a esquerda */
.align-left {
    float: left;
}

/* Alinha a direita */
.align-right {
    float: right;
}

/* Limpa o alinhamento */
.clearfix::before,
.clearfix::after {
    content: " ";
    display: table;
}
.clearfix::after {
    clear: both;
}

O elemento pai precisa aplicar a propriedade clear: both, ou o layout ficará comprometido. Exemplo:

…
<div class="clearfix">
    <div class="align-left">
        …
    </div>
</div>
…

Para centralizar horizontalmente:

.h-center {
    margin: 0 auto;
}

Para centralizar verticalmente, a coisa complica:

/* Centraliza verticalmente */
.v-center {
    display: table;
}
.v-center .v-center-item {
    display: table-cell;
    vertical-align: middle;
}

E o código HTML:

…
<div class="v-center">
    <div class="v-center-item">
        …
    </div>
</div>
…