Buscar

CSS Cascading Style Sheets

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 41 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 41 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 41 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

CSS – CASCADING STYLE SHEETS
Ivanethe Carvalho Rocha
CSS – Cascading Style Sheets
 HTML e CSS são 
linguagens que utilizamos 
para criar páginas Web.
 Os servidores Web 
armazenam e servem 
páginas, que são criadas 
com HTML e CSS. 
 HTML é a abreviação para 
HyperText Markup 
Language (Linguagem 
Marcação de Texto) e é 
usada para estruturar a 
página Web.
CSS – Cascading Style Sheets
 CSS é a abreviação de 
Cascading Style Sheets – Folhas 
de Estilo em Cascata e são 
utilizadas para controlar a 
apresentação do documento 
HTML.
 As CSS podem ser adicionadas 
à pagina Web HTML colocando-
se suas regras dentro do 
elemento <style>. O elemento 
<style> deve estar 
obrigatoriamente sempre dentro 
do elemento <head>.
 Você especifica as 
características do estilo dos 
elementos em seu HTML 
utilizando as CSS.
1. <html>
2. <head>
3. <title>Bar Use a Cabeça</title>
4. <style type="text/css">
5. body {
6. font-family: sans-serif;
7. }
8. h1, h2 {
9. color: red;
10. }
11. h2 {
12. font-family: times-new-roman;
13. }
14. h1 {
15. border-bottom: 1px solid red;
16. }
17. p {
18. color: blue;
19. }
20. </style>
21. </head>
22. <body>
23. <h1>Bem-vindo ao Novo e 
Melhorado Bar Use a Cabeça </h1>
24. <img src="images/drinks.gif" 
alt="Drinks" />
25. <p>
26. Junte-se a nós em qualquer noite 
dessas para beber 
27. <a 
href="bebidas/elixir.html">elixires</a
> refrescantes, 
28. ter um bom papo e talvez 
algumas partidas de 
29. <em>Dance Dance
Revolution</em>. 
30. O acesso wireless está sempre 
disponível; 
31. TSPSW (Traga Seu Próprio 
Servidor Web).
32. </p>
33. <h2>Como chegar</h2>
34. <p>
35. Você nos encontrará bem no 
centro 
36. da cidade de Weblândia. Se 
precisar de ajuda para nos localizar,
37. verifique nossas 
38. <a 
href=“sobre\instrucoes.html">instruç
ões detalhadas</a>. 
39. Junte-se a nós!
40. </p>
41. </body>
42. </html>
CSS – Cascading Style Sheets
 Analisando o arquivo exemplo
 1- Na linha 4 temos adição de 
uma nova tag: a abertura do 
elemento <style>. Na linha 20 
a tag de fechamento 
correspondente.
 2 – Ainda na linha 4 o 
elemento tem um 
type=“text/css”
 3 – Na linha 5 temos o que 
chamamos de regras que se 
aplicará às propriedades para 
o elemento body.
 4 - Adicionamos propriedades 
das linhas, 5 a 20, que 
afetarão o estilo de 
apresentação deste elemento.
CSS – Cascading Style Sheets
 Estrutura de regras
 Um estilo consiste de uma ou mais 
regras que descrevem como os 
elementos das página são 
apresentados.
 Cada regra tem duas partes 
fundamentais: o seletor e a 
declaração do bloco.
 Assim temos:
CSS – Cascading Style Sheets
 Exemplos de tags, que 
posso ter no meu documento 
HTML ?
 Com adiciono propriedades 
de estilo a estas tags que 
compõe meu documento 
HTML ?
tag {
Propriedades
}
CSS – Cascading Style Sheets
 Suponhamos que 
desejamos aplicar um 
determinada estilo a um 
parágrafo. Qual seria a 
declaração dentro meu 
style?
 E que dentro deste estilo 
para este parágrafo deseja-
se aplicar uma determinada 
cor ao texto?
CSS – Cascading Style Sheets
 Agrupando estilos 
 Os títulos são conhecidos 
pelas tags <hX>, onde X é 
nível do seu título.
 Suponhamos temos dois 
títulos h1 e h2.
H1{
font-family: sans-serif
color: gray
}
H2{
font-family: sans-serif
color: gray
}
CSS – Cascading Style Sheets
 Agrupando estilos 
Como os títulos tem estilos
exatamente iguais podemos
organizá-los da seguinte
forma:
H1,H2{
font-family: sans-serif
color: gray
}
CSS – Cascading Style Sheets
 Agrupando estilos
 Suponhamos a seguinte 
situação: para o titulo H1, 
desejamos adicionar uma 
nova propriedade presente 
somente no titulo H1?
H1{
 Border-bottom: 1px solid black
}
CSS – Cascading Style Sheets
 Criando arquivo CSS 
externo
 Todas as regras adicionadas no 
próprio arquivo HTML serão 
adicionadas diretamente em um 
arquivo de extensão “.css”.
 No arquivo HTML fazemos a 
ligação (link) com o arquivo 
“css” criado.
CSS – Cascading Style Sheets
1.h1, h2 {
2. color: red;
3. }
4. h2 {
5. font-family: times-new-
roman;
6. }
7. h1 {
8. border-bottom: 1px solid
red;
9. }
10. p {
11. color: blue;
12. }
O arquivo “CSS”
CSS – Cascading Style Sheets
 Alterando o arquivo HTML
 Inicialmente adicionamos 
uma nova tag:
link que terá a seguinte 
estrutura:
<link type = “text/css” rel = 
“stylesheet”
href= “bar.css”>
 As tags para o elemento 
“style” não serão mais 
necessárias no arquivo 
HTML.
CSS – Cascading Style Sheets
 Analisando:
<link type = “text/css” rel = 
“stylesheet”
href= “bar.css”>
Onde: 
 link : o elemento link é usando
para criar um link(ligação) com as
informações externas;
 Type: indica o tipo de informação
a ser ligada externamente, neste
caso folhas de estilo CSS;
 Rel: este atributo especifica o
relacionamento entre o arquivo
HTML e para onde o link está
sendo criado. Neste caso estamos
criando um link para uma folha de
estilo;
 Href: informamos o local onde a
folha de estilo pode ser localizada.
CSS – Cascading Style Sheets
 Herança em CSS
 Inicialmente analisemos a 
estrutura do nosso arquivo 
HTML.
HTML
HEAD
TITLE
BODY
H1 P P
aimg a em
H2 P
CSS – Cascading Style Sheets
 Herança em CSS
 Analisando a figura quem 
será modificado?
HTML
HEAD
TITLE
BODY
H1 P P
aimg a em
H2 P
CSS – Cascading Style Sheets
 Herança em CSS
 Dentro da nossa estrutura temos os 
elementos p e dentro deles temos 
outros elementos.
 No primeiro parágrafo temos uma 
imagem, no segundo os elementos 
<a> e <em>, e no terceiro outro 
elemento <a>.
 Dizemos que esses elementos são 
filhos dos elementos <p>, acima 
deles. 
 Isso implica que algumas regras 
aplicadas a estes parágrafos 
afetará quem estiver abaixo deles 
na árvore.
 Lembrando que somente algumas 
regras são herdadas, no exemplo, 
temos o font-family e color.
 E o que acontece com elemento 
img ? 
CSS – Cascading Style Sheets
 Herança em CSS
 O que aconteceria se 
aplicássemos a regra para 
a propriedade de font-family 
no elemento body ?
 Como ficaria o novo arquivo 
css? 
CSS – Cascading Style Sheets
1.body {
2. font-family: times-new-
roman;
3.}
4.h1, h2 {
5. color: red;
6. }
7. h1 {
8. border-bottom: 1px solid
red;
9. }
10. p {
11. color: blue;
12. }
CSS – Cascading Style Sheets
 Ignorando heranças em CSS
 Como posso fazer com que 
elemento filho não herde as 
propriedades do pai?
 Em CSS podemos fazer com 
que as propriedades dos 
pais sejam ignoradas pelos 
filhos adicionando regras 
mais especificas. 
 Estas regras especificas são 
adicionadas criando a 
mesma regra para o 
elemento desejado.
CSS – Cascading Style Sheets
 Ignorando heranças em CSS –
Arquivo modificado
 body{
 font-family: verdana;
 color: blue;
 }
 h2 {
 color: red;
 }
 h2 {
 font-family: times-new-roman;
 }
 h1 {
 border-bottom: 1px solid black;
 }
 p {
 color: yellow;
 font-family: sans-serif;
 }
CSS – Cascading Style Sheets
 Algumas propriedades
 Text-align: controla a 
propriedade para alinhar o 
texto.
◦ Ex: p {text-align : left | center | 
right | justify}
CSS – Cascading Style Sheets
 Color: usada para definir a 
cor da fonte dos elementos 
de texto.
 Algumas maneira de 
especificar cores:
 Especificar pelo nome:
◦ Ex: p { color: silver}
 Especificar em termos das 
cores básicas
◦ Ex: p { color: rgb(80%,40%,0%)}
◦ p { color: rgb(204,102,0}
 Especificar em hexadecimal
◦ p {color: #cc6600}
 Background-color: controla a 
cor de fundo de um elemento. 
Utiliza os mesmos valores 
para color.
CSS – Cascading Style Sheets
 Font-size: controla o 
tamanho do texto.
◦ Especificando fontes em 
pixles
 p {font-size: 14px}
◦ Especificando em 
porcentagem
 p {font-size: 150%}
◦ Usando um fator de escala 
“em”
 p {font-size: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

Outros materiais

Materiais relacionados

Perguntas relacionadas

Materiais recentes

Perguntas Recentes