CSS   Cascading Style Sheets 12
41 pág.

CSS Cascading Style Sheets 12

Disciplina:Tecnologias Web3.157 materiais8.190 seguidores
Pré-visualização2 páginas
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: