41 pág.
Denunciar
Pré-visualização | Página 1 de 2
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: