O documento descreve os conceitos básicos de CSS (Cascading Style Sheets), incluindo suas definições, formas de uso, aplicação de estilos e seletores. CSS permite definir estilos para elementos HTML de forma a propiciar consistência visual no documento.
1. Cascading Style Sheets – CSS
(Parte 1)
Centro Universitário de Patos de Minas
FACIA – Faculdade de Ciências Administrativas
Desenvolvimento para Web I
Prof. Me. Willyan Silva
http://wjsilva.com.br/cursos/desenvWebI
2. CSS – Definição
2
Consiste de uma ou mais definições de estilo
(tamanho de fonte, estilo da fonte, alinhamento de
texto, cor de texto e do fundo, margens, altura da
linha, etc.) para elementos HTML que podem ser
referenciado ou embutidos em documentos HTML.
Esta funcionalidade foi criada para propiciar aos
desenvolvedores e projetistas Web a possibilidade
de contar com estilos e posicionamentos consistentes
no documento.
3. CSS – Uso de Estilos
3
Existem várias formas de se definir estilos. Eles
podem ser inseridos inline, usando o atributo style
definido na seção <style> ou referenciados usando
o comando <link>.
Ainda existem várias formas de se aplicar um estilo.
Podem ser aplicados globalmente no documento ou
individualmente a cada elemento.
4. CSS – Definição de Estilos
4 Ver exemplo: 01 - style.html
<style>
Possui um atributo type que informa ao browser qual
tipo de estilo está sendo definido.
Para CSS, o valor desse atributo é “text/CSS”.
As propriedades declaradas em <style> sobrepõem
qualquer propriedade anterior do elemento (inclusive
as de uma folha de estilos importada, se houver).
É comum colocar todo o código entre comentários HTML
(<!-- e -->) para proteger browsers antigos da
exibição indesejada do código.
5. CSS – Definição de Estilos
5
<link>
Marcação usada para ligar arquivos de estilos externos
(.css) ao documento HTML (.html).
Caso se queira armazenar todos ou um conjunto de
estilos em um único local para que as mudanças sejam
globalmente aplicadas, pode-se criar um arquivo de
estilos separado (com extensão .css) do código HTML
(com extensão .html).
Os atributos type e href do elemento <link> são usados
para definir o tipo de link e a URL que contém o estilo
desejado, respectivamente.
6. CSS – Definição de Estilos
6
CSS externos são construídos de forma similar
ao CSS definido dentro do documento.
A folha de estilos é armazenada numa URL
que contém as definições de estilos, mas os
elementos HTML <style> e </style> não são
necessários.
O elemento <link> deve estar contido na
seção <head> do documento HTML.
7. CSS – Definição de Estilos
7 Ver exemplos: “02 - link.html” e “arquivos/estilos.css”
Para se incluir um arquivo de estilos chamado
“estilos.css” deve-se usar:
<head>
<link rel="stylesheet" type="text/css"
href="arquivos/estilos.css" />
</head>
Atributo rel:
• Especifica o relacionamento entre o documento corrente e o
documento referenciado. Pode ser: alternate, appendix,
bookmark, chapter, contents, copyright, glossary, help, home,
index, next, prev, section, start, stylesheet, subsection.
• Para o caso de arquivo de estilo deve ser stylesheet.
8. Visão Geral dos Seletores CSS 2.1
8
Seletor Formato Descrição
Universal * Casa com qualquer elemento.
Tipo E Casa com qualquer elemento E.
Classe .info Casa com qualquer elemento cujo atributo class tem o valor info.
ID #footer Casa com qualquer elemento cuja id seja footer.
Descendente EF Casa com qualquer elemento F que seja descendente do elemento E.
Filho E>F Casa com qualquer elemento F que seja filho do elemento E.
Adjacente E+F Casa com qualquer elemento F que se segue imediatamente a E.
Casa com qualquer elemento E que tenha um
Atributo E[att]
atributo att independentemente do valor deste atributo.
Casa com qualquer elemento E que tenha um atributo att de valor igual
Atributo E[att=val]
a val.
Casa com qualquer elemento E que tenha um atributo att de valor igual
Atributo E[att~=val]
a um valor qualquer separado por um espaço de um valor igual a val.
Casa com qualquer elemento E que tenha um atributo att de valor igual
Atributo E[att|=val] a um valor qualquer separado por um hífen de um valor começando
com val.
9. Visão Geral dos Seletores CSS 2.1
9
Seletor Formato Descrição
Pseudo classe
E:first-child Casa com o elemento E que for o primeiro filho do seu elemento pai.
:first-child
Pseudo classe E:link Casa com link ainda não visitado (:link) ou com link já visitado
link E:visited (:visited) links.
E:active
Pseudo classes
E:hover Casa com E quando de uma ação do usuário.
dinâmicas
E:focus
Pseudo classe
E:lang(c) Casa com elementos E escritos no idioma c.
:language
Pseudo-elemento
E:first-line Casa com o conteúdo da primeira linha do elemento E.
:first-line
Pseudo-elemento
E:first-letter Casa com a primeira letra do elemento E.
:first-letter
Pseudo-elementos E:before Usado para gerar conteúdo antes ou depois do conteúdo do
:before e :after E:after elemento E.
Para mais informações sobre Seletores, visitar:
http://maujor.com/tutorial/seletores_css21_parte1.php
10. CSS – Aplicação de Estilos
10
Os seletores apresentados na tabela anterior
devem ser usados para se definir e aplicar os
estilos.
Para aplicar um estilo globalmente para cada
instância do mesmo elemento, deve-se especificar o
elemento e as mudanças de estilo correspondentes.
Por exemplo, para mudar todas as instâncias do
elemento <p> para serem exibidas em tamanho 16 e
itálico, deve-se inserir o seguinte código na seção
<head>:
12. CSS – Aplicação de Estilos
12
A seguir, segue uma descrição mais detalhada do
uso de estilos e dos seletores para a aplicação de
estilos CSS.
13. CSS – O Atributo id
13 Ver exemplo: 03 - id.html
Pode-se usar o atributo id dos elementos HTML para
a aplicação de estilo a um elemento específico do
documento HTML.
Portanto, o elemento que possua o id específico para
o qual foi aplicado um estilo sofrerá a modificação.
O caractere ‘#’ é usado para definir um estilo
através do uso do atributo identificador (id).
O exemplo do arquivo “03 - id.html” mostra a
criação de um estilo para o identificador “heading”
usado no elemento HTML <p>.
14. CSS – O Atributo class
14 Ver exemplo: 04 - class.html
Pode definir uma classe de estilos através do atributo por
class.
Portanto, em qualquer elemento HTML que pertencer à classe
de estilos definido por class será aplicado o estilo definido.
Classes de estilo são uma forma de agrupar propriedades de
estilos que serão utilizadas em várias partes do documento.
O caractere ‘.’ é usado para definir um estilo através do uso
de classes (class).
No próximo exemplo definem-se duas classes de estilo que
são aplicados a diferentes elementos HTML <p> e <h1>.
15. CSS – Aplicação Direta de Estilos
15
Há uma forma de aplicar estilos diretamente a um
elemento individual.
Deve-se usar o atributo style em quase qualquer
descritor.
Este método não corresponde exatamente a uma
"folha" de estilos, pois os estilos aplicados não são
reaproveitáveis.
Permite alterar a aparência de um único descritor, de
um conjunto deles ou de um bloco de informações da
página.
16. CSS – Aplicação Direta de Estilos
16 Ver exemplo: 05 - style direto.html
Exemplo:
<p style="color: blue; font-size: 20pt">Texto</p>
Esta propriedade é mais interessante quando aplicada a um
descritor que é usado para agrupar vários outros, como <div>,
que divide a página em seções ou <span>, usado em
situações bem específicas.
Usar estilos desta forma é pouco diferente de usar atributos
locais.
Os benefícios de poder mudar a fonte, cores e outras
características em todo o documento ficam mais difíceis.
17. CSS – O elemento <span>
17 Ver exemplo: 06 - span.html
Pode-se também aplicar estilo através dos
elementos <span> e </span>.
Esses elementos são usados para marcar uma parte
específica do texto na qual o estilo deve ser
aplicado.
Usado quando um trecho do texto dentro de um
elemento precisa ter um estilo aplicado.
18. Descritores HTML especiais
18
<div> e <span> (descrito anteriormente).
<div> é um descritor que define um bloco ou seção da
página.
Pode ser usado para dividir a página em seções (e
subseções no IE) e permitir que sejam aplicados estilos
específicos a essas seções.
Descritores de bloco são <p>, <h1>, <table>, etc.
<div> define um bloco sem função ou aparência definida.
A função e aparência serão determinadas em CSS.
19. CSS – Herança
19
Os estilos "herdam" propriedades de várias
maneiras.
Uma das formas é através da própria hierarquia
do HTML.
Se forem declaras propriedades para <body> ou
para *, todos os descritores serão afetados a não
ser que tenham as suas propriedades redefinidas
dentro de um novo bloco de declarações CSS.
20. CSS – Herança
20
Se um <i> está dentro de um <p> e todos os <p> são
declarados como tendo a cor vermelha, o <i> também
será vermelho, a menos que haja um bloco posterior
àquela declaração redefinindo as propriedades de
<i>, por exemplo:
p {font: 12pt "Times New Roman" bold; color: red}
i {color: black}
faria com que "seletor", no texto a seguir permanecesse preto:
<p>Um <i>seletor</i> é algo no qual se pode aplicar
um estilo.</p>
21. Links (Pseudo-classes e Pseudo-elementos)
21 Ver exemplos: “07 - pseudo.html” e “arquivos/pseudo.css”
Para seletores especiais que mudam de estado, como o seletor
<a>, é possível atribuir propriedades diferentes para cada estado:
a:link {color: navy;}
a:active {color: red;}
a:visited {color: green;}
a:hover {color: black; text-decoration: underline;}
Muda as características de link não-visitado, ativo e visitado e do
link quando o mouse passa sobre ele.
Assim como qualquer seletor, os links podem ser combinados com
outros descritores:
ol, a:link, h2 {color: navy, text-decoration: none;}
22. CSS – Seletores Mistos
22 Ver exemplo: 08 - seletor misto.html
A implementação de múltiplas folhas de estilo
possibilita a definição de estilo múltiplo para
elementos HTML.
Qualquer definição de estilo numa folha de estilo
sempre terá precedência sobre qualquer estilo
definido anteriormente no documento.
23. CSS – Seletores de contexto
23
Podem-se definir seletores que só serão aplicados se
estiverem no contexto de um outro seletor, por exemplo:
p.verde em {color: #004400;}
indica que o <em> só terá sua cor alterada se ocorrer dentro
de um bloco <p> da classe "verde".
.especial p ul ul li a.classX:link
{font-style: italic;}
fará com que apenas os links não visitados da classe "classX"
que estejam dentro de itens de lista de segundo nível situados
dentro de um parágrafo dentro de um bloco qualquer da
classe "especial" sejam mostradas em itálico.
24. CSS – Cascata de folhas de estilo
24
Há diferentes folhas de estilo que podem ser
definidas que serão estudas posteriormente.
Há ainda, segundo a especificação, mais três
folhas de estilos que podem afetar uma página:
1) Folha de estilos que é importada por outra folha de
estilos
2) Folha de estilos definida pelo usuário (ou leitor da
página)
3) Folha de estilos default do browser (que é usada quando
outra folha não define os estilos).
25. CSS – Cascata de folhas de estilo
25
Todas essas folhas de estilo diferentes podem
provocar uma grande confusão se não houver uma
regra clara de como devem ser consideradas.
Ainda há um outro fator que é a formatação
introduzida pelo HTML, como nos descritores
<font> ou atributos align=center.
26. CSS – Cascata de folhas de estilo
26
Folhas de estilos que podem afetar um texto:
Folha de estilos default do browser: todos os browsers
possuem regras comuns para formatar um texto. A
especificação HTML não impõe uma formatação
padrão.
Folha de estilos definida pelo leitor: a especificação
define a possibilidade de o leitor estabelecer uma
folha de estilos própria. Isto é parcialmente conseguido
quando o browser permite que se escolha diferentes
cores para fundo, texto e links.
27. CSS – Cascata de folhas de estilo
27
Folhas de estilos que podem afetar um texto (cont.):
Folha de estilos vinculada ao HTML: é a folha de estilos
que é importada pelo arquivo HTML através do
descritor de ligação <link>.
Folha de estilos importada: uma folha de estilos
externa (arquivo CSS) pode ser importada de dentro
de outra folha de estilos (um outro arquivo CSS ou
bloco <style> no HTML) usando um comando especial
@import. Exemplo:
@import url(arquivos/outroestilo.css);
28. CSS – Cascata de folhas de estilo
28
Folhas de estilos que podem afetar um texto (cont.):
Folha de estilos embutida no HTML: é a folha de estilos que
aparece na página HTML entre os descritores <style> e
</style>.
Folha de estilos local: é aquela que é aplicada localmente
a um descritor usando o atributo style="lista de
declarações".
Estilo definido pelo HTML: atributos e descritores podem
provocar alterações na aparência do texto, por exemplo:
<font size>, <big>, <body bgcolor>,
<p align="center">, etc.
29. CSS – Fontes
29
Fontes são estilos de apresentação consistentes
aplicados a caracteres de texto.
Uma fonte consiste de atributos que alteram a
aparência de um símbolo, sem alterar o seu
significado.
Oferecem as informações necessárias para que
uma letra ou símbolo possa ser representado
graficamente.
30. CSS – Fontes
30
Os atributos essenciais de uma fonte são:
Tipo (ou família): font-family
Tamanho: font-size
Estilo (regular, itálico, outline, etc.): font-style
Peso (normal, negrito, light, black): font-weight
Para representar qualquer texto, portanto, é
preciso escolher uma fonte, ou seja: um tipo, um
estilo, um peso e um tamanho.
31. CSS – Fontes
31
Letras maiúsculas e minúsculas são consideradas
fontes diferentes, pois têm um significado distinto.
font-family, font-size, font-style e font-weight:
Não é preciso definir todas, pois sempre há valores
default.
CSS oferece ainda font-variant, que permite considerar
outras variações de uma fonte.
32. CSS – Fontes: font-family
32
Aceita uma lista de valores separados por vírgulas
representando nomes de fontes existentes ou não no
sistema do usuário.
No final da lista, pode ser incluída uma referência a
uma família genérica, que será usada caso nenhum
dos nomes coincida com o nome de uma fonte do
sistema.
A sintaxe é:
font-family: fonte1, fonte2, fonte3, ..., fonte-genérica
33. CSS – Fontes: font-family
33
Exemplos:
h1 { font-family: garamond }
h2 { font-family: arial, helvetica, sans-serif }
h3 { font-family: courier, "courier new", monospaced }
h4 { font-family: monospaced }
As fontes sans-serif e monospaced são nomes
genéricos. Não se referem a uma fonte em particular,
mas a um grupo genérico. Os outros são serif,
cursive e fantasy.
34. CSS – Fontes: font-family
34 Ver exemplos: “09 - font-family.html” e “arquivos/fontes.css”
O browser usará a 1ª fonte da lista se a encontrar. Se não
encontrar, irá procurar a fonte seguinte.
Se o nome de uma fonte tiver mais de uma palavra, este deverá ser
colocado entre aspas (simples – no arquivo de HTML – ou aspas
duplas):
<p style="font-family: 'times new roman', sans-serif">...</p>
35. CSS – Fontes: font-size
35
Especifica o tamanho da fonte, pode ser em valores absolutos ou
relativos. Para especificar um valor absoluto, pode-se usar:
font-size: número(pt | px | cm | mm | pc | in)
font-size: xx-small | x-small | small | medium | large | x-
large | xx-large
O tamanho também pode ser especificado relativo ao elemento
no qual o atual objeto está contido.
font-size: tamanho_relativo (smaller, larger)
font-size: comprimento (em ou ex)
font-size: porcentagem (%)
36. CSS – Fontes: font-size
36
Exemplos:
h1 { font-size: 24pt }
h1 { font-size: x-large }
h1 { font-size: 1.5em }
h1 { font-size: 150% }
Os tamanhos de pontos devem ser especificados como valores
inteiros (mesmo se usados cm ou in).
Os browsers podem formatar os tamanhos de forma diferente e
eles podem ser alterados pelos usuários nos browsers atuais.
As unidades válidas são:
px (pixels), pt (pontos), pc (paicas), cm (centímetros), mm (milímetros) e
in (polegadas).
37. CSS – Fontes: font-size
37 Ver exemplos: “10 - font-size.html” e “arquivos/fontes.css”
Os tamanhos absolutos chamados pelo nome (xx-small, etc.)
correspondem aos tamanhos de 1 a 7 do descritor <font
size> e podem variar de acordo com a família de fontes
usada (variam bastante entre navegadores também).
Os tamanhos relativos funcionam como o <big> e <small>,
aumentando a fonte atual por 150%. A diferença é que
podem passar além do limite xx-large (ou <font size=7>) ou
xx-small (font size=1>).
38. CSS – Fontes: font-size
38
Os comprimentos referem-se a unidades comuns em
tipografia.
Um "em" é uma distância horizontal equivalente ao tamanho
de uma fonte
se uma fonte tem 20 pontos de tamanho, um "em" corresponde a uma
distância de 20 pixels de largura).
Um "ex" é a altura das letras de caixa-baixa (sem incluir as
hastes ascendentes e descendentes).
Tanto "em" como "ex" usam valores relativos ao elemento que
contém o elemento atual. São úteis principalmente em
espaçamento, sendo pouco usados em fontes.
39. CSS – Fontes: font-size
39
As porcentagens são afetadas pela herança, por
exemplo:
.sec {font-size: 18pt}
.sec H1 {font-size: 200%}
.sec P {font-size: 50%}
No arquivo .html:
<div class="sec">
Este é o texto desta seção.
<h1>2 vezes maior</h1>
<p>Este é um parágrafo da seção. O texto tem 50% do tamanho do
texto da seção.</p>
</div>
40. CSS – Fontes: font-size
40 Ver exemplos: “10 - font-size.html” e “arquivos/fontes.css”
As porcentagens de 50% e 200% são aplicadas na
fonte atual, que é a fonte do bloco que contém os
dois elementos (<div>), e que tem tamanho 18pt.
O resultado é que o <h1> será exibido em
tamanho 36pt e <p> em tamanho 9pt.
41. CSS – Fontes: font-style e font-weight
41
O estilo de uma fonte é afetado através de duas
diferentes propriedades: font-weight, que altera o
peso da fonte, e font-style, que altera o estilo ou
inclinação. Sintaxe:
font-style: normal (ou italic, oblique)
font-weight: normal | bold (normal=400 e bold = 700)
font-weight: bolder | lighter (valores relativos)
font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 |
800 | 900
42. CSS – Fontes: font-style e font-weight
42
A palavra "oblique" deve fazer com que fontes
chamadas de "oblique" (se existirem no sistema)
sejam usadas, assim como ocorre com fontes "italic".
A rigor, italic é uma fonte distinta da normal, e não
meramente uma versão inclinada da mesma.
Os browsers, porém, não encontrando um
equivalente "italic", "oblique", "kursiv" ou similar
irão inclinar o texto, simulando um itálico.
43. CSS – Fontes: font-style e font-weight
43 Ver exemplos: “11 - font-style_weight.html” e “arquivos/fontes.css”
Os valores numéricos para font-weight oferecem um
controle excepcional sobre o peso da fonte na tela,
embora isto esteja limitado aos níveis disponíveis nas
fontes instaladas (para um mesmo nome de fonte).
Na prática, dos 9 níveis disponíveis de peso, se
consegue 4 ou 5 níveis diferentes de mais pesado ou
mais leve.
700 é o "bold" típico e 400 é o "normal".
44. CSS – Fontes: font-variant
44 Ver exemplos: “12 - font-variant.html” e “arquivos/fontes.css”
Atualmente a única opção disponível para esta
propriedade é “small-caps”, que deve colocar o
texto selecionado em maiúsculas, porém menores
que as capitulares.
Sintaxe:
font-variant: small-caps
Exemplo:
.sc { font-variant: small-caps }
45. CSS – A propriedade font
45
Para especificar várias propriedades de um seletor de uma
vez só, pode-se usar a propriedade font em vez de definir em
separado font-size, font-weight, font-family, etc. Sintaxe:
font: font-style font-variant font-weight font-size
line-height font-family
Nesta sintaxe, a ordem dos fatores é importante, porém nem
todos os elementos precisam estar presentes.
Exemplos:
.prop_font { font: italic 700 24pt Tahoma, Arial, sans-serif; }