Introdução Ao CSS: Cascade Style Sheets (CSS)

Cascade Style Sheets (CSS)
Introduo ao CSS
Cascade Style Sheets
CSS so folhas de estilo que permitem

controlar a aparncia e a formatao dos
elementos HTML.
Vantagens:
Grande liberdade de formatao
Maior produtividade
Maior facilidade de actualizao
Implementao
Externas
As folhas de estilos podem ser inseridos nos

documentos de duas maneiras diferentes:
Externas - Por meio de um link direcionado para um

arquivo de style sheet em separado, funcionando para
uma ou mais pginas web, atravs do elemento <link>
dentro do elemento <head>. recomendada quando o
mesmo estilo aplicado a uma grande quantidade de pginas.
Neste caso temos um ficheiro exterior com a exteno

.css que pode ser associado a vrios ficheiros html
Sintaxe
<html>
<head>
<link rel=STYLESHEET type=text/css
href=nomeficheiro.css >
Internas - Por meio de uma insero de um style sheet

numa nica pgina web - atravs do elemento <style>
dentro do elemento <head>.
4
<title>...</title>
</head>
<body>...
Internas
Sintaxe das folhas de estilo
Definidas num documento especfico. Permitem aplicar o estilo apenas

a esse documento.
O elemento <style> tm de ser escrito dentro do <head>.
<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>
Cada regra de estilo constituda por:
Selector Identifica o(s) elemento(s) a que a regra se aplica.
Bloco de Declaraes - Um bloco de declaraes delimitado

por { } e constitudo por declaraes, separadas por ;.
Propriedade nome do efeito/caracterstica a aplicar.
Valor Valor a aplicar propriedade.
Selector
Valor
h1 { color : red }
Sintaxe
Sintaxe
Propriedade (atributo)
Sintaxe
Exemplo
Selector { propriedade:valor}
Body { background-color: #FFFFFF }
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:
Tecnologia dos Media

Informtica
Regras inline
Podem ser definias regras inline

atravs do atributo style, aplicvel a
qualquer elemento vlido no <body>
de uma pgina HTML.
Comentrios
Os comentrios podem ser inseridos entre

os simbolos /* e */
/* comentrio */
Estas regras apenas so vlidas para o

elemento onde foram definidas.
<style type=text/css>
/*cor do titulo*/
h1 {color:#00ff00}
</style>
<p style="color: red; font-family: 'new century

schoolbook', serif">
this paragraph is styled in red with the new century
schoolbook font, if available.
</p>
Selectores
As CSS suportam diferentes tipos de

selectores:
Identificadores
Classes
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.
Um selector de classe permite identificar um conjunto de

ocorrncias de um elemento e atribuir-lhes um estilo comum. So
criados pelo carcter . seguido do nome.
Genrica
.rd{ color:blue}
Permitem agrupar contedo em unidades

lgicas:
<div>: quebra o fluxo normal do documento
<span>:mantm o fluxo normal do contedo
<p class=rd>texto em azul</p>

<h1 class=rd>texto tambem em azul</h1>
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
Percentagem de qualquer unidade
em
1 em igual ao tamanho da fonte do elemento corrente
ex
1 ex aproximadamente metade da altura da fonte
px
pixels
Unidade
Css
.Zonaesquerda { color: green }
.zonacentral { color: yellow }
.nota { color: red }
Resultado:
texto, texto, texto
Ttulo
texto, texto, texto, texto, texto texto

texto, texto, texto, texto, texto, texto
Descrio
cm
Centmetros
in
Polegadas
mm
Milmetros
pt
Ponto (1 pt 1/72 polegadas )
Unidades de medida
Formato
Exemplo
in inches (polegadas 2,54 cm)

cm centmetros
mm milmetros
pt points (1/72 inch)
pc picas (12 pints)
H1 { margin: 0.5in } /* inches */

H2 { line-height: 3cm } /* centimeters */
H3 { word-spacing: 4mm } /* millimeters */
H4 { font-size: 12pt } /* points */
H4 { font-size: 1pc } /* picas */
em dimenso da fonte corrente

ex altura da letra x da fonte corrente
px pixels (relativa a resoluo do ecr)
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(x%,y%,z%) Uma percentagem rgb
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
tamanho (pt, in,

cm, px)
percentagem
{ 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
tamanho (pt, in,

cm, px)
{ text-indent: 0.5in }
line-height
text-decoration
Efeitos sobre o texto
none
underline
overline
line-through
{font-decoration: overline}
Altura das linhas de

um bloco de texto.
tamanho (pt, in,

cm, px)
percentagem
{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
tamanho (pt, in,

cm, px)
{ padding: 20px }
Em relao a cada um
dos lados
tamanho (pt, in,

cm, px)
{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
tamanho (pt, in, cm,

px)
{ margin: 8px }
border
Ajusta o contorno
do elemento
{ border: 4px double

green; }
margin-top
margin-left
margin-bottom
margin-right
Permite especifar
cada uma das
margens
tamanho (pt, in, cm,

px)
{ margin-top: 12pt }
grossura: em pixels.
estilo: none, dotted,
dashed, solid, double.
cor: valor da cor.
border-top
border-left
border-bottom
border-right
Ajusta cada um dos

contornos
grossura: em pixels.
estilo: none, dotted,
dashed, solid, double.
cor: valor da cor.
{ border-top: 2px
dotted red; }
Posicionamento
Listas
Com CSS possvel alterar o fluxo normal de uma

pgina e definir o posicionamento de cada elemento
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
Todos os elementos tm a propriedade position

que estabelece a forma de "clculo" da posio de
um elemento:
static: o elemento posicionado segundo o fluxo
normal. O valor por defeito.
relative: a posio da "caixa" calculada em relao
posio normal (static).
absolute: permite
elemento pai.
posicionar
relativamente
A propriedade position, usada juntamente com:

top: deslocamento do lado superior do elemento.
left: deslocamento do lado esquerdo do elemento.
bottom: deslocamento do lado inferior do elemento.
right: delocamento do lado direito do elemento.
width: largura do elemento.
height: altura do elemento.
ao
fixed: o clculo da posio igual ao mtodo

absoluto, mas o elemento pai a "janela de
visualizao" (viewport).
As unidades podem ser:

Fixas: pixels (px), points (pt), centmetros (cm), milmetros (mm).
Relativas: em, percentagem (%)
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>
Este bloco tambm est inserido no 2 bloco, aps o bloco anterior.
</div><br>
<div class=parte2c>
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
Continuao do exemplo parte CSS:

.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 {
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte2b {
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte2c {
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte3 {
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 {
font-family:arial;
font-size:14pt;
width:460px;
padding:20px;
}
.parte2 {
font-family:arial;
font-size:14pt;
color:#ffffff;
width:460px;
padding:20px;
position:relative;
top:20px;
left:40px;
}
.parte2a {
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
Resultado
.parte2b {
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte2c {
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte3 {
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;
}
Exemplo 2: Uso do position absolute com position

relative
Neste caso o pai deste elemento passa a ser o
elemento que tem a position relative.
Nota o elemento que usa o absolute tem de estar
dentro do elemento que usa o relative
div {
position: relative;
p{
position: absolute;
top: 10px;
left: 50px;
}
Posicionamento
.parte1 {
font-family:arial;
font-size:14pt;
width:460px;
padding:20px;
}
.parte2 {
font-family:arial;
font-size:14pt;
color:#ffffff;
width:460px;
padding:20px;
}
.parte2a {
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
position:absolute;
top:0;
right:0;
}
.parte2b {
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte2c {
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte3 {
font-family:arial;
font-size:14pt;
width:460px;
padding:20px;
}
Resultado
Posicionamento
.parte1 {
font-family:arial;
font-size:14pt;
width:460px;
padding:20px;
}
.parte2 {
font-family:arial;
font-size:14pt;
color:#ffffff;
width:460px;
padding:20px;
position:relative;
}
.parte2a {
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
position:absolute;
top:0;
.parte2b {
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte2c {
font-family:arial;
font-size:12pt;
width:400px;
margin-left:30px;
}
.parte3 {
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

Introdução Ao CSS: Cascade Style Sheets (CSS)

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Introdução Ao CSS: Cascade Style Sheets (CSS)

Diunggah oleh

Hak Cipta:

Format Tersedia

Cascade Style Sheets (CSS)

CSS so folhas de estilo que permitem

As folhas de estilos podem ser inseridos nos

Externas - Por meio de um link direcionado para um

Neste caso temos um ficheiro exterior com a exteno

Internas - Por meio de uma insero de um style sheet

Sintaxe das folhas de estilo

Definidas num documento especfico. Permitem aplicar o estilo apenas

Cada regra de estilo constituda por:

Selector Identifica o(s) elemento(s) a que a regra se aplica.

Bloco de Declaraes - Um bloco de declaraes delimitado

Body { background-color: #FFFFFF }

Tecnologia dos Media

Podem ser definias regras inline

Os comentrios podem ser inseridos entre

Estas regras apenas so vlidas para o

<p style="color: red; font-family: 'new century

As CSS suportam diferentes tipos de

Um selector de classe permite identificar um conjunto de

Permitem agrupar contedo em unidades

<p class=rd>texto em azul</p>

Percentagem de qualquer unidade

1 em igual ao tamanho da fonte do elemento corrente

1 ex aproximadamente metade da altura da fonte

texto, texto, texto

texto, texto, texto, texto, texto texto

Ponto (1 pt 1/72 polegadas )

in inches (polegadas 2,54 cm)

H1 { margin: 0.5in } /* inches */

em dimenso da fonte corrente

rgb(x%,y%,z%) Uma percentagem rgb

tamanho (pt, in,

tamanho (pt, in,

Efeitos sobre o texto

Altura das linhas de

tamanho (pt, in,

tamanho (pt, in,

tamanho (pt, in,

tamanho (pt, in, cm,

{ border: 4px double

tamanho (pt, in, cm,

Ajusta cada um dos

Com CSS possvel alterar o fluxo normal de uma

Todos os elementos tm a propriedade position

A propriedade position, usada juntamente com:

fixed: o clculo da posio igual ao mtodo

As unidades podem ser:

Continuao do exemplo parte CSS:

Exemplo 2: Uso do position absolute com position

Anda mungkin juga menyukai