CSS 17
Programação Web - CSS
1
AUTARQUIA EDU CACIONAL DO VALE DO SÃO FR ANCISCO – A EVSF
FACULDADE D E CIÊNCIAS A PLICADAS E SOCI AIS DE PET ROLINA – FACA PE
CURSO DE CI ÊNCIA DA COMPUT AÇÃO
PROFESSOR LUIS NÍCOL AS DE AMORIM T RIGO
APOSTILA DE PROGRAMAÇÃO WEB
CSS – CASCADING STYLE SHEETS
(FOLHAS DE ESTILO EM CASCATA)
Petrolina-PE, 2008
Programação Web - CSS
2
INTRODUÇÃO
CSS, também conhecido como folhas de estilo, é um conjunto de regras que inform a a
form atação de um docum ento w eb. C ada regra consi ste em definir um rótulo p ara um a determ inada
tag HTML e, em segui da, alterar os seus atributos. O CSS f oi c riado no final de 19 96 pela W3C. As
principais vantag ens do CS S são:
• Economia de tem po;
• Diminuição do t amanho do código;
• Carregam ento mais rápido;
• Facilidade de m anutenção e alteração; e
• Controle de layout.
COMO CRI AR
O CSS tem a seguinte sintax e:
<ELEMENTO><.NOMEDACLASSE>{
ATRIBUTO_1: VALOR_1;
ATRIBUTO_2: VALOR_2;
...;
ATRIBUTON: VALOR_N
}
•
ELEMENTO
Correspond e a tag HTML ao q ual o CSS será a plicado.
•
.NOMEDACLASSE
Corre sponde a um nom e de class e CSS que poderá s er aplicado a
qualquer tag.
•
ELEMENTO.NOMEDACLASSE
Corresponde a uma determ inada classe aplicad a somente à
tag indicada em
ELEMENTO
.
•
ATRIBUTO_K
Correspon de à identificaç ão da configuraç ão aplicada.
•
VALOR_K
Correspond e à própria conf iguração aplic ada.
•
VALOR_K
Correspond e à própria conf iguração aplic ada.
•
ATRIBUTO_K: VALOR_K;
Corresponde à formatação completa de
ELEMENTO.NOMEDACLASSE
. Pode atribuir várias form atações separadas p or ponto-e-vírgu la
(“ ; “), porém este não é coloc ado na últim a formatação.
Por exemplo:
<STYLE>
P{
font-family: Arial;
font-size: 12pt;
color: blue
}
Programação Web - CSS
3
P.principal{
font-family: Verdana;
font-size: 11pt;
color: green
}
</STYLE>
...
<P CLASS=”pr incipal”>Est e parágrafo é format ado com font e Verdana, t amanho de
11 pontos e cor de texto verde. Este CS S é aplica do em pa rágrafos que c ontém o
atributo CL ASS igual a p rincipal.</P>
<P>
Este outro parágrafo é formatado com fonte Arial, tamanho de 12 pontos e cor de
texto azul. Este CSS é aplicado em parágrafos comuns, que não possuem nenhuma
classe específica.
</P>
Onde o CSS é escrito? Existem três form as de estilos que são:
• Estilo Externo
• Estilo Incorporado
• Estilo Inline
ESTILO EXTERNO
No Esti lo Externo , as formatações s ão criadas em um arquivo com extens ão “.css ” e pode
ser chamado por qualquer documento HT ML, através da tag
<LINK REL=”STYLESHEET”
HREF=”caminho/até/a/pasta/do/Arquivo.css” TYPE=”text/css”>
.
ESTILO INCORPOR ADO
No Estilo Incorporado, as f ormataç ões são inserid as no cabeçalho do docum ento HTML, m ais
especificam ente, entre as tags
<HEAD>
e
</HEAD>
, que deverão s er coloca dos as tags
<STYLE>
e
</STYLE>
.
ESTILO INLINE
No Estilo Inline, as form atações são inseridas na própria tag HTML, através do atributo
STYLE aplicad a a esta tag.
As form atações básicas a ser em aplicadas nas r egras CSS são:
• Fontes
• Atributos de texto
• Cores
• Blocos
Programação Web - CSS
4
FONTES
Os atributos v inculados à fonte sã o:
font-f amily Atributo que obtém os tipos de fontes, que são separ ados por vírgulas.
Ex.: (
font-family: fonte1, fonte2, ..., fonte-ge nérica
). As principais fontes utilizadas sã o:
Fonte Genéric a Serif Sans-Serif
Monospace
Default do Unix Times Helvetica Courier
Default do M ac Times Helvetica Courier
Default do W indows
‘Times New Rom an’
Arial ‘Courier New’
Outros tipos de f ontes são: garam ond e verdana.
font-siz e Atributo que obtém o tamanho da fonte. Os valores contêm as seguintes m edidas
principais: pt (pontos) e px (pixel). T ambém tem valores dos tipos: xx -small, x -small, small, med ium,
large, x-large e x x-large., que corr espondem aos valores do atribu to SIZE da tag F ONT.
font-style Atri buto que altera a inc linação do tex to. Os principais valores são: norm al, italic ou
obliqüe.
Ex.:
font-style: italic
font-w eight Atributo que alter a o peso do texto. O s principais valores são: norm al e bold.
Ex.:
font-weight: bold
ATRI BUTOS DE TEXTOS
Os atributos v inculados ao texto s ão:
text-transform Atributo que tra nsforma em maiúscula e m inúscula.
• text-transform: capitalize
1ª letra em maiúscula.
•
text-transform: uppercase
Todas em maiúscula.
•
text-transform: lowercase
Todas em minúscula.
•
text-transform: none
não sofre alt erações (de fault).
text-decoration Atributo que trabalha com linhas no textos.
• text-decoration: underline
por baixo d o texto.
•
text-decoration: overline
por cim a do texto.
•
text-decoration: none
sem s ublinhado.
Programação Web - CSS
5
text-align Atri buto que alinha horizontalm ente um texto.
• text-align: left
alinhado à esquerda.
•
text-align: right
alinhado à dire ita.
•
text-align: center
centrali zado.
•
text-align: justify
justif icado.
vertical-align Atributo que a linha verticalm ente tabela ou im agem.
• vertical-align: baseline
default ()
•
vertical-align: top
top.
•
vertical-align: middle
meio.
•
vertical-align: bottom
inferior.
line-height Atributo que indica o espaço entre as linhas do texto.
• line-height: 150%
porc entagem (espaço um e meio)
•
line-height: 2
valor abs oluto (espaço d uplo)
•
line-height: 25px
espaço em pixels.
CORES
Os atributos v inculados à c ores são:
color Atribu to que indica a c or do texto.
• color: green
nom e da cor em inglês.
• color: #00FF00
código hexa decimal.
• color: rgb(0,255,0)
sistem a RGB.
background-colo r Atributo q ue indica a cor de fundo do texto .
• background-color: blue
nome da cor em inglês.
• background-color: #0000FF
código hexa decimal.
• background-color: rgb(0,0,255)
sistem a RGB.
background-imag e Atributo que indica a imagem de fundo.
• background-image: url(‘caminho_do_arquivo_da_imagem’)
background-rep eat Atributo que indica se a imagem de fundo deve ser repeti da ou não.
• background-repeat: repeat
imagem repete horizontal e verticalmente.
• background-repeat: no-repeat
imagem não repete horizont al e verticalm ente.
• background-repeat: repeat-x
imagem só repete horizonta lmente.
• background-repeat: repeat-y
imagem só repete verticalm ente.
Programação Web - CSS
6
BLOCOS
As tags HTML <DIV >...</DIV> s ão “ caixas” que pode m ser utilizadas para for matar um bloco
de conteúdo , com o parágrafos , imagens, etc. Os atribu tos seguintes podem ser aplicados às tags qu e
são delimitadoras, c omo <P>...< /P>, <TABLE>... </TABLE>, etc.
Utilizando estas caixas, em parceria com o CSS, novos la youts poderão ser des envolvidos
sem tantas restr ições quan do se utiliza tabela. Uma caixa é f ormada pelas seg uintes partes:
• Conteúdo (texto, imagem , etc.);
• Margem intern a (padding);
• Borda (border); e
• Margem ex terna (margin).
MARGIN
Afeta todas as m argens externas ao m esmo tem po. Ela pode ter o(s) s eu(s) valor(es),
principalm ente, em porcentagem ou em pixels. Ex istem três formas de atribuir os valores de “marg in”:
margin: X / / Vale para as quatro margens
margin: X Y // Vertical; Horizontal
margin: X Y W Z // Sentido horário: top; right; bottom; left
Este atributo p ode ser dividido em atributos esp ecíficos.
margin-top: X
margin-right: Y
margin-bottom: W
margin-left: Z
As principais un idades dos valores deste atr ibuto são px (pixel) e % (porcentage m).
Programação Web - CSS
7
PADDING
Semelhante a o “margin”, o “ padding” afeta as m argens internas.
padding: X // Vale para as quatro margens
padding: X Y // Vertical; Horizontal
padding: X Y W Z // Sentido horário: top; right; bottom ; left
Podendo ser tam bém :
padding-top: X
padding-right: Y
padding-bottom: W
padding-left: Z
BORDER-WIDTH
Afeta a espess ura da bord a.
border-width: X / / Vale para as quatro
border-width: X Y // Vertical; Horizontal
border-width: X Y W Z // Sentido horário: top; right; bottom ; left
Podendo ser tam bém :
border-top-width: X // px | thin | medium | thick
border-right-width: Y // px | thin | medium | thick
border-bottom-width: W // px | thin | medium | thick
border-left-width: Z // px | thin | medium | thick
BORDER-COLOR
Afeta a cor da b orda.
border-color: X / / nome | RGB | Hexadecimal
border-color: X Y // nome | RGB | Hexadecimal
border-color: X Y W Z // n ome | RGB | Hexadecimal
Aplica-se as m esmas r egras nos atributos anter iores: 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 d a borda.
border-style: X // none | dotted | dashed | solid | double | groove | ridge | inset | outset
Programação Web - CSS
8
Para simplificar , pode-se a dotar a seguinte regra para as bordas:
border: X Y X // Sendo X, Y e Z valores do border-width, border-color e
// border-st yle, e nã o necessários sempre nesta mesma ordem.
WIDTH E HEIGHT
Afeta a largura e a altura do bl oco, respecti vamente.
width: X // largura em px ou %
height: X // altura em px ou %
FLOAT
Posiciona o bloco a direita ou esq uerda e fa z com que o texto ao re dor flutue em sua volta.
float: X // Sendo X igual a ‘left’ ou ‘right’.
POSICION AMENTO
Posiciona o bloco ou outro elem ento na tela.
position: X // absolute | relative
top: X // px | %
left: X // px | %
O valor “ absolute” posiciona no cant o s uperior esquerdo da tela. Já o “relative”, r efere-se à
posição anterior d o elemento.
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
EXERCÍCIO
Crie um docum ento HTML que uti lize todas as regras .
Crie agora seu perfil grátis para visualizar sem restrições.
Você viu 1 do total de 8 páginas deste material