Css Diego Aragao

ÃO
Apostila de CSS
AG
W3 Schools traduzido e revisado por

AR
Lauro Santos
O
G
IE
D
BR Multimídia - www.brmultimidia.com.br
Centro Empresarial Iguatemi, Bloco B, sala 308 – Caminho das Árvores
Telfax:. 71 34501477 - contato@brmultimidia.com.br
Sumário
Introdução ao CSS................................................................................................................................3
O que é CSS?...................................................................................................................................3
Sintaxe.............................................................................................................................................3
Agrupamento...................................................................................................................................3
O Seletor de classe...........................................................................................................................4
O Seletor ID.....................................................................................................................................4
Comentários CSS.............................................................................................................................5
Ordem da Cascata............................................................................................................................5
Como inserir uma Folha de Estilo........................................................................................................6
Folha de estilo externa.....................................................................................................................6
Folha de estilo interna......................................................................................................................7
Estilos de Inline...............................................................................................................................7
Folhas de estilo múltiplas................................................................................................................7

Propriedades.........................................................................................................................................9
Background......................................................................................................................................9
ÃO
Textos.................................................................................................................................................11
AG
Font.....................................................................................................................................................12
Border.................................................................................................................................................14
AR
Margin................................................................................................................................................16
O
Padding...............................................................................................................................................17
G
List......................................................................................................................................................18
IE
Dimensões..........................................................................................................................................19
D
Classificação.......................................................................................................................................20
Posicionamento...................................................................................................................................22
Sintaxe...........................................................................................................................................23
Pseudo-classes de Links.................................................................................................................23
Pseudo-classes e Classes CSS .......................................................................................................23
CSS2 - A Pseudo-class :first-child ................................................................................................23
CSS2 - A Pseudo-classe :lang .......................................................................................................25
Sintaxe:..........................................................................................................................................26
Pseudo-elemento:first-line.............................................................................................................26
Pseudo-elemento :first-letter ........................................................................................................27
Pseudo-elementos e classes CSS...................................................................................................27
Múltiplos Pseudo-elementos..........................................................................................................28
CSS2 - Pseudo-elemento :before...................................................................................................28
CSS2 – Pseudo-elemento :after ....................................................................................................28
CSS2 - Tipos de mídia........................................................................................................................29
Tipos de mídia...............................................................................................................................29
A Regra @media...........................................................................................................................29
Tipos de mídia ..............................................................................................................................30
Unidades de medidas..........................................................................................................................31
Cores...................................................................................................................................................31
ÃO
AG
AR
O
G
IE
D
Introdução ao CSS
O que é CSS?
● CSS é a abreviação de Cascading Style Sheets(Folhas de Estilos em Cascata)
● Estilos definem como exibir elementos de HTML
● Estilos estão normalmente armazenados em Folhas de Estilo
● Estilos separam a apresentação da estrutura
● Folhas de Estilo Externas podem economizar o seu tempo
● Folhas de Estilo Externas são armazenadas em arquivos CSS
Sintaxe CSS
Sintaxe
A sintaxe de CSS é composta de três partes: Um seletor, uma propriedade e um valor:
seletor {propriedade: valor}
O seletor é normalmente o tag/elemento HTML que você deseja definir, a propriedade é o atributo
ÃO
que você deseja mudar, e cada propriedade pode receber um valor. A propriedade e valor ficam
dentro de chaves e são separados por um dois pontos:
AG
body {color: black}

AR
O
Nota: Se o valor possui múltiplas palavras, ponha aspas em torno do valor:

G
P {font-family: "sans serifa"}

IE
D
Nota: Se você desejar especificar mais de uma propriedade, você deve separar cada propriedade
com um ponto-e-vírgula. O exemplo abaixo mostra como definir um parágrafo alinhado ao centro,
com a cor do texto vermelho:
P {text-align:center;color:red}
Para fazer as definições de estilo mais legível, você pode descrever uma propriedade em cada linha,
como isto:
p{
text-align: Centro;
color: Preto;
font-family: Arial
}
Agrupamento
Você pode agrupar seletores. Separe cada seletor com uma vírgula. No exemplo abaixo foram
agrupados todos os elementos de cabeçalho. Todos elementos de cabeçalho serão exibidos em cor
de texto verde:
h1,h2,h3,h4,h5,h6 {
color: green
O Seletor de classe
Com o seletor de classe você pode definir estilos diferentes para o mesmo tipo de elemento de
HTML.
Diga que você gostaria de ter dois tipos de parágrafos em seu documento: Um alinhado a direita e
outro alinha ao centro. Você pode fazer isso da seguinte maneira:
p .right {text-align: certo}
p .center {text-align: centro}
Você tem que usar o atributo de classe em seu documento de HTML:

<p classe="right">
Este parágrafo será alinhado a direita.
</p>
<p classe="centro">
Este parágrafo será alinhado ao centro.
ÃO
</p>
AG
Nota: Só um atributo class pode ser especificado em um elemento de HTML! O exemplo abaixo
AR
está errado:
<p class="right" class="center">
O
G
This is a paragraph.
IE
</p>
D
Você também pode omitir o nome de tag no seletor para definir um estilo que será usado por todos
elementos de HTML que possuem um determinado estilo de classe. No exemplo abaixo, todos
elementos de HTML com classe="center" serão alinhados ao centro:
.center {text-align: center}
No código abaixo os elementos h1 e p possuem o class="center". Isso significa que ambos os

elementos seguirão as regras do seletor “.center”:
<h1 classe="centro">
Este cabeçalho será centro-alinhado
</h1>
<p classe="centro">
Este parágrafo também será centro-alinhado.
</p>
Nota: Não comece um nome de classe com um número! Não funcionará no Mozilla/Firefox.
O Seletor ID
Você também pode definir estilos para elementos de HTML com o seletor ID. O seletor ID é
definido como um # no início de seu nome.
O regra de estilo abaixo mudará a cor do elemento que tem um atributo ID "verde" :
#verde {color: green}
O regra de estilo mudará a cor e alinhamento do elemento p que tem um iD “para1”":

p #para1{
text-align: center;
color: red;
}
Nota: Não comece um nome de ID com um número! Não funcionará no Mozilla/Firefox.
Comentários CSS
Os comentários são usados para explicar seu código, e pode ajudar você quando você editar o
código de fonte antigo. O comentário será ignorado pelos browsers. Um comentário CSS começa
com "/*", e termina com "*/", como este:
ÃO
/* Isto é um comentário */
p{
AG
text-align: center;
AR
/* Isto é outro comentário */

color: black;
O
G
font-family: Arial
IE
}
D
Ordem da Cascata
Que estilo será usado quando existe mais de um estilo especificado para um mesmo elemento de
HTML?
Falando de modo geral nós podemos dizer que todos os estilos legam "cascata" dentro de uma nova
folha de estilo virtual pela seguinte ordem, onde número quatro tem a prioridade mais alta:
1. Padrão do Browser
2. Folha de estilo externa
3. Folha de estilo interno (dentro da <head> etiqueta)
4. Estilo de Inline (dentro de um elemento HTML)
Então, um estilo inline (dentro de um elemento HTML) tem a prioridade mais alta, significa que ele
anulará um estilo declarado dentro da tag <head>, uma folha de estilo externo, ou do Browser
(valor default).
Como inserir uma Folha de Estilo
Quando um Browser ler uma folha de estilo, formatará o documento de acordo com as regras
inseridas nela. Existem três modos de inserir uma folha de estilo:
Folha de estilo externa

Uma folha de estilo externo é ideal quando o estilo for aplicado a muitas páginas. Com uma folha
de estilo externo, você pode mudar o layout de Site inteiro alterando somente um arquivo. Cada
página deve estar ligar a folha de estilo usando a tag <link> ou a tag <style>.
A tag <link> é inserida dentro da tag <head> da página HTML:

<head>
<link rel="stylesheet" type="text/css" href="meuestilo.css" />
</head>
A tag <style> também é inserida dentro da tag <head> do HTML:
<head>
ÃO
<style type="text/css">
AG

O
</style>
G
IE
</head>
D
Note: Um Browser normalmente ignora tags desconhecidas. Isto significa que um Browser antigo
que não sustenta estilos, ignorará a tag <style> , mas o conteúdo do tag <style> será exibido na
página. É possível prevenir que um Browser antigo exiba o conteúdo inderindo um comentário de
HTML dentro da tag <style>
O Browser lerá as definições de estilo do arquivo meuestilo.css, e formatará o documento de acordo

com ela.
Uma folha de estilo externo pode ser escrita em qualquer editor de texto. O arquivo pode conter
nenhuma tag HTML. Sua arquivo de folha de estilo deve ser salvo com a extensão .css. Um
exemplo de um arquivo de folha de estilo é mostrado abaixo:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: uRL("images/back40.gif")}
Não deixe espaços entre o valor de propriedade e as unidades! Se você usar "margem-left: 20 px"
em vez de "margem-left: 20px" só funcionará corretamente em IE6 e não no Mozilla/Firefox ou
Netscape.
Folha de estilo interna
Uma folha de estilo interno deve ser usada quando um documento HTML não compartilhar os
estilos com outro documento HTML. Você define estilos internos dentro da tag <head> usando a
tag <style>:
<head>
hr {color: sienna}
body {background-image: url("images/back40.gif")}
</style>
</head>
O Browser agora lerá as definições de estilo, e formatar o documento de acordo com elas.
Nota: Para evitar que browsers antigos exibam o conteúdo da tag <style> insira suas regras de estilo
dentro de um comentário HTML.
<head>
ÃO

O
G
</style>
IE
</head>
D
Estilos de Inline
Um estilo inline perde muitas das vantagens de folhas de estilo misturando conteúdo com
apresentação. Use este método raramente, como quando um estilo for para ser aplicado somente a
uma ocorrência de um elemento.
Para usar inline estilos que você usa o atributo de style na tag relacionada. O atributo de estilo pode
conter qualquer propriedade de CSS. O exemplo mostra como mudar a cor e a margem deixada de
um parágrafo:
<p style="color: sienna; margin-left: 20px">
Este é um parágrafo
</p>
Folhas de estilo múltiplas

Se algumas propriedades fossem fixadas para o mesmo seletor em folhas de estilo diferentes, os
valores serão herdados da folha de estilo de acordo com o nível de prioridade.
Por exemplo, uma folha de estilo externo tem estas propriedades para o h3 seletor:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
E uma folha de estilo interno tem estas propriedades para o seletor h3:
h3
{
text-align: right;
font-size: 20pt
}
ÃO
Se a página com a folha de estilo interno também possuir vinculo com a folha de estilo externo as
AG
propriedades para h3 serão:

color: red;
AR
text-align: right;
O
font-size: 20pt
G
IE
D
A cor é herdada da folha de estilo externo e o alinhamento de texto e o tamanha da fonte serão
substituídos pela folha de estilo interno.
Propriedades
Suporte de Browser: IE: Internet Explorer, F: Firefox, N: Netscape.
CSS: indica em que recomendação de CSS a propriedade é definida (CSS1 ou CSS2).
ÃO
AG
AR
O
G
IE
D
Background
As propriedades de background de CSS permitem que você controle a cor de fundo de um
elemento, imagem de background, repetição da uma imagem de background verticalmente ou
horizontalmente, e posicionamento da imagem na página.
Propriedade Descrição Valores IE F N CSS

background Uma propriedade background-color 4 1 6 1
(shorthand) para inserir background-image
todas propriedades background-repeat
Background em uma background-
declaração attachment
background-position
background-attachment Fixed se uma imagem de scroll 4 1 6 1
fundo é fixa ou scroll se fixed
movimenta com o resto
da página
ÃO
background-color Muda a cor de color-rgb 4 1 4 1

AG
background de uma color-hex

elemento color-name
AR
transparent
O
G
background-image Insere uma imagem de url(imagem.jpg) 4 1 4 1

IE
background none
D
background-position Define a posição incial top left 4 1 6 1

da imagem de top center
background top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat Define a repetição de repeat 4 1 4 1
uma imagem de repeat-x
background repeat-y
no-repeat
Textos
As propriedades de texto do CSS permitem que você controle a aparência do texto. É possível
mudar a cor de um texto, aumentar ou diminuir o espaço entre caracteres em um texto, alinhar um
texto, decorar um texto, recuar a primeira linha em um texto, e mais.
color Muda a cor do texto color 3 1 4 1
direction Muda a direção do texto ltr 6 1 6 2
rtl
letter-spacing Aumenta ou diminui o normal 4 1 6 1
espaçamento entre caracteres largura
text-align Alinha o texto em um elemento left 4 1 4 1
right
center
justify
ÃO
text-decoration Adiciona decoração no texto none 4 1 4 1

underline
AG
overline
AR
line-through
blink
O
G
text-indent Identação da primeira linha do largura 4 1 4 1

IE
texto de um elmento %
D
text-shadow none
color
largura
text-transform Controla as letras de um none 4 1 4 1
elemento (maiúsculas e capitalize
minúsculas) uppercase
lowercase
unicode-bidi normal 5 2
embed
bidi-override
white-space Controla o espaçamento dentro normal 5 1 4 1
de um elemento pre
nowrap
word-spacing Controla o espaçamento entre normal 6 1 6 1
palavras largura
ÃO
AG
AR
O
G
IE
D
Font
As propriedades font do CSS permitem que você mude a família de fonte, largura, tamanho, e o
estilo de um texto.
Note: No CSS1 as fonte são identificadas pelo nome da fonte. Se um Browser não sustenta o fonte
especificada, usará uma fonte padrão.

font Uma propriedade(shorthand) para font-style 4 1 4 1
inserir todas propriedades font em font-variant
uma declaração font-weight
font-size/line-height
font-family
caption
icon
menu
ÃO
message-box
small-caption
AG
status-bar
AR
font-family Lista de fontes por família e/ou family-name 3 1 4 1

O
nome genérico da família da fonte generic-family

G
de um elemento
IE
D
font-size Muda o tamanho de uma fonte xx-small 3 1 4 1

x-small
small
medium
large
x-large
xx-large
smaller
larger
largura
%
font-size-adjust Especifique um valor de aspecto none - - - 2
para um elemento que preservará a number
x-altura do primeira escolha de
fonte
font-stretch Condensa ou expande a atual normal - - - 2
família de fontes wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Muda o estilo de uma fonte normal 4 1 4 1
italic
oblique
font-variant Exibe o texto em maiúsculas ou normal 4 1 6 1
normal small-caps
font-weight Muda a largura da fonte normal 4 1 4 1
bold
bolder
lighter
100
ÃO
200
AG
300
AR
400
500
O
600
G
IE
700
D
800
900
Border
As propriedade border do CSS permitirem que você especifique o estilo e cor de borda do elemento.
Em HTML nós usamos tabelas para criar bordas ao redor um texto, mas com a propriedade border
do CSS nós podemos criar bordas com efeitos, além de poder aplica-las a qualquer elemento.

border Uma propriedade border-width 4 1 4 1
resumida(shorthand) para inserir border-style
todas as 4 propriedades border em border-color
uma declaração
border-bottom Uma propriedade resumida border-bottom-width 4 1 6 1
(shorthand) para inserir todas as border-style
propriedades border-bottom em border-color
uma declaração
border-bottom-color Define a cor da borda inferior border-color 4 1 6 2
ÃO
border-bottom-style Define o estilo da borda inferior border-style 4 1 6 2

AG
border-bottom-width Define a largura da borda inferior thin 4 1 4 1

AR
medium
O
thick
G
largura
IE
D
border-color Define a uma cor para as quatro color(RGB, HEX, 4 1 6 1

bordas Name)
border-left Uma propriedade resumida border-left-width 4 1 6 1
propriedades border-left em uma border-color
declaração
border-left-color Define a cor da borda esquerda border-color 4 1 6 2
border-left-style Define o estilo da borda esquerda border-style 4 1 6 2
border-left-width Define a largura da borda esquerda thin 4 1 4 1
medium
thick
largura
border-right Uma propriedade resumida border-right-width 4 1 6 1
propriedades border-right em uma border-color
declaração
border-right-color Define a cor da borda direita border-color 4 1 6 2
border-right-style
Define o estilo da borda direita border-style 4 1 6 2

border-right-width Define a largura da borda direita thin 4 1 4 1
medium
thick
largura
border-style Define um estilo para as quatro none 4 1 6 1
bordas hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top Uma propriedade resumida border-top-width 4 1 6 1
ÃO
propriedades border-top em uma border-color

AG
declaração
AR
border-top-color Define a cor da borda superior border-color 4 1 6 2

O
border-top-style Define o estilo da borda superior border-style 4 1 6 2

G
IE
border-top-width Define a largura da borda superior thin 4 1 4 1

D
medium
thick
largura
border-width Uma propriedade resumida thin 4 1 4 1
(shorthand) para modificar todas as medium
4 larguras de borda (border-width) thick
em uma declaração largura
Margin
As propriedades margin do CSS definem o espaço ao redor elementos. É possível usar valores
negativos para sobrepor conteúdo. As margens topo, direita, inferior, e esquerda são independentes
e podem receber valores diferentes. A propriedade margin (shorthand) também pode ser usada para
mudar todas as margens de uma vez.
Nota: O Netscape e IE inserem na tag <body> uma margem padrão de 8px. O Ópera aplica um
padding default de 8px, se quiser ajustar a margem para uma página inteira e exibir corretamente no
Ópera, o padding de <body> deve ser fixado também!

margin Propriedade resumida (shorthand) que margin-top 4 1 4 1
ajusta todas as propriedades margin em margin-right
uma declaração margin-bottom
margin-left
margin-bottom Ajusta a margem inferior do elemento auto 4 1 4 1
ÃO
largura
%
AG
margin-left Ajusta a margem esquerda do elemento

AR
auto 3 1 4 1
largura
O
%
G
IE
margin-right Ajusta a margem direita do elemento auto 3 1 4 1

D
largura
%
margin-top Ajusta a margem superior do elemento auto 3 1 4 1
largura
%
Padding
As propriedades de padding do CSS definem o espaço entre a borda e o conteúdo de elemento. Os
valores negativos não são permitidos. O padding superior, direito, esquerdo e inferior são
independentes e podem receber valores diferentes. A propriedade padding (shorthand) também pode
ser usada para mudar todos os espaçamentos de uma vez.

padding Propriedade resumida (shorthand) que ajusta padding-top 4 1 4 1
todas as propriedades padding em uma padding-right
declaração padding-
bottom
padding-left
padding-bottom Define o padding inferior de um elemento length 4 1 4 1
%
padding-left Define o padding esquerdo de um elemento length 4 1 4 1
ÃO
%
AG
padding-right Define o padding direito de um elemento length 4 1 4 1

AR
%
O
padding-top Define o padding superior de um elemento length 4 1 4 1

G
%
IE
D
List
A propriedades list do CSS permitirem que você insira marcadores de itens de lista, mude os
marcadores, ou defina uma imagem marcador de lista.

list-style Propriedade resumida (shorthand) list-style-type 4 1 6 1
que permite definir todas as list-style-position
propriedades para uma lista em uma list-style-image
declaração
list-style-image Define uma imagem como marcador none 4 1 6 1
de lista url
list-style-position Define onde o marcador de uma inside 4 1 6 1
lista será exibido outside
list-style-type Define o tipo de marcador de lista none 4 1 4 1
ÃO
disc
circle
AG
square
AR
decimal
decimal-leading-zero
O
G
lower-roman
IE
upper-roman
D
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
marker-offset auto 1 7 2
length
Dimensões
As propriedades de dimensão do CSS permitem que você controle a altura e largura de um
elemento. Também permite que você aumente o espaço entre duas linhas.
Propriedade Descrição Valores IE F N W3C

height Define a altura de um elemento auto 4 1 6 1
length
%
line-height Define a distância entre linhas normal 4 1 4 1
number
length
%
max-height Define a altura máxima de um elemento none - 1 6 2
length
%
ÃO
max-width Define a largura máxima de um elemento none - 1 6 2

AG
length
AR
%
O
min-height Define a altura mínima de um elemento length - 1 6 2

G
%
IE
D
min-width Define a largura mínima de um elemento length - 1 6 2

%
width Define a largura de um elemento auto 4 1 4 1
%
length
Classificação
As propriedades de classificação do CSS permitem que você controle a exibição de um elemento,
posição de um elemento em relação a outro, posição um elemento usando um valor absoluto,
controle de visibilidade de um elemento.
Propriedade Descrição Valores IE F N W3C

clear Define o a posição de um elemento left 4 1 4 1
outros elementos não são permitidos right
na mesma posição both
none
cursor Especifica o tipo de cursor que será url 4 1 6 2
exibido auto
crosshair
default
pointer
ÃO
move
e-resize
AG
ne-resize
AR
nw-resize
O
n-resize
G
se-resize
IE
sw-resize
D
s-resize
w-resize
text
wait
help
display Define como/se um elemento será none 4 1 4 1
exibido inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-
group
table-footer-group
table-row
table-column-
group
table-column
table-cell
table-caption
float Define como uma imagem ou texto left 4 1 4 1
será exibido em dentro de outro right
elemento none
position Coloca o em uma posição estática, static 4 1 4 2
relativa, absoluta ou fixa relative
absolute
fixed
visibility Define se um elemento ser visível ou visible 4 1 6 2
não hidden
collapse
ÃO
AG
AR
O
G
IE
D
Posicionamento
As propriedades de posicionamento do CSS permitem que você especifique a posição de um
elemento. Também permite que você fixe a área visível de um elemento, coloque um elemento
atrás de outro, e especificar o que devia acontecer quando conteúdo de um elemento for muito
grande para se encaixar uma área especificada.
bottom Define a posicionamento inferior de um auto 5 1 6 2
elemento em relação a outro elemento pai %
length
clip Especifica as dimensões visíveis de um rect (top, right, 4 1 6 2
elemento bottom, left)
auto
left Define a posicionamento esquerdo de um auto 4 1 4 2
length
ÃO
overflow Define a área de limite de um elemento, visible 4 1 6 2

AG
quando o seu contéudo é maior do que a hidden

sua área scroll
AR
auto
O
G
position Define o posicionamento de um elemento static 4 1 4 2

IE
relative
D
absolute
fixed
right Define a posicionamento direito de um auto 5 1 6 2
length
top Define a posicionamento superior de um auto 4 1 4 2
length
vertical-align Define o alinhamento vertical de um baseline 4 1 4 1
elemento sub
super
top
text-top
middle
bottom
text-bottom
length
%
z-index
Define o nível visual de um elemento auto 4 1 6 2

number
Pseudo-classes
Sintaxe
A sintaxe de pseudo-classes:
Seletor:pseudo-classe {property: valor}
Classes CSS também podem ser usadas com pseudo-classes:

Seletor.classe:pseudo-classe {property: valor}
Pseudo-classes de Links
Todos os estados de um link (ativo, visitado, não visitado, ou quando você posiciona o mouse sobre
ÃO
ele) podem ser exibidos de diferentes modos em um Browser que suporte CSS:
AG
a:link {color: #FF0000} /* link não visitado */

AR
a:visited {color: #00FF00} /* link visitado */

O
a:hover {color: #FF00FF} /* mouse sobre o link */

G
IE
a:active {color: #0000FF} /* link selecionado */

D
Nota: a:hover DEVE vir depois de a:link e a:visited na definição de CSS para funcionar.
Nota: a:active DEVE vir depois de a:hover na definição de CSS a fim de ser efetivo!!
Nota: Os nomes de pseudo-classe não são case-sensitive.
Pseudo-classes e Classes CSS

As pseudo-classes podem ser combinadas com Classes CSS :
a.red:visited {color: #FF0000}
<a class="red" href="http://www.bahiamultimidia.com.br"> Sintaxe CSS</a>
Se o link no exemplo acima de foi visitado, será exibido em vermelho.
CSS2 - A Pseudo-class :first-child

A pseudo-classe :first-child modifica somente o primeiro elemento aninhado dentro de outro
elemento
Neste exemplo, o seletor modifica somente o primeiro parágrafo <p> que está aninhado dentro de
um elemento <div>:
div > p:first-child{
text-indent:25px
Este seletor combinará o primeiro parágrafo dentro do div no HTML seguinte:

<div>
<p>
Primeiro parágrafo na div.
Este parágrafo será indentado.
</p>
<p>
ÃO
Segundo parágrafo na div.

AG
AR
Este parágrafo não será indentado.

</p>
O
G
</div>
IE
D
Mas ele não combinará o parágrafo neste HTML:

<div>
<h1>Cabeçalho</h1>
<p>
O primeiro parágrafo dentro do div.
Este parágrafo não será indentado.
</p>
</div>
Neste exemplo, somente os elementos <em> dentro do primeiro elemento <p> será alterado:
p:first-child em{
font-weight:bold
}
Por exemplo, os elementos <em> primerio parágrafo abaixo será alterado para negrito. Já o <em>
do segundo paragráfo não será alterado:
<p>Eu sou um homem <em>forte</em>. Muito <em>forte</em></p>

<p>Eu sou um homem <em>fraco</em>. Muito <em>fraco</em></p>
Neste exemplo, o primeiro elemento <a> de qualquer elemento, terá a sua decoração padrão
(underline) removida:
a:first-child{
text-decoration:none;
}
Por exemplo, o primeiro elemento <a> no HTML abaixo é a primeiro elemento <a> do parágrafo e
não será sublinhado. Mas o segundo <a> no parágrafo será sublinhado:
<p>
ÃO
Visite <a href="http://www.bahiamultimidia.com.br">Bahia Multimídia</a>

AG
E escolha o seu curso!

AR
Visite <a href="http://www.bahiamultimidia.com.br">Bahia Multimídia</a>

O
Faça os melhores treinamentos da Bahia!

G
IE
</p>
D
CSS2 - A Pseudo-classe :lang

O pseudo-classe :lang permite que você defina regras especiais para idiomas diferentes. No
exemplo abaixo, a classe :lang define o tipo de aspas para q elementos com um lang atributo com
um valor de "não":
<html>
<head>
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head><body>
<p> Um pouco de texto <q lang="no">aspas no parágrafo</q>

. Mais um pouco de texto.</p>
</body></html>
Pseudo-class Propósito IE F N CSS

:active Adiciona um estilo para um elemento ativo 4 1 8 1
:focus Adiciona um estilo para um elemento quando ele está - - - 2
no foco
:hover Adiciona um estilo em um elmento quanto o o cursor 4 1 7 1
passa sobre ele
:link Adiciona um estilo para um link não visitado 3 1 4 1
ÃO
:visited Adiciona um estilo para um link visitado 3 1 4 1

AG
:first-child Adiciona um estilo para o primeiro elemento aninhado 7 1 7 2

AR
dentro de outro elemento

O
:lang Permite ao autor definir a linguagem usada em um 1 8 2

G
elemento específico
IE
D
Pseudo-Elementos
Sintaxe:
seletor:pseudo-elemento {propriedade: valor}
Classes CSS também podem ser usadas com pseudo-elementos:
selector.classe:pseudo-elemento {propriedade: valor}
Pseudo-elemento:first-line
O pseudo elemento":first-line" é usado para adicionar estilos especiais a primeira linha do texto em
um seletor:
p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}
<p>Um pouco de texto que cabe em duas linhas</p>
No exemplo acima do Browser exibe a primeira linha formatada de acordo com o pseudo-elemento
":first-line". Onde a quebra a linha depende do tamanho da janela do Browser.
Nota: O pseudo-elemento ":first-line" só pode ser usado com elementos em bloco.

Nota: As seguintes propriedades se aplicam ao "primeira-linha" pseudo elemento:
● font properties
● color properties
● background properties
● word-spacing
● letter-spacing
● text-decoration
● vertical-align
● text-transform
● line-height
● clear
ÃO
AG
Pseudo-elemento :first-letter
AR
O pseudo elemento":first-letter" é usado para adicionar estilo especial a primeira letra do texto de
O
um seletor:
G
IE
p {font-size: 12pt}
D
p:first-letter {font-size: 200%; float: left}

<p>As primeiras palavras de um artigo.</p>
Note: O pseudo elemento ":first-letter" só pode ser usado com elementos em bloco.
Note: As propriedades seguintes se aplicam ao pseudo- elemento "first-letter":
● font properties
● color properties
● background properties
● margin properties
● padding properties
● border properties
● text-decoration
● vertical-align (somente com o 'float: none')
● text-transform
● line-height
● float
● clear
Pseudo-elementos e classes CSS

Os pseudo-elementos podem ser combinados com classes CSS:
p.artigo:first-letter {color: #FF0000}
<p class="artigo">Um parágrafo em um artigo</p>
O exemplo acima de fará que a primeira letra de todos os parágrafos com a class="artigo" fiquem
com a cor vermelha.
Múltiplos Pseudo-elementos
Vários pseudo-elementos podem ser combinados:
p {font-size: 12pt}
ÃO
p:first-letter {color: #FF0000; font-size: 200%}

AG
p:first-line {color: #0000FF}

AR
<p>As primeiras palavras de um artigo</p>

O
G
IE
No exemplo acima a primeira letra do parágrafo estará vermelha com um tamanho de fonte de 24pt.
D
O resto da primeira linha seria azul enquanto o resto do parágrafo seria da cor padrão.
CSS2 - Pseudo-elemento :before

O pseudo elemento ":before" poder ser usado para inserir algum conteúdo antes de um elemento.
O estilo abaixo tocará um som antes de cada ocorrência de um elemento cabeçalho um.
h1:before{
content: url(beep.wav)
}
CSS2 – Pseudo-elemento :after

O pseudo elemento ":after" poder ser usado para inserir algum conteúdo depois de um elemento.
O estilo abaixo tocará um som depois de cada ocorrência de um elemento cabeçalho um.
h1:after{
content: url(beep.wav)
}
Pseudo-element Propósito IE F N W3C

:first-letter Adiciona um estilo especial na primeira letra de um texto 5 1 8 1
:first-line Adiciona um estilo especial para a primeira linha de um 5 1 8 1
texto
:before Insere um conteúdo antes de uma elemento 1.5 8 2
:after Insere um conteúdo depois de um elemento 1.5 8 2
ÃO
AG
AR
O
G
IE
D
CSS2 - Tipos de mídia
Os tipos de mídia permitem que você especifique como documentos serão apresentados em mídias
diferentes. O documento exibido com um estilo diferente no monitor, dispositivo móvel, impressão
etc.
Tipos de mídia
Algumas propriedades de CSS estão só projetadas para uma certa mídia. Por exemplo a propriedade
"font-family" é projetada para browser do tipo aural. Outras propriedades podem ser usadas para
tipos de mídia diferentes. Por exemplo, a propriedade "font-size" pode ser usada para ambas as
midias monitor e impressão, mas talvez com valores diferentes. Um documento normalmente
precisa de tamanho maior de fonte no monitor que no jornal, as fontes sem serifa (sans-serif) são
mais fáceis ler na tela, enquanto fontes com serifa (serif) são mais fáceis ler no papel.
ÃO
A Regra @media
AG
A regra @media permite regras de estilo diferentes para mídias diferentes na mesma folha de estilo.
AR
O estilo no exemplo abaixo exibe na tela do Browser uma fonte Verdana de 14 pixels. Mas se a
O
página for impressa, ficará com uma fonte Times de 10 pixels. Note que a largura da fonte (font-
G
weight) foi definida como negrito para os dois tipos de mídia (print e screen):
IE
D
<html>
<head>
<style>
@media screen{
p.test{
font-family:verdana sans-serif;
font-size:14px}
}
@media print{
p.test, {
font-family:times serif;
font-size:10px}
}
@media screen,print{
p.test {
font-weight:bold
}
}
</style>
</head>
<body>
....
</body>
</html>
Tipos de mídia
Note: Os nomes dos tipos de mídia não são case-sensitive.
ÃO
Tipo de Mídia Descrição

AG
all Usado para todos os tipos de mídia

AR
aural Usado para fala (speech) e sintetizadores de som (ex. leitores de tela)
O
G
braille Usado para dispositivos de braile

IE
D
embossed Usado para impressoras de braile

handheld Usado para dispositivos moveis (handheld=portátil)
print Usado para impressão
projection Usado para projetores de apresentações, tipo slide.
screen Usado para a tela de computadores
tty Usado para midias que usam grade de caracteres com pitch-fixo, tipo teletypes
e terminais
tv Usado para dispositivos de televisão
Unidades de medidas
Unidade Descrição
% porcentagem
in polegadas
cm centímetros
mm milímetros
em um em equivale ao tamanho atual da fonte de um determinado elemento
ex um ex é o x-height de uma fonte (x-height aproximadamente a metade do
font-size)
pt pontos (1 pt é igual a 1/72 inch)
pc pica (1 pc é igual a 12 pontos)
px pixels (um ponto na tela do monitor)
ÃO
AG
Cores
AR
Unidade Descrição
O
G
nome da cor O nome da cor (ex. red)

IE
D
rgb(x,x,x) Um valor RGB (ex. rgb(255,0,0))

rgb(x%, x%, x%) Valores de porcentagem do RGB(ex. rgb(100%,0%,0%))
#rrggbb Um numero hexadecimal (ex. #ff0000)
Nota: Só 16 nomes de cor são suportados pelo padrão de W3C CSS (aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, e yellow). Para todas as outras
cores você deverá usar valores Hexadecimais.

Css Diego Aragao

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Css Diego Aragao

Enviado por

Direitos autorais:

Formatos disponíveis

ÃO

W3 Schools traduzido e revisado por

Folhas de estilo múltiplas................................................................................................................7

body {color: black}

Nota: Se o valor possui múltiplas palavras, ponha aspas em torno do valor:

P {font-family: "sans serifa"}

Você tem que usar o atributo de classe em seu documento de HTML:

No código abaixo os elementos h1 e p possuem o class="center". Isso significa que ambos os

O regra de estilo mudará a cor e alinhamento do elemento p que tem um iD “para1”":

Nota: Não comece um nome de ID com um número! Não funcionará no Mozilla/Firefox.

/* Isto é outro comentário */

Folha de estilo externa

A tag <link> é inserida dentro da tag <head> da página HTML:

A tag <style> também é inserida dentro da tag <head> do HTML:

O Browser lerá as definições de estilo do arquivo meuestilo.css, e formatará o documento de acordo

body {background-image: url("images/back40.gif")}

Folhas de estilo múltiplas

propriedades para h3 serão:

Suporte de Browser: IE: Internet Explorer, F: Firefox, N: Netscape.

CSS: indica em que recomendação de CSS a propriedade é definida (CSS1 ou CSS2).

Propriedade Descrição Valores IE F N CSS

background-color Muda a cor de color-rgb 4 1 4 1

background de uma color-hex

background-image Insere uma imagem de url(imagem.jpg) 4 1 4 1

background-position Define a posição incial top left 4 1 6 1

text-decoration Adiciona decoração no texto none 4 1 4 1

text-indent Identação da primeira linha do largura 4 1 4 1

Propriedade Descrição Valores IE F N CSS

font-family Lista de fontes por família e/ou family-name 3 1 4 1

nome genérico da família da fonte generic-family

font-size Muda o tamanho de uma fonte xx-small 3 1 4 1

Propriedade Descrição Valores IE F N CSS

border-bottom-style Define o estilo da borda inferior border-style 4 1 6 2

border-bottom-width Define a largura da borda inferior thin 4 1 4 1

border-color Define a uma cor para as quatro color(RGB, HEX, 4 1 6 1

Define o estilo da borda direita border-style 4 1 6 2

propriedades border-top em uma border-color

border-top-color Define a cor da borda superior border-color 4 1 6 2

border-top-style Define o estilo da borda superior border-style 4 1 6 2

border-top-width Define a largura da borda superior thin 4 1 4 1

Propriedade Descrição Valores IE F N CSS

margin-left Ajusta a margem esquerda do elemento

margin-right Ajusta a margem direita do elemento auto 3 1 4 1

Propriedade Descrição Valores IE F N CSS

padding-right Define o padding direito de um elemento length 4 1 4 1

padding-top Define o padding superior de um elemento length 4 1 4 1

Propriedade Descrição Valores IE F N CSS

Propriedade Descrição Valores IE F N W3C

max-width Define a largura máxima de um elemento none - 1 6 2

min-height Define a altura mínima de um elemento length - 1 6 2

min-width Define a largura mínima de um elemento length - 1 6 2

Propriedade Descrição Valores IE F N W3C

overflow Define a área de limite de um elemento, visible 4 1 6 2

quando o seu contéudo é maior do que a hidden

position Define o posicionamento de um elemento static 4 1 4 2

Define o nível visual de um elemento auto 4 1 6 2

Classes CSS também podem ser usadas com pseudo-classes:

a:link {color: #FF0000} /* link não visitado */

a:visited {color: #00FF00} /* link visitado */

a:hover {color: #FF00FF} /* mouse sobre o link */

a:active {color: #0000FF} /* link selecionado */

Pseudo-classes e Classes CSS

CSS2 - A Pseudo-class :first-child

Este seletor combinará o primeiro parágrafo dentro do div no HTML seguinte: