CSS - Introdução aos principais conceitos e seletores

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

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.

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.

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
() para proteger browsers antigos da
exibição indesejada do código.

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 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 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.

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.
Atributo E[att~=val]
a um valor qualquer separado por um espaço de um valor igual a val.
Atributo E[att|=val] a um valor qualquer separado por um hífen de um valor começando
com val.

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

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>:

11

<head>
<style type = "text/css" >

</style>
</head>

12

 A seguir, segue uma descrição mais detalhada do
uso de estilos e dos seletores para a aplicação de
estilos CSS.

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>.

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>.

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.

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.

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.

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.

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.

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>

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;}

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.

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.

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

 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

 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

 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

 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.

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.

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.

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.

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

 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 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>

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 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

 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

 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 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.

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

 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 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".

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 }

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; }

CSS - Introdução aos principais conceitos e seletores

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (13)

Semelhante a CSS - Introdução aos principais conceitos e seletores

Semelhante a CSS - Introdução aos principais conceitos e seletores (20)

CSS - Introdução aos principais conceitos e seletores