CSS   Cascading Style Sheets 12
41 pág.

CSS Cascading Style Sheets 12


DisciplinaLógica I9.961 materiais142.083 seguidores
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&quot;>
\uf097 <img src=&quot;../images/green.jpg&quot; 
alt=&quot;Chá Verde Cooler&quot; />
\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=&quot;../images/lightblue.jpg&quot; 
alt=&quot;Framboesa Geladinha&quot; />
\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=&quot;../images/blue.jpg&quot; 
alt=&quot;Elixir da Felicidade&quot; />
\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=&quot;../images/red.jpg&quot; 
alt=&quot;Explosão Anti-oxidante de 
Oxicoco&quot; />
\uf097 Acorde para os sabores do 
oxicoco e hibiscos neste elixir rico 
em vitamina C.
\uf097 </p>
\uf097 <p>
\uf097 <a href=&quot;../bar.html&quot;>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