Apostila CSS

Programao Web - CSS
PROFESSOR LUIS NCOLAS DE AMORIM TRIGO
APOSTILA DE PROGRAMAO WEB

CSS CASCADING STYLE SHEETS
(FOLHAS DE ESTILO EM CASCATA)
Programao Web - CSS
INTRODUO
CSS, tambm conhecido como folhas de estilo, um conjunto de regras que informa a
formatao de um documento web. Cada regra consiste em definir um rtulo para uma determinada
tag HTML e, em seguida, alterar os seus atributos. O CSS foi criado no final de 1996 pela W3C. As
principais vantagens do CSS so:
Economia de tempo;
Facilidade de manuteno e alterao; e
Diminuio do tamanho do cdigo;
Controle de layout.
Carregamento mais rpido;
COMO CRIAR
O CSS tem a seguinte sintaxe:
<ELEMENTO><.NOMEDACLASSE>{
ATRIBUTO_1: VALOR_1;
ATRIBUTO_2: VALOR_2;
...;
ATRIBUTON: VALOR_N
}
ELEMENTO Corresponde a tag HTML ao qual o CSS ser aplicado.
.NOMEDACLASSE Corresponde a um nome de classe CSS que poder ser aplicado a
qualquer tag.
ELEMENTO.NOMEDACLASSE Corresponde a uma determinada classe aplicada somente
tag indicada em ELEMENTO.
ATRIBUTO_K Corresponde identificao da configurao aplicada.
VALOR_K Corresponde prpria configurao aplicada.
VALOR_K Corresponde prpria configurao aplicada.
ATRIBUTO_K: VALOR_K; Corresponde formatao completa de

ELEMENTO.NOMEDACLASSE. Pode atribuir vrias formataes separadas por ponto-e-vrgula
( ; ), porm este no colocado na ltima formatao.

Por exemplo:
<STYLE>
P{
font-family: Arial;
font-size: 12pt;
color: blue
}
Programao Web - CSS
P.principal{
font-family: Verdana;
font-size: 11pt;
color: green
}
</STYLE>
...
<P CLASS=principal>Este pargrafo formatado com fonte Verdana, tamanho de
11 pontos e cor de texto verde. Este CSS aplicado em pargrafos que contm o
atributo CLASS igual a principal.</P>
<P>Este outro pargrafo formatado com fonte Arial, tamanho de 12 pontos e cor de
texto azul. Este CSS aplicado em pargrafos comuns, que no possuem nenhuma
classe especfica.</P>
O CSS acima contm fonte Verdana, de 10 pontos de tamanho e cor de texto verde, e
aplicada em pargrafos.
Onde o CSS escrito? Existem trs formas de estilos que so:
Estilo Externo
Estilo Incorporado
Estilo Inline
ESTILO EXTERNO
No Estilo Externo, as formataes so criadas em um arquivo com extenso .css e pode
ser chamado por qualquer documento HTML, atravs da tag <LINK
REL=STYLESHEET
HREF=caminho/at/a/pasta/do/Arquivo.css TYPE=text/css>.
ESTILO INCORPORADO
No Estilo Incorporado, as formataes so inseridas no cabealho do documento HTML, mais
especificamente, entre as tags <HEAD> e </HEAD>, que devero ser colocados as tags <STYLE> e
</STYLE>.
ESTILO INLINE
No Estilo Inline, as formataes so inseridas na prpria tag HTML, atravs do atributo
STYLE aplicada a esta tag.
As formataes bsicas a serem aplicadas nas regras CSS so:
Fontes
Atributos de texto
Cores
Blocos
UNIDADES DE MEDIDA
px (pixels)
in (inches; 1in=2.54cm)
cm (centmetros;
1cm=10mm)
mm (milmetros)
pt (pontos; 1pt=1/72in)
Programao Web - CSS
FONTES
Os atributos vinculados fonte so:
font-family Atributo que obtm os tipos de fontes, que so separados por vrgulas.
Ex.: (font-family: fonte1, fonte2, ..., fonte-genrica). As principais fontes utilizadas so:
Fonte Genrica
Serif
Sans-Serif Monospace
Default do Unix
Times
Helvetica
Courier
Default do Mac
Times
Helvetica
Courier
Arial
Courier New
Default do Windows Times New Roman

Outros tipos de fontes so: garamond e verdana.
font-size Atributo que obtm o tamanho da fonte. Os valores contm as seguintes medidas
principais: pt (pontos) e px (pixel). Tambm tem valores dos tipos: xx-small, x-small, small, medium,
large, x-large e xx-large., que correspondem aos valores do atributo SIZE da tag FONT.
font-style Atributo que altera a inclinao do texto. Os principais valores so: normal, italic ou
obliqe.
Ex.: font-style: italic
font-weight Atributo que altera o peso do texto. Os principais valores so: normal e bold.
Ex.: font-weight: bold
ATRIBUTOS DE TEXTOS
Os atributos vinculados ao texto so:
text-transform Atributo que transforma em maiscula e minscula.
text-transform: capitalize 1 letra em maiscula.
text-transform: uppercase Todas em maiscula.
text-transform: lowercase Todas em minscula.
text-transform: none no sofre alteraes (default).
text-decoration Atributo que trabalha com linhas no textos.
text-decoration: underline por baixo do texto.
text-decoration: overline por cima do texto.
text-decoration: line through riscado e por baixo do texto.
text-decoration: blink texto piscando.
text-decoration: none sem sublinhado.
Programao Web - CSS
text-align Atributo que alinha horizontalmente um texto.
text-align: left alinhado esquerda.
text-align: right alinhado direita.
text-align: center centralizado.
text-align: justify justificado.
vertical-align Atributo que alinha verticalmente tabela ou imagem.
vertical-align: baseline default ()
vertical-align: top top.
vertical-align: middle meio.
vertical-align: bottom inferior.
line-height Atributo que indica o espao entre as linhas do texto.
line-height: 150% porcentagem (espao um e meio)
line-height: 2 valor absoluto (espao duplo)
line-height: 25px espao em pixels.
text-indent Atributo que indica uma tabulao.
line-height: 25% porcentagem
line-height: 2cm centmetros
line-height: 25px pixels.
CORES
Os atributos vinculados cores so:
color Atributo que indica a cor do texto.
color: green nome da cor em ingls.
color: #00FF00 cdigo hexadecimal.
color: rgb(0,255,0) sistema RGB.
background-color Atributo que indica a cor de fundo do texto.
background-color: blue nome da cor em ingls.
background-color: #0000FF cdigo hexadecimal.
background-color: rgb(0,0,255) sistema RGB.
background-image Atributo que indica a imagem de fundo.
background-imagem: url(caminho_do_arquivo_da_imagem)
Programao Web - CSS
background-repeat Atributo que indica se a imagem de fundo deve ser repetida ou no.
background-repeat: repeat imagem repete horizontal e verticalmente.
background-repeat: no-repeat imagem no repete horizontal e verticalmente.
background-repeat: repeat-x imagem s repete horizontalmente.
background-repeat: repeat-y imagem s repete verticalmente.
background-attachment Atributo que indica se a imagem de fundo ir acompanhar a rolagem do

website ou no.
background-attachment: scroll aparece outras imagem(ns) de fundo.
background-attachment: fixed mantm a imagem(ns) de fundo fixa.
BLOCOS
As tags HTML <DIV>...</DIV> so caixas que podem ser utilizadas para formatar um bloco
de contedo, como pargrafos, imagens, etc. Os atributos seguintes podem ser aplicados s tags que
so delimitadoras, como <P>...</P>, <TABLE>...</TABLE>, etc.
Utilizando estas caixas, em parceria com o CSS, novos layouts podero ser desenvolvidos
sem tantas restries quando se utiliza tabela. Uma caixa formada pelas seguintes partes:
Contedo (texto, imagem, etc.);
Margem interna (padding);
Borda (border); e
Margem externa (margin).
MARGIN
Afeta todas as margens externas ao mesmo tempo. Ela pode ter o(s) seu(s) valor(es),
principalmente, em porcentagem ou em pixels. Existem trs formas de atribuir os valores de margin:
margin: X
// Vale para as quatro margens
margin: X Y
// Vertical; Horizontal
margin: X Y W Z
// Sentido horrio: top; right; bottom; left
Este atributo pode ser dividido em atributos especficos.

margin-top: X
margin-right: Y
margin-bottom: W
margin-left: Z
As principais unidades dos valores deste atributo so px (pixel) e % (porcentagem).
Programao Web - CSS
PADDING
Semelhante ao margin, o padding afeta as margens internas.
padding: X
// Vale para as quatro margens
padding: X Y
padding: X Y W Z
Podendo ser tambm:

padding-top: X
padding-right: Y
padding-bottom: W
padding-left: Z
BORDER-WIDTH
Afeta a espessura da borda.
border-width: X
// Vale para as quatro
border-width: X Y
border-width: X Y W Z
Podendo ser tambm:

border-top-width: X
// px | thin | medium | thick
border-right-width: Y
border-bottom-width: W // px | thin | medium | thick

border-left-width: Z
BORDER-COLOR
Afeta a cor da borda.
border-color: X
// nome | RGB | Hexadecimal
border-color: X Y
border-color: X Y W Z
Aplica-se as mesmas regras nos atributos anteriores: um, dois ou quatro valores.
border-top-color: X
border-right-color: Y
border-bottom-color: W
border-left-color: Z
BORDER-STYLE
Afeta o estilo da borda.
border-style: X // none | dotted | dashed | solid | double | groove | ridge | inset | outset
Programao Web - CSS
Para simplificar, pode-se adotar a seguinte regra para as bordas:

border: X Y X
// Sendo X, Y e Z valores do border-width, border-color e

// border-style, e no necessrios sempre nesta mesma ordem.
WIDTH E HEIGHT
Afeta a largura e a altura do bloco, respectivamente.
width: X
// largura em px ou %
height: X
// altura em px ou %
FLOAT
Posiciona o bloco a direita ou esquerda e faz com que o texto ao redor flutue em sua volta.
// Sendo X igual a left ou right.
float: X
POSICIONAMENTO
Posiciona o bloco ou outro elemento na tela.
position: X
// absolute | relative
top: X
// px | %
left: X
// px | %
O valor absolute posiciona no canto superior esquerdo da tela. J o relative, refere-se

posio anterior do elemento.
CLEAR
Fora a descida do contedo seguinte do contedo flutuante. No permite ficar escondido atrs do
contedo flutuante.
clear: X
// none | both | left | right
DISPLAY
Estrutura a tag DIV.
display: X
// none | block | inline| list-item
LIST-STYLE-TYPE
Define o tipo de marcador da lista.
list-style-type: X
// disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |

upper-alpha | none
LIST-STYLE-IMAGE
Define uma imagem externa para ser o marcador da lista.
list-style-image: url(X)
// onde X o arquivo ou caminho at o arquivo.
Programao Web - CSS
LIST-STYLE-POSITION
Define a posio do marcador da lista.
list-style-position: X
// inside | outside
Para simplificar, pode-se adotar a seguinte regra para a lista:

list-style: X Y X // Sendo X, Y e Z valores do list-style-type, list-style-image e list-style-position e no
necessrios sempre nesta mesma ordem.
EFEITOS DE LINKS
A:active{}
// um link ativo no documento
A:hover{}
// quando o mouse passa por cima de um link
A:link{} // um link
A:visited{}
// quando um link j foi visitado
EXERCCIO
Crie um documento HTML que utilize a maioria das regras acima.

Apostila CSS

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

Apostila CSS

Enviado por

Direitos autorais:

Formatos disponíveis

Programao Web - CSS

PROFESSOR LUIS NCOLAS DE AMORIM TRIGO

APOSTILA DE PROGRAMAO WEB

Programao Web - CSS

Facilidade de manuteno e alterao; e

Diminuio do tamanho do cdigo;

Carregamento mais rpido;

ELEMENTO Corresponde a tag HTML ao qual o CSS ser aplicado.

.NOMEDACLASSE Corresponde a um nome de classe CSS que poder ser aplicado a

ELEMENTO.NOMEDACLASSE Corresponde a uma determinada classe aplicada somente

tag indicada em ELEMENTO.

ATRIBUTO_K Corresponde identificao da configurao aplicada.

VALOR_K Corresponde prpria configurao aplicada.

VALOR_K Corresponde prpria configurao aplicada.

ATRIBUTO_K: VALOR_K; Corresponde formatao completa de

( ; ), porm este no colocado na ltima formatao.

Programao Web - CSS

Programao Web - CSS

Default do Windows Times New Roman

text-transform: capitalize 1 letra em maiscula.

text-transform: uppercase Todas em maiscula.

text-transform: lowercase Todas em minscula.

text-transform: none no sofre alteraes (default).

text-decoration Atributo que trabalha com linhas no textos.

text-decoration: underline por baixo do texto.

text-decoration: overline por cima do texto.

text-decoration: line through riscado e por baixo do texto.

text-decoration: blink texto piscando.

text-decoration: none sem sublinhado.

Programao Web - CSS

text-align Atributo que alinha horizontalmente um texto.

text-align: left alinhado esquerda.

text-align: right alinhado direita.

text-align: center centralizado.

text-align: justify justificado.

vertical-align Atributo que alinha verticalmente tabela ou imagem.

vertical-align: baseline default ()

vertical-align: top top.

vertical-align: middle meio.

vertical-align: bottom inferior.

line-height Atributo que indica o espao entre as linhas do texto.

line-height: 150% porcentagem (espao um e meio)

line-height: 2 valor absoluto (espao duplo)

line-height: 25px espao em pixels.

text-indent Atributo que indica uma tabulao.

line-height: 25% porcentagem

line-height: 2cm centmetros

line-height: 25px pixels.

color: green nome da cor em ingls.

color: #00FF00 cdigo hexadecimal.

color: rgb(0,255,0) sistema RGB.

background-color Atributo que indica a cor de fundo do texto.

background-color: blue nome da cor em ingls.

background-color: #0000FF cdigo hexadecimal.

background-color: rgb(0,0,255) sistema RGB.

background-image Atributo que indica a imagem de fundo.

Programao Web - CSS

background-repeat: repeat imagem repete horizontal e verticalmente.

background-repeat: no-repeat imagem no repete horizontal e verticalmente.

background-repeat: repeat-x imagem s repete horizontalmente.

background-repeat: repeat-y imagem s repete verticalmente.

background-attachment Atributo que indica se a imagem de fundo ir acompanhar a rolagem do

background-attachment: scroll aparece outras imagem(ns) de fundo.

background-attachment: fixed mantm a imagem(ns) de fundo fixa.