41 pág.

CSS Cascading Style Sheets 12

CSS Cascading Style Sheets 12

Tecnologias Web

•

ESTÁCIO

ESTÁCIO

Tecnologias Web

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:

Página12