CSS   Cascading Style Sheets 12
41 pág.

CSS Cascading Style Sheets 12

Disciplina:Tecnologias Web3.157 materiais8.190 seguidores
Pré-visualização2 páginas
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