CSS-Cascading Style Sheets

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 é 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>


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.


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:


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

}


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?


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{


color: gray

}


Agrupando estilos

Como os títulos tem estilos

exatamente iguais podemos

organizá-los da seguinte

forma:

H1,H2{


color: gray

}


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

}


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.


1.h1, h2 {

2. color: red;

3. }

4. h2 {


6. }

7. h1 {

8. border-bottom: 1px solidred;

9. }

10. p {

11. color: blue;

12. }

O arquivo “CSS”


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.


Analisando:

<link type = “text/css” rel = “stylesheet”

href= “bar.css”>

Onde:

link : o elemento link é usandopara criar um link(ligação) com asinformações externas;

Type: indica o tipo de informaçãoa ser ligada externamente, nestecaso folhas de estilo CSS;

Rel: este atributo especifica orelacionamento entre o arquivoHTML e para onde o link estásendo criado. Neste caso estamoscriando um link para uma folha deestilo;

Href: informamos o local onde afolha de estilo pode ser localizada.


Herança em CSS

Inicialmente analisemos a

estrutura do nosso arquivo

HTML.

HTML

HEAD

TITLEBODY

H1 P P

aimg a em

H2 P


Herança em CSS

Analisando a figura quem

será modificado?

HTML

HEAD

TITLE

BODY

H1 P P

aimg a em

H2 P


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 ?


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?


1.body {


3.}

4.h1, h2 {

5. color: red;

6. }

7. h1 {

8. border-bottom: 1px solidred;

9. }

10. p {

11. color: blue;

12. }


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.


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;

}


Algumas propriedades

Text-align: controla a

propriedade para alinhar o

texto.

◦ Ex: p {text-align : left | center |

right | justify}


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.


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 }


Font-style: usada para obter

um texto obliquo ou italico.

◦ p {font-style: italic | oblique |

normal}


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 >

<imgsrc="../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

}


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.



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

}



No documento HTML

adiciono as classes para o

respectivos elementos.

<html>

......

<h1 class = “classeA”>

<p class= “classeA”>

......

</html>


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>


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



A área de conteúdo:

armazena o conteúdo do

elemento. Pode ser um

texto, uma imagem.




flor do sabugueiro



rapidamente

Área de

conteudo



Á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.




flor do sabugueiro



rapidamente

Área de enchimento



A borda

Os elementos podem à

volta uma borda opcional.

A borda fica em torno do

enchimento




flor do sabugueiro



rapidamenteborda



A margem é opcional e

envolve a borda. Permite

adicionar espaço os

elementos na mesma

pagina.




flor do sabugueiro



rapidamente

margem



Adicionando enchimento

Isto é realizado através dapropriedade padding, esta éusuda para definição algumenchimento para os quatro ladosdo conteúdo. Seu valor pode serem pixels ou com porcentagemem 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


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}

Oup {margin: 0x 20 px 30px 10px

} 1em cima 2 a dir 3em bx 4a esq



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

Documents

CSS-Cascading Style Sheets