41 pág.
Denunciar
Pré-visualização | Página 2 de 2
1.2 em}
◦ Usando palavras chaves
◦ p {font-size: small| medium|
large }
CSS – Cascading Style Sheets
Font-style: usada para obter
um texto obliquo ou italico.
◦ p {font-style: italic | oblique |
normal}
CSS – Cascading Style Sheets
Classes em CSS
Nos permitem criar estilos
diferentes para seletores
iguais;
O objetivo é definir é definir
uma classe de elementos e
aplicar estilos a qualquer
elemento que pertença a
essa classe.
CSS – Cascading Style Sheets
Criar classes em
CSS é necessário
dois procedimentos.
1 – No meu documento HTML
preciso adicionar um elemento
a uma classe.
Ex.: <html>
<head>
<title>Elixires do Bar Use a
Cabeça</title>
</head>
<body>
<h1>Nossos Elixires</h1>
<h2>Chá Verde Cooler</h2>
<p class=“classseA">
<img src="../images/green.jpg"
alt="Chá Verde Cooler" />
Cheio de vitaminas e minerais,
este elixir
combina os benefícios
saudáveis do chá verde com
uma pitada de folhas de
camomila e gengibre.
</p>
<h2>Framboesa Geladinha</h2>
<p >
<img
src="../images/lightblue.jpg"
alt="Framboesa Geladinha" />
Combinando suco de framboesa
com capim-limão,
raspas de gelo e o fruto da
roseira-brava, este drinque super
gelado
vai clarear e revigorar sua
mente.
</p>
<h2>Elixir da Felicidade</h2>
<p >
<img src="../images/blue.jpg"
alt="Elixir da Felicidade" />
Essências de vacínio e cereja
misturadas a uma base
de chá de erva da flor do
sabugueiro colocarão você em
estado relaxado
de felicidade rapidamente.
</p>
<h2>Explosão Anti-oxidante de
Oxicoco</h2>
<p>
<img src="../images/red.jpg"
alt="Explosão Anti-oxidante de
Oxicoco" />
Acorde para os sabores do
oxicoco e hibiscos neste elixir rico
em vitamina C.
</p>
<p>
<a href="../bar.html">Volte ao
Bar</a>
</p>
</body>
</html>
CSS – Cascading Style
Sheets
Criando classes
em CSS
2 No arquivo
“css” preciso
defino as regras
aplicadas ao
seletor
adicionado a
classe.
Ex:
body{
font-family:
verdana;
color: blue;
}
h1,h2 {
color: red;
}
h2 {
font-family:
times-new-
roman;
}
h1 {
top: 1;
border-bottom:
1px solid black;
}
p {
color:
yellow;
font-family:
sans-serif;
}
p. classseA{
color: green
}
CSS – Cascading Style Sheets
Criando classes em CSS
Com este trecho
p. classseA{
color: green
}
Adicionamos uma nova regra
para alterar a fonte de
qualquer parágrafo que
esteja na classeA.
CSS – Cascading Style Sheets
Criando classes em CSS
E se surgisse a necessidade de
adicionar outros elementos na
classe A?
1 No arquivo css colocarei:
h1.classe A, p.classeA {
color: green
}
Se houver um lista
razoavelmente grande de
seletores posso especificá-la da
seguinte forma:
.classeA {
color: green
}
CSS – Cascading Style Sheets
Criando classes em CSS
No documento HTML
adiciono as classes para o
respectivos elementos.
<html>
......
<h1 class = “classeA”>
<p class= “classeA”>
......
</html>
CSS – Cascading Style Sheets
Adicionando um elemento
em mais de uma classe
Posso adicionar um
elemento a mais de classe
da seguinte forma:
<html>
......
<h1 class = “classeA
classeB” >
<p class= “classeA”>
......
</html>
CSS – Cascading Style Sheets
Modelo de caixa em CSS
Caixas são como as CSS
vêem os elemento. As CCS
tratam cada elemento como
se representasse uma
caixa.
Cada caixa é composta por
uma área de conteúdo com
enchimentos, bordas e
margens opcionais
Essências de vacínio e
cereja misturadas a uma
base de chá de erva da
flor do sabugueiro
colocarão você em estado
relaxado de felicidade
rapidamente
CSS – Cascading Style Sheets
Modelo de caixa em CSS
A área de conteúdo:
armazena o conteúdo do
elemento. Pode ser um
texto, uma imagem.
Essências de vacínio e
cereja misturadas a uma
base de chá de erva da
flor do sabugueiro
colocarão você em estado
relaxado de felicidade
rapidamente
Área de
conteudo
CSS – Cascading Style Sheets
Modelo de caixa em CSS
Área de enchimento
É o espaço adicional em torno
da área de conteúdo
Com css é possível controlar a
largura do enchimento em torno
da área de conteúdo.
Essências de vacínio e
cereja misturadas a uma
base de chá de erva da
flor do sabugueiro
colocarão você em estado
relaxado de felicidade
rapidamente
Área de enchimento
CSS – Cascading Style Sheets
Modelo de caixa em CSS
A borda
Os elementos podem à
volta uma borda opcional.
A borda fica em torno do
enchimento
Essências de vacínio e
cereja misturadas a uma
base de chá de erva da
flor do sabugueiro
colocarão você em estado
relaxado de felicidade
rapidamente
borda
CSS – Cascading Style Sheets
Modelo de caixa em CSS
A margem é opcional e
envolve a borda. Permite
adicionar espaço os
elementos na mesma
pagina.
Essências de vacínio e
cereja misturadas a uma
base de chá de erva da
flor do sabugueiro
colocarão você em estado
relaxado de felicidade
rapidamente
margem
CSS – Cascading Style Sheets
Modelo de caixa em CSS
Adicionando enchimento
Isto é realizado através da
propriedade padding, esta é
usuda para definição algum
enchimento para os quatro lados
do conteúdo. Seu valor pode ser
em pixels ou com porcentagem
em relação a area da borda
Ex.: p { padding: 25px}
p {padding-left : 30}
p {padding-right : 30}
p {padding-bottom : 30}
p {padding-top : 30}
ou
p {padding: 0x 20 px 30px 10px }
1em cima 2 a dir 3em bx 4 a esq
CSS – Cascading Style Sheets
Modelo de caixa em CSS
Adicionando margens
É definido através da
propriedade margin. Seus
valores podem estam em
pixels ou porcentagem.
Ex:
p {margin 25px}
p {margin -left : 30}
p {margin -right : 30}
p {margin -bottom : 30}
p {margin -top : 30}
Ou
p {margin: 0x 20 px 30px 10px
} 1em cima 2 a dir 3em bx 4
a esq
CSS – Cascading Style Sheets
Modelo de caixa em CSS
Adicionando bordas
Permite adicionar linhas de
contorno a um determinado
elemento.
border-style : define o estilo
da borda
Border.widht: define a
espessura da borda
Border-color: cor da borda.
Border-top-color
Border-top-style