Documente Academic
Documente Profesional
Documente Cultură
Introduo ao CSS
Cascade Style Sheets
Implementao
Externas
<title>...</title>
</head>
<body>...
Internas
<html>
<head>
<style type=text/css>
h1 {color:#00ff00}
h2 {color:#ffff00}
P {color: #ffffff}
</style>
</head>
<body>
<h1>nivel 1</h1>
<h2>nivel 2</h2>
<p>paragrafro</p>
<body>
</html>
Valor
h1 { color : red }
Sintaxe
Sintaxe
Propriedade (atributo)
Sintaxe
Exemplo
Selector { propriedade:valor}
Selector { propriedade:valor;
propriedade:valor}
P { text-align:center; color:red}
Selector
{
propriedade:valor;
propriedade:valor;
Propriedade:valor
}
P
{
text-align: center;
Color: black;
Font-family:arial
}
Selector,selector,selector
{ propriedade:valor }
H1,h2,h3
{ color: green }
Exemplo:
Ficheiro HTML no body
<h1>Tecnologia dos Media</h1>
<p> Informtica </p>
Ficheiro CSS
H1 { color: red }
P { color:blue }
Resultado:
Regras inline
Comentrios
<style type=text/css>
/*cor do titulo*/
h1 {color:#00ff00}
</style>
Selectores
Tipos de Seletores
Identificadores
Um seletor de ID permite identificar uma nica ocorrncia de
um elemento HTML. So criados pelo carcter # seguido do
nome.
Um tipo de elementos
identificador_elemento # seletor_id { propriedade : valor}
Genrica
#seletor_id { propriedade : valor}
# nome { color:blue; background: black }
<p id=nome>S este elemento que identificado como
nome</p>
Tipos de Seletores
Classes
DIV e SPAN
Existem dois elementos genricos que no tm
significado semntico, mas permitem definir
seces/blocos e so muito usados com CSS.
Genrica
.rd{ color:blue}
Um tipo de elementos
p.p1 { color: red }
<p class=p1>texto em vermelho</p>
DIV e SPAN
<div class="zonaesquerda">
<p>texto, texto, texto</p>
</div>
<div class="zonacentral">
<h1>Ttulo</h1>
<p> texto, texto, texto, <span class="nota">texto, texto</span>, texto</p>
<p> texto, texto, texto, texto, texto, texto</p>
</div>
Unidades de medida
Unidade
Descrio
em
ex
px
pixels
Unidade
Css
.Zonaesquerda { color: green }
.zonacentral { color: yellow }
.nota { color: red }
Resultado:
Ttulo
Descrio
cm
Centmetros
in
Polegadas
mm
Milmetros
pt
Unidades de medida
Formato
Exemplo
h1 { margin: 0.5em } /* em */
h1 { margin: 1ex } /* ex */
p { font-size: 12px } /* px */
Unidades de cor
Unidade
Descrio
Exemplo do vermelho
Nome da cor
O nome da cor
red
rgb(x,y,z)
Um valor rgb
rgb(255,0,0)
rgb(100%,0%,0%)
#rrggbb
#ff0000
Um nmero hexadecimal
Texto
Texto
Propriedade
Descrio
Valores
Exemplo
Propriedade
Descrio
Valores
Exemplo
font-size
Ajusta o tamanho
do texto
{ font-size: 12pt }
{ font-size: 200% }
text-align
Alinhamento do
texto
{ text-align: center }
font-family
Ajusta os tipos de
letra e as
alternativas (em
ordem de
preferncia)
nome do tipo de
letranome da
famlia da fonte
{ font-family:
Trebuchet MS, Sansserif }
left
Center
right
justify
text-indent
indentao da primeira
linha do texto
{ text-indent: 0.5in }
line-height
text-decoration
none
underline
overline
line-through
{font-decoration: overline}
{line-height: 18p t}
{ line-height: 200% }
vertical-align
Ajusta o peso do
tipo
normal
bold
bolder
lighter
{ font-weight: bold }
Alinha o texto
verticalmente
dentro do elemento
font-style
Texto em itlico
normal
italic
{font-style: italic}
baseline
sub
super
top
text-top
middle
bottom
{ vertical-align: top }
font-weight
Padding
Cor e background
Propriedade
Descrio
Valores
Exemplo
padding
Espao entre a
borda do elemento
e o conteudo do
elemento
{ padding: 20px }
Em relao a cada um
dos lados
{padding-top: 0.5in }
padding-top
padding -left
padding -bottom
padding -right
Propriedade
Descrio
Valores
Exemplo
color
Cor do texto
Unidades da cor
{ color: red }
background-color
Cor de fundo de um
elemento
Unidades da cor
{ background-color:
black}
Background-image
Ajusta as imagens do
fundo
url
{background-image:
url(imagem1.jpg)}
margens
Contornos
Propriedade
Descrio
Valores
Exemplo
Propriedade
Descrio
Valores
Exemplo
margin
Permite especificar
a margem do
elemento
{ margin: 8px }
border
Ajusta o contorno
do elemento
margin-top
margin-left
margin-bottom
margin-right
Permite especifar
cada uma das
margens
{ margin-top: 12pt }
grossura: em pixels.
estilo: none, dotted,
dashed, solid, double.
cor: valor da cor.
border-top
border-left
border-bottom
border-right
grossura: em pixels.
estilo: none, dotted,
dashed, solid, double.
cor: valor da cor.
{ border-top: 2px
dotted red; }
Posicionamento
Listas
Propriedade
Descrio
Valores
Exemplo
list-style-type
define a aparncia
do marcador de
cada item de uma
lista.
No numricos:
disc
circle
square
{ list-style-type: disc;
}
Numricos:
decimal
decimal-leading-zero
lower-roman
upper-roman
Lower-latin
upper-latin
{ list-style-type:
upper-roman; }
Posicionamento
Posicionamento
posicionar
relativamente
ao
Posicionamento
Posicionamento
Div=parte1
Exemplo:
<div class=parte1>1 bloco de informao</div>
<div class=parte2>
2 bloco de informao <br><br>
<div class=parte2a>
1 sub bloco de informao <br>
Este bloco est inserido no 2 bloco.
</div><br>
<div class=parte2b>
2 sub bloco de informao <br>
Este bloco tambm est inserido no 2 bloco, aps o bloco anterior.
</div><br>
<div class=parte2c>
3 sub bloco de informao <br>
Este bloco tambm est inserido no 2 bloco, aps o bloco anterior.
</div>
</div>
<div class=parte3>3 bloco de informao </div>
Resultado
Div=parte2
Div=parte2a
Div=parte2b
Div=parte2c
Div=parte3
.parte2b {
background-color:#999999;
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte2c {
background-color:#666666;
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte3 {
background-color:#cccccc;
font-family:arial;
font-size:14pt;
width:460px;
padding:20px;
}
Posicionamento Relativo
A posio calculada em relao localizao natural do
elemento.
p{
position: relative;
top: 10px;
right: 50px;
}
Posicionamento
.parte1 {
background-color:#cccccc;
font-family:arial;
font-size:14pt;
width:460px;
padding:20px;
}
.parte2 {
background-color:#222222;
font-family:arial;
font-size:14pt;
color:#ffffff;
width:460px;
padding:20px;
position:relative;
top:20px;
left:40px;
}
.parte2a {
background-color:#666666;
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
Resultado
.parte2b {
background-color:#999999;
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte2c {
background-color:#666666;
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte3 {
background-color:#cccccc;
font-family:arial;
font-size:14pt;
width:460px;
padding:20px;
}
Posicionamento Absoluto
A posio do elemento calculada em relao ao "pai".
Temos a questo de saber qual o pai?
Exemplo 1: Uso isolado do position absolute
Neste caso o pai deste elemento passa a ser
o body, por isso o elemento foi l para cima
p{
position: absolute;
top: 10px;
left: 50px;
}
div {
position: relative;
p{
position: absolute;
top: 10px;
left: 50px;
}
Posicionamento
.parte1 {
background-color:#cccccc;
font-family:arial;
font-size:14pt;
width:460px;
padding:20px;
}
.parte2 {
background-color:#222222;
font-family:arial;
font-size:14pt;
color:#ffffff;
width:460px;
padding:20px;
}
.parte2a {
background-color:#666666;
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
position:absolute;
top:0;
right:0;
}
.parte2b {
background-color:#999999;
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte2c {
background-color:#666666;
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte3 {
background-color:#cccccc;
font-family:arial;
font-size:14pt;
width:460px;
padding:20px;
}
Resultado
Posicionamento
.parte1 {
background-color:#cccccc;
font-family:arial;
font-size:14pt;
width:460px;
padding:20px;
}
.parte2 {
background-color:#222222;
font-family:arial;
font-size:14pt;
color:#ffffff;
width:460px;
padding:20px;
position:relative;
}
.parte2a {
background-color:#666666;
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
position:absolute;
top:0;
.parte2b {
background-color:#999999;
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte2c {
background-color:#666666;
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte3 {
background-color:#cccccc;
font-family:arial;
font-size:14pt;
width:460px;
padding:20px;
}
right:0;
}
Resultado
Posicionamento Fixo
Igual ao posicionamento absoluto, mas relativamente janela.
p{
position: fixed;
top: 50px;
left: 10px;
}
10
Posicionamento Float
A propriedade float permite desligar o elemento do fluxo
normal e desloc-lo para a esquerda ou direita da linha. O
mais interessante que o restante contedo pode fluir
paralelamente ao elemento.
Valores possveis: none, left, right;
img {
float: left;
}
11