CSS Cascading Style Sheets 12
Pré-visualização2 páginas
1.2 em}
\u25e6 Usando palavras chaves
\u25e6 p {font-size: small| medium|
large }
CSS \u2013 Cascading Style Sheets
\uf097 Font-style: usada para obter
um texto obliquo ou italico.
\u25e6 p {font-style: italic | oblique |
normal}
CSS \u2013 Cascading Style Sheets
\uf097 Classes em CSS
\uf097 Nos permitem criar estilos
diferentes para seletores
iguais;
\uf097 O objetivo é definir é definir
uma classe de elementos e
aplicar estilos a qualquer
elemento que pertença a
essa classe.
CSS \u2013 Cascading Style Sheets
\uf097 Criar classes em
CSS é necessário
dois procedimentos.
\uf097 1 \u2013 No meu documento HTML
preciso adicionar um elemento
a uma classe.
\uf097 Ex.: <html>
\uf097 <head>
\uf097 <title>Elixires do Bar Use a
Cabeça</title>
\uf097 </head>
\uf097 <body>
\uf097 <h1>Nossos Elixires</h1>
\uf097 <h2>Chá Verde Cooler</h2>
\uf097 <p class=\u201cclassseA">
\uf097 <img src="../images/green.jpg"
alt="Chá Verde Cooler" />
\uf097 Cheio de vitaminas e minerais,
este elixir
\uf097 combina os benefícios
saudáveis do chá verde com
\uf097 uma pitada de folhas de
camomila e gengibre.
\uf097 </p>
\uf097 <h2>Framboesa Geladinha</h2>
\uf097 <p >
\uf097 <img
src="../images/lightblue.jpg"
alt="Framboesa Geladinha" />
\uf097 Combinando suco de framboesa
com capim-limão,
\uf097 raspas de gelo e o fruto da
roseira-brava, este drinque super
gelado
\uf097 vai clarear e revigorar sua
mente.
\uf097 </p>
\uf097 <h2>Elixir da Felicidade</h2>
\uf097 <p >
\uf097 <img src="../images/blue.jpg"
alt="Elixir da Felicidade" />
\uf097 Essências de vacínio e cereja
misturadas a uma base
\uf097 de chá de erva da flor do
sabugueiro colocarão você em
estado relaxado
\uf097 de felicidade rapidamente.
\uf097 </p>
\uf097 <h2>Explosão Anti-oxidante de
Oxicoco</h2>
\uf097 <p>
\uf097 <img src="../images/red.jpg"
alt="Explosão Anti-oxidante de
Oxicoco" />
\uf097 Acorde para os sabores do
oxicoco e hibiscos neste elixir rico
em vitamina C.
\uf097 </p>
\uf097 <p>
\uf097 <a href="../bar.html">Volte ao
Bar</a>
\uf097 </p>
\uf097 </body>
\uf097 </html>
\uf097
CSS \u2013 Cascading Style
Sheets
\uf097 Criando classes
em CSS
\uf097 2 No arquivo
\u201ccss\u201d preciso
defino as regras
aplicadas ao
seletor
adicionado a
classe.
\uf097 Ex:
\uf097 body{
\uf097 font-family:
verdana;
\uf097 color: blue;
\uf097 }
\uf097 h1,h2 {
\uf097 color: red;
\uf097 }
\uf097 h2 {
font-family:
times-new-
roman;
\uf097 }
\uf097 h1 {
\uf097 top: 1;
\uf097 border-bottom:
1px solid black;
\uf097 }
\uf097 p {
\uf097 color:
yellow;
\uf097 font-family:
sans-serif;
\uf097 }
\uf097 p. classseA{
\uf097 color: green
\uf097 }
CSS \u2013 Cascading Style Sheets
\uf097 Criando classes em CSS
\uf097 Com este trecho
\uf096 p. classseA{
\uf096 color: green
\uf096 }
Adicionamos uma nova regra
para alterar a fonte de
qualquer parágrafo que
esteja na classeA.
CSS \u2013 Cascading Style Sheets
\uf097 Criando classes em CSS
\uf097 E se surgisse a necessidade de
adicionar outros elementos na
classe A?
1 No arquivo css colocarei:
\uf097 h1.classe A, p.classeA {
\uf097 color: green
\uf097 }
\uf097 Se houver um lista
razoavelmente grande de
seletores posso especificá-la da
seguinte forma:
\uf097 .classeA {
\uf097 color: green
\uf097 }
\uf097
CSS \u2013 Cascading Style Sheets
\uf097 Criando classes em CSS
\uf097 No documento HTML
adiciono as classes para o
respectivos elementos.
\uf097 <html>
\uf097 ......
\uf097 <h1 class = \u201cclasseA\u201d>
\uf097 <p class= \u201cclasseA\u201d>
\uf097 ......
\uf097 </html>
CSS \u2013 Cascading Style Sheets
\uf097 Adicionando um elemento
em mais de uma classe
\uf097 Posso adicionar um
elemento a mais de classe
da seguinte forma:
\uf097 <html>
\uf097 ......
\uf097 <h1 class = \u201cclasseA
classeB\u201d >
\uf097 <p class= \u201cclasseA\u201d>
\uf097 ......
\uf097 </html>
CSS \u2013 Cascading Style Sheets
\uf097 Modelo de caixa em CSS
\uf097 Caixas são como as CSS
vêem os elemento. As CCS
tratam cada elemento como
se representasse uma
caixa.
\uf097 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 \u2013 Cascading Style Sheets
\uf097 Modelo de caixa em CSS
\uf097 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 \u2013 Cascading Style Sheets
\uf097 Modelo de caixa em CSS
\uf097 Área de enchimento
\uf097 É o espaço adicional em torno
da área de conteúdo
\uf097 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 \u2013 Cascading Style Sheets
\uf097 Modelo de caixa em CSS
\uf097 A borda
\uf097 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 \u2013 Cascading Style Sheets
\uf097 Modelo de caixa em CSS
\uf097 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 \u2013 Cascading Style Sheets
\uf097 Modelo de caixa em CSS
\uf097 Adicionando enchimento
\uf097 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 \u2013 Cascading Style Sheets
\uf097 Modelo de caixa em CSS
\uf097 Adicionando margens
\uf097 É definido através da
propriedade margin. Seus
valores podem estam em
pixels ou porcentagem.
\uf097 Ex:
\uf097 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 \u2013 Cascading Style Sheets
\uf097 Modelo de caixa em CSS
\uf097 Adicionando bordas
\uf097 Permite adicionar linhas de
contorno a um determinado
elemento.
\uf097 border-style : define o estilo
da borda
\uf097 Border.widht: define a
espessura da borda
\uf097 Border-color: cor da borda.
\uf097 Border-top-color
\uf097 Border-top-style- 1
- 2