A maior rede de estudos do Brasil

Grátis
41 pág.
CSS   Cascading Style Sheets 12

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