CSS Cascading Style Sheets 12
Pré-visualização2 páginas
CSS \u2013 CASCADING STYLE SHEETS
Ivanethe Carvalho Rocha
CSS \u2013 Cascading Style Sheets
\uf097 HTML e CSS são
linguagens que utilizamos
para criar páginas Web.
\uf097 Os servidores Web
armazenam e servem
páginas, que são criadas
com HTML e CSS.
\uf097 HTML é a abreviação para
HyperText Markup
Language (Linguagem
Marcação de Texto) e é
usada para estruturar a
página Web.
CSS \u2013 Cascading Style Sheets
\uf097 CSS é a abreviação de
Cascading Style Sheets \u2013 Folhas
de Estilo em Cascata e são
utilizadas para controlar a
apresentação do documento
HTML.
\uf097 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>.
\uf097 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=\u201csobre\instrucoes.html">instruç
ões detalhadas</a>.
39. Junte-se a nós!
40. </p>
41. </body>
42. </html>
CSS \u2013 Cascading Style Sheets
\uf097 Analisando o arquivo exemplo
\uf097 1- Na linha 4 temos adição de
uma nova tag: a abertura do
elemento <style>. Na linha 20
a tag de fechamento
correspondente.
\uf097 2 \u2013 Ainda na linha 4 o
elemento tem um
type=\u201ctext/css\u201d
\uf097 3 \u2013 Na linha 5 temos o que
chamamos de regras que se
aplicará às propriedades para
o elemento body.
\uf097 4 - Adicionamos propriedades
das linhas, 5 a 20, que
afetarão o estilo de
apresentação deste elemento.
CSS \u2013 Cascading Style Sheets
\uf097 Estrutura de regras
\uf097 Um estilo consiste de uma ou mais
regras que descrevem como os
elementos das página são
apresentados.
\uf097 Cada regra tem duas partes
fundamentais: o seletor e a
declaração do bloco.
\uf097 Assim temos:
CSS \u2013 Cascading Style Sheets
\uf097 Exemplos de tags, que
posso ter no meu documento
HTML ?
\uf097 Com adiciono propriedades
de estilo a estas tags que
compõe meu documento
HTML ?
tag {
Propriedades
}
CSS \u2013 Cascading Style Sheets
\uf097 Suponhamos que
desejamos aplicar um
determinada estilo a um
parágrafo. Qual seria a
declaração dentro meu
style?
\uf097 E que dentro deste estilo
para este parágrafo deseja-
se aplicar uma determinada
cor ao texto?
CSS \u2013 Cascading Style Sheets
\uf097 Agrupando estilos
\uf097 Os títulos são conhecidos
pelas tags <hX>, onde X é
nível do seu título.
\uf097 Suponhamos temos dois
títulos h1 e h2.
H1{
font-family: sans-serif
color: gray
}
H2{
font-family: sans-serif
color: gray
}
CSS \u2013 Cascading Style Sheets
\uf097 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 \u2013 Cascading Style Sheets
\uf097 Agrupando estilos
\uf097 Suponhamos a seguinte
situação: para o titulo H1,
desejamos adicionar uma
nova propriedade presente
somente no titulo H1?
H1{
\uf096 Border-bottom: 1px solid black
}
CSS \u2013 Cascading Style Sheets
\uf097 Criando arquivo CSS
externo
\uf097 Todas as regras adicionadas no
próprio arquivo HTML serão
adicionadas diretamente em um
arquivo de extensão \u201c.css\u201d.
\uf097 No arquivo HTML fazemos a
ligação (link) com o arquivo
\u201ccss\u201d criado.
CSS \u2013 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 \u201cCSS\u201d
CSS \u2013 Cascading Style Sheets
\uf097 Alterando o arquivo HTML
\uf097 Inicialmente adicionamos
uma nova tag:
link que terá a seguinte
estrutura:
<link type = \u201ctext/css\u201d rel =
\u201cstylesheet\u201d
href= \u201cbar.css\u201d>
\uf097 As tags para o elemento
\u201cstyle\u201d não serão mais
necessárias no arquivo
HTML.
CSS \u2013 Cascading Style Sheets
\uf097 Analisando:
<link type = \u201ctext/css\u201d rel =
\u201cstylesheet\u201d
href= \u201cbar.css\u201d>
Onde:
\uf097 link : o elemento link é usando
para criar um link(ligação) com as
informações externas;
\uf097 Type: indica o tipo de informação
a ser ligada externamente, neste
caso folhas de estilo CSS;
\uf097 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;
\uf097 Href: informamos o local onde a
folha de estilo pode ser localizada.
CSS \u2013 Cascading Style Sheets
\uf097 Herança em CSS
\uf097 Inicialmente analisemos a
estrutura do nosso arquivo
HTML.
HTML
HEAD
TITLE
BODY
H1 P P
aimg a em
H2 P
CSS \u2013 Cascading Style Sheets
\uf097 Herança em CSS
\uf097 Analisando a figura quem
será modificado?
HTML
HEAD
TITLE
BODY
H1 P P
aimg a em
H2 P
CSS \u2013 Cascading Style Sheets
\uf097 Herança em CSS
\uf097 Dentro da nossa estrutura temos os
elementos p e dentro deles temos
outros elementos.
\uf097 No primeiro parágrafo temos uma
imagem, no segundo os elementos
<a> e <em>, e no terceiro outro
elemento <a>.
\uf097 Dizemos que esses elementos são
filhos dos elementos <p>, acima
deles.
\uf097 Isso implica que algumas regras
aplicadas a estes parágrafos
afetará quem estiver abaixo deles
na árvore.
\uf097 Lembrando que somente algumas
regras são herdadas, no exemplo,
temos o font-family e color.
\uf097 E o que acontece com elemento
img ?
CSS \u2013 Cascading Style Sheets
\uf097 Herança em CSS
\uf097 O que aconteceria se
aplicássemos a regra para
a propriedade de font-family
no elemento body ?
\uf097 Como ficaria o novo arquivo
css?
CSS \u2013 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 \u2013 Cascading Style Sheets
\uf097 Ignorando heranças em CSS
\uf097 Como posso fazer com que
elemento filho não herde as
propriedades do pai?
\uf097 Em CSS podemos fazer com
que as propriedades dos
pais sejam ignoradas pelos
filhos adicionando regras
mais especificas.
\uf097 Estas regras especificas são
adicionadas criando a
mesma regra para o
elemento desejado.
CSS \u2013 Cascading Style Sheets
\uf097 Ignorando heranças em CSS \u2013
Arquivo modificado
\uf097 body{
\uf097 font-family: verdana;
\uf097 color: blue;
\uf097 }
\uf097 h2 {
\uf097 color: red;
\uf097 }
\uf097 h2 {
\uf097 font-family: times-new-roman;
\uf097 }
\uf097 h1 {
\uf097 border-bottom: 1px solid black;
\uf097 }
\uf097 p {
\uf097 color: yellow;
\uf097 font-family: sans-serif;
\uf097 }
CSS \u2013 Cascading Style Sheets
\uf097 Algumas propriedades
\uf097 Text-align: controla a
propriedade para alinhar o
texto.
\u25e6 Ex: p {text-align : left | center |
right | justify}
CSS \u2013 Cascading Style Sheets
\uf097 Color: usada para definir a
cor da fonte dos elementos
de texto.
\uf097 Algumas maneira de
especificar cores:
\uf097 Especificar pelo nome:
\u25e6 Ex: p { color: silver}
\uf097 Especificar em termos das
cores básicas
\u25e6 Ex: p { color: rgb(80%,40%,0%)}
\u25e6 p { color: rgb(204,102,0}
\uf097 Especificar em hexadecimal
\u25e6 p {color: #cc6600}
\uf097 Background-color: controla a
cor de fundo de um elemento.
Utiliza os mesmos valores
para color.
CSS \u2013 Cascading Style Sheets
\uf097 Font-size: controla o
tamanho do texto.
\u25e6 Especificando fontes em
pixles
\uf096 p {font-size: 14px}
\u25e6 Especificando em
porcentagem
\uf096 p {font-size: 150%}
\u25e6 Usando um fator de escala
\u201cem\u201d
\uf096 p {font-size:- 1
- 2