Fundamentos do CSS: Introdução e Sintaxe

Fundamentos do CSS

• Este capítulo oferece uma introdução ao CSS, explorando sua definição, história, sintaxe, unidades de medida e métodos de vinculação a documentos HTML.
• Ao final deste capítulo, o leitor vai ter uma visão geral da evolução do CSS desde a sua criação.

Definições e conceitos CSS

• CSS significa "Cascading Style Sheet", ou folhas de estilo em cascata.
• CSS é usado como abreviação e a forma completa "folhas de estilo em cascata" também é aceita.
• Uma definição precisa de folha de estilo é encontrada no site do W3C: "um mecanismo simples para adicionar estilos (como fontes, cores e espaçamentos) a documentos web".

Finalidade

• A finalidade do uso de CSS é devolver a marcação HTML/XML ao propósito inicial da linguagem.
• O HTML foi criado exclusivamente para a marcação e estruturação de conteúdos.
• O HTML não deve fornecer informações sobre a apresentação dos elementos.
• Cores de fontes, tamanhos de textos, posicionamentos e o aspecto visual de um documento são funções do CSS.
• CSS + HTML podem ser resumidos na frase: "HTML para estruturar e CSS para apresentar".
• Agente de usuário é qualquer dispositivo capaz de interpretar um documento escrito em linguagem de marcação. Exemplos: navegadores, leitores de tela, robôs de indexação, tablets e smartphones.

Histórico

• Tim Berners-Lee, ao desenvolver o navegador Nexus, escreveu funcionalidades intrínsecas para controlar a apresentação dos documentos.
• Navegadores nos anos de 1992 e 1993 já vinham com funcionalidades de estilização padrão, como no modelo de Tim.
• No navegador Mosaic, lançado em 1993, funcionalidades mínimas para aplicar estilos já foram preivistas.
• As funcionalidades intrínsecas são conhecidas hoje em dia como folhas de estilo padrão do navegador.
• Uma folha de estilo é um conjunto de regras que o navegador aplica por padrão, a não ser que o autor ou o usuário defina algo diferente.
• A primeira proposta para implementação do CSS surgiu em setembro de 1994.
• Até então, Tim considerava a estilização uma questão a ser resolvida pelo navegador.
• Em dezembro de 1996, o CSS1 foi lançado como Recomendação oficial do W3C.

Regra CSS

• Regra CSS é a unidade básica de uma folha de estilo.
• Significa a menor porção de código capaz de produzir efeito de estilização.
• Uma regra CSS tem duas partes: o seletor e a declaração.
• A declaração inclui uma propriedade e um valor.
• O seletor é o alvo da regra CSS.
• A declaração determina os parâmetros de estilização e compreende a propriedade e o valor.
• A propriedade define qual será a característica do seletor a ser estilizada.
• O valor é a quantificação ou qualificação da propriedade.
• Uma regra CSS pode conter várias declarações separadas por ponto e vírgula:

  p {
      color: red;
      background-color: black;
      font-size: 12px;
  }
  

• Seletores para elementos da marcação são seletores de tipo.
• Declarações correspondem a color: red; background-color: black; font-size: 12px;.
• Propriedades são color, background-color e font-size.
• color define a cor dos textos em p, background-color a cor de fundo do elemento p, e font-size o tamanho da fonte para o elemento p.
• No exemplo, cada declaração está em uma linha para facilitar a leitura, mas é possível colocar todas em uma linha, separadas por ponto e vírgula.
  • O espaçamento é opcional e visa facilitar a leitura do código.

p { color:red; background-color:black; font-size:12px; } /* Menos legível, não é? */

• O ponto e vírgula é facultativo na última declaração de uma regra de estilo, mas seu uso é recomendado.
• Quando o valor de uma propriedade é uma palavra composta separada por espaços, deve-se usar aspas duplas (" ") ou simples (' ').
• Aspas não são usadas em palavras compostas separadas por hífen:

p {
font-family: Sans-serif;
}

• A sintaxe da regra CSS não diferencia letras maiúsculas de minúsculas, e múltiplos espaços são tratados como um espaço simples.
• São todos válidos:

  h1 { border: 1px solid red; }
  h1 {border:1px solid red;}
  h1{ border: 1px solid red;}
  H1 { border: 1px solid RED;}
  h1{ BORDER: 1px solid red; }
  

• Eliminar o espaço entre o seletor e o sinal de abrir chaves pode causar confusão em alguns navegadores antigos e deve ser evitado.
• Quando há mais de uma forma válida de escrever o código, o desenvolvedor deve escolher uma delas e usá-la como padrão para consistência.
• Formas de uso mais comuns:

h1 { border: 1px solid red; }

• Adota um espaço em branco junto ao sinal de chaves.

h1{
border: 1px solid red;
}

• A segunda usa um espaço para separar o seletor da declaração.

• A forma estendida de declarar as propriedades em linhas distintas é escrita com endentação.

• É possível incluir comentários no código CSS, como em outras linguagens de programação:

/* Este é um comentário em uma linha */

/* Este é um bloco de comentário em linhas
diferentes contendo muitas informações
sobre um trecho da folha de estilo */

• Um conjunto de regras CSS é chamado folha de estilo.
• Um conjunto de regras pode ser escrito no próprio documento ao qual as regras serão aplicadas ou num arquivo externo com a extensão .css.
  • Exemplo: principal.css

Categorias de valores CSS

• O agente de usuário identifica o valor da propriedade e renderiza o elemento de acordo.

p { font-family: Arial, Sans-serif; } /* estiliza p com fonte na família especificada (valor) */
p { width: 400px; } /* estiliza p com largura 400px */
p { font-size: 120%; } /* estiliza p com tamanho de fonte 1.2 vezes o valor de referência */
p { background-color: red; } /* estiliza p com fundo na cor vermelha */
p { height: 2em; } /* estiliza p com altura 2 vezes o valor de referència */

• Alguns valores são absolutos, outros são relativos (dependem de um valor de referência).
• Os valores CSS são agrupados em oito categorias:

1. Palavra-chave:
   • Um valor CSS do tipo palavra-chave é expresso por uma string predefinida.
   • Ao definir cores, são usadas palavras-chave como red, acqua e teal.

     p {
         color: red;
         background-color: acqua;
         border-color: teal;
     }
     

   • Outras palavras-chave incluem inherit, collapse, italic e uppercase.
2. Número:
   • Um valor CSS do tipo número é expresso por um número inteiro ou real.
   • A sintaxe <integer> designa números inteiros, e <number> designa números reais.
   • Números inteiros são formados por um ou mais algarismos de 0 a 9.
   • Números reais são formados por algarismos de 0 a 9, seguidos de vírgula e algarismos de 0 a 9.
   • Em CSS, números podem ser precedidos por "+" e "-".
3. Número não negativo:
   • Muitas propriedades CSS que admitem um valor do tipo número fazem restrição quanto à faixa de números admitidos.
   • A sintaxe <non-negative-integer> é para números inteiros não negativos.
   • A sintaxe <non-negative-number> é para números reais não negativos.
   • A restrição não se aplica ao número zero.
4. Número com unidade de medida:

• Os valores CSS nessa categoria são classificados em cinco categorias:
  • Comprimento:
    • Refere-se às medidas horizontal e vertical.
    • A sintaxe é <length>.
    • Um valor CSS com medida de comprimento contém um número seguido da abreviação para unidade de medida.
    • Exemplo: 14px, 12em, 18pt.
    • Se o número é zero, a unidade de medida é opcional (exceto na definição da posição do primeiro frame de uma animação CSS).
  • Medida relativa:
    • Um valor é determinado em função de outro valor para uma propriedade de referência.
    • Facilita o escalonamento e possibilita servir tipos de mídia diferentes.
    • As medidas relativas nas CSS3 incluem em(à font-size do elemento pai), ex, px, gd, rem, VW, vh, vm e ch.
  • Medida absoluta:
    • O valor é determinado e fixo.
    • Útil quando se conhece as dimensões físicas da mídia.
    • As medidas absolutas nas CSS3 incluem in, cm, mm, pt e pc.
  • Porcentagem:
    • Um número seguido pelo sinal %.
    • A sintaxe é <percentage>.
    • Porcentagens dependem de outro valor.
  • Ângulo:
    • Um número seguido por uma unidade de medida angular.
    • A sintaxe é <angle>.
    • As unidades de medida angular em CSS são deg; grad; rad; turn.

5. Número não negativo com unidade de medida:
   • Os valores CSS não negativos com unidade de medida são classificados em duas categorias:

• Hora: - Um número seguido por uma unidade identificadora de tempo em segundos. - A sintaxe é <time>. - As unidades de medida de tempo em CSS são ms e s.
• Frequência: - Um número seguido por uma unidade identificadora de frequência em hertz. - A sintaxe é <frequency>. - As unidades de medida de frequência em CSS são Hz e kHz.

6. String:
   • Devem ser grafados com aspas simples (') ou duplas (“).
   • Uma aspa não pode ocorrer dentro de outra, a menos que seja escapada com uma barra invertida ().
   • Uma string não pode conter uma quebra de linha, a menos que se use o caractere \A.
   • É possível quebrar uma string em substrings com uso do caractere barra invertida ().
7. Notação funcional:
   • Valores CSS podem ser expressos por uma função.
   • Valores funcionais definem cores, atributos e URIs.
   • A sintaxe é nome da função seguido de uma lista de argumentos entre parênteses.
   • Exemplos: rgb, attr e url.
8. Casos especiais:
   • Essa categoria inclui valores que não se encaixam nas outras sete categorias.
   • Enquadrados nessa categoria estão os valores para definição de famílias de fontes e valores para definição de cores em sintaxe hexadecimal.

Tipos de valores CSS

• Existem cinco tipos de valores:
  1. Valor inicial:
     • Todas as propriedades CSS têm um valor inicial por padrão.
     • O valor inicial é definido pelo agente de usuário, mas não há padronização, o que pode causar inconsistência.
     • A palavra-chave initial força a adoção do valor inicial da propriedade.
  2. Valor especificado:
     • O agente de usuário atribui um valor a cada propriedade após o documento ser parseado e sua árvore ser construída.
     • A atribuição do valor segue um mecanismo de três ordens de precedência:
       • Se o efeito cascata resulta em um valor, adota esse valor.
       • Se não houver valor de cascata e a propriedade for herdável, adota o valor herdado.
       • Se nenhuma das hipóteses anteriores ocorrer, adota o valor inicial da propriedade.
     • O valor resultante da aplicação desse mecanismo é o valor especificado.
  3. Valor computado:
     • Pode ser absoluto ou relativo.
     • Se o valor especificado for absoluto, o valor computado é igual a ele.
     • Se for relativo, é necessário realizar um cálculo.
  4. Valor usado: - É o valor efetivamente usado para renderizar o documento. - Alguns valores só podem ser computados com o conhecimento do layout do documento.
  5. Valor atual:
     • É o valor resultante do arredondamento do valor usado, caso o agente de usuário não consiga renderizá-lo.

Vinculando folhas de estilo a documentos

• É preciso informar ao documento onde buscar a folha de estilo.
• As folhas de estilo podem ser escritas no próprio documento HTML ou em arquivos externos independentes com a extensão .css.

Estilos inline

• Aplica estilos diretamente a um elemento com o atributo style.

<p style="width: 200px; color: white; background: red; font-size: 1.8em;">
<!-- Parágrafo com aplicação de estilos inline -->
</p>

• Dificulta a manutenção e retira o controle centralizado da apresentação.

Estilos incorporados

• Regras de estilo são escritas dentro das tags <style> e </style>.

<head>
  <style type="text/css" media="all">
   body {
    margin: 0;
    padding: 0;
    font-size: 80%;
    color: black;
    background: white;
   }
  </style>
</head>

Estilos externos

Folhas de estilo linkadas

• Usa o elemento <link> na seção <head> para associar um arquivo externo:

<head>
  <link rel="stylesheet" type="text/css" href="estilos.css" media="all" />
</head>

Folhas de estilo importadas

• Usa a diretiva @import dentro do elemento <style>.

<head>
  <style type="text/css">
   @import url("estilos.css") screen, projection;
  </style>
</head>

• A diretiva @import deve preceder todas as demais regras de estilo.
• A vantagem do método é que o autor controla a apresentação do site em um arquivo central.

Módulos CSS3

• A primeira versão das especificações do W3C para CSS foi para as CSS nível 1, lançada em 17 de dezembro de 1996.
• CSS Nível 2 foi lançado em 12 de maio de 1998.
• A versão para as CSS nível 2.1 foi proposta em agosto de 2002, e passou para o status de Recomendação do W3C em junho de 2011.
• O W3C prefere o termo nível em vez de versão, para designar a progressão dos diferentes documentos que especificam as CSS, alegando ser aquele termo mais apropriado.
• Cada novo nível é projetado com base no nível anterior, refinando definições e acrescentando novas funcionalidades às já existentes.

Status dos módulos

• Etapas de desenvolvimento das especificações no W3C (status):
  • WD (Working Draft ou Rascunho de Trabalho)
  • LC (Last Call ou Última Chamada)
  • CR (Candidate Recommendation ou Candidata a Recomendação)
  • PR (Proposed Recommendation ou Proposta de Recomendação)
  • REC (W3C Recommendation ou Recomendação do W3C)
• A sequência de progresso pelas etapas não é irreversível.
• As tabelas mostram o status de cada um dos módulos das CSS3 e suas prioridades para desenvolvimento estabelecidas pelo W3C.