CSS - Cascading Style Sheets

CSS CASCADING STYLE SHEETS
Ivanethe Carvalho Rocha
CSS Cascading Style Sheets

HTML e CSS so linguagens que utilizamos para criar pginas Web. Os servidores Web armazenam e servem pginas, que so criadas com HTML e CSS. HTML a abreviao para HyperText Markup Language (Linguagem Marcao de Texto) e usada para estruturar a pgina Web.
CSS a abreviao de Cascading Style Sheets Folhas de Estilo em Cascata e so utilizadas para controlar a apresentao do documento HTML.
As CSS podem ser adicionadas pagina Web HTML colocandose suas regras dentro do elemento <style>. O elemento <style> deve estar obrigatoriamente sempre dentro do elemento <head>.
Voc especifica as caractersticas do estilo dos elementos em seu HTML utilizando as CSS.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
<html> <head> <title>Bar Use a Cabea</title> <style type="text/css"> body { font-family: sans-serif; } h1, h2 { color: red; } h2 { font-family: times-new-roman; } h1 {
37. 38. 36. 31. 30.
Revolution</em>. O acesso wireless est sempre disponvel; TSPSW (Traga Seu Prprio Servidor Web). </p> <h2>Como chegar</h2> <p>
32. 33. 34.
35.
Voc nos encontrar bem no centro

da cidade de Weblndia. Se precisar de ajuda para nos localizar, verifique nossas <a href=sobre\instrucoes.html">instru es detalhadas</a>. Junte-se a ns! </p> </body> </html>
15.
16. 17. 18. 19. 20. 21. 22. 23.
border-bottom: 1px solid red;

} p{ color: blue; } </style> </head> <body> <h1>Bem-vindo ao Novo e Melhorado Bar Use a Cabea </h1> <img src="images/drinks.gif" alt="Drinks" /> <p> Junte-se a ns em qualquer noite dessas para beber <a href="bebidas/elixir.html">elixires</a > refrescantes, ter um bom papo e talvez algumas partidas de <em>Dance Dance
39. 40. 41. 42.
24.
25. 26.
27.
28.
29.

Analisando o arquivo exemplo 1- Na linha 4 temos adio 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 afetaro o estilo de apresentao deste elemento.

Estrutura de regras Um estilo consiste de uma ou mais regras que descrevem como os elementos das pgina so apresentados. Cada regra tem duas partes fundamentais: o seletor e a declarao do bloco. Assim temos:

Exemplos de tags, que posso ter no meu documento HTML ? Com adiciono propriedades de estilo a estas tags que compe meu documento HTML ?
tag { Propriedades }
Suponhamos que desejamos aplicar um determinada estilo a um pargrafo. Qual seria a declarao dentro meu style? E que dentro deste estilo para este pargrafo desejase aplicar uma determinada cor ao texto?

Agrupando estilos Os ttulos so conhecidos pelas tags <hX>, onde X nvel do seu ttulo. Suponhamos temos dois ttulos h1 e h2. H1{ font-family: sans-serif color: gray } H2{ font-family: sans-serif color: gray }

Agrupando estilos Como os ttulos tem estilos exatamente iguais podemos organiz-los da seguinte forma:
H1,H2{ font-family: sans-serif color: gray }

Agrupando estilos Suponhamos a seguinte situao: 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 prprio arquivo HTML sero adicionadas diretamente em um arquivo de extenso .css. No arquivo HTML fazemos a ligao (link) com o arquivo css criado.

O arquivo CSS
1. h1,
h2 { 2. color: red; 3. } 4. h2 { 5. font-family: times-newroman; 6. } 7. h1 { 8. border-bottom: 1px solid red; 9. } 10. p { 11. color: blue; 12. }

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 no sero mais necessrias no arquivo HTML.

Analisando: <link type = text/css rel = stylesheet href= bar.css> Onde: link : o elemento link usando para criar um link(ligao) com as informaes externas; Type: indica o tipo de informao 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.

Herana em CSS Inicialmente analisemos a estrutura do nosso arquivo HTML.
HTML HEAD
BODY TITLE
H1
H2
img
em

Herana em CSS Analisando a figura quem ser modificado?
HTML
HEAD
BODY TITLE
H1
H2
img
em

Herana em CSS Dentro da nossa estrutura temos os elementos p e dentro deles temos outros elementos. No primeiro pargrafo temos uma imagem, no segundo os elementos <a> e <em>, e no terceiro outro elemento <a>. Dizemos que esses elementos so filhos dos elementos <p>, acima deles. Isso implica que algumas regras aplicadas a estes pargrafos afetar quem estiver abaixo deles na rvore. Lembrando que somente algumas regras so herdadas, no exemplo, temos o font-family e color. E o que acontece com elemento img ?

Herana em CSS O que aconteceria se aplicssemos a regra para a propriedade de font-family no elemento body ?

Como ficaria o novo arquivo css?

1. body
{ 2. font-family: times-newroman; 3. } 4. h1, h2 { 5. color: red; 6. } 7. h1 { 8. border-bottom: 1px solid red; 9. } 10. p { 11. color: blue; 12. }

Ignorando heranas em CSS Como posso fazer com que elemento filho no 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 so adicionadas criando a mesma regra para o elemento desejado.
Ignorando heranas 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 bsicas
Ex: p { color: rgb(80%,40%,0%)} p { color: rgb(204,102,0} p {color: #cc6600}
Especificar em hexadecimal
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 pertena a essa classe.
Criar classes em CSS necessrio dois procedimentos.

1 No meu documento HTML preciso adicionar um elemento a uma classe.
Ex.: <html> <head> <title>Elixires do Bar Use a Cabea</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 benefcios saudveis do ch verde com uma pitada de folhas de camomila e gengibre. </p> <h2>Framboesa Geladinha</h2> <p > <img src="../images/lightblue.jpg" alt="Framboesa Geladinha" /> Combinando suco de framboesa com capim-limo, 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" /> Essncias de vacnio e cereja misturadas a uma base de ch de erva da flor do sabugueiro colocaro voc em estado relaxado de felicidade rapidamente. </p> <h2>Exploso Anti-oxidante de Oxicoco</h2> <p> <img src="../images/red.jpg" alt="Exploso 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>

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-newroman; } 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 pargrafo que esteja na classeA.

Criando classes em CSS 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

Criando classes em CSS 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 so como as CSS vem os elemento. As CCS tratam cada elemento como se representasse uma caixa. Cada caixa composta por uma rea de contedo com enchimentos, bordas e margens opcionais
Essncias de vacnio e cereja misturadas a uma base de ch de erva da flor do sabugueiro colocaro voc em estado relaxado de felicidade rapidamente

Modelo de caixa em CSS A rea de contedo: armazena o contedo do elemento. Pode ser um texto, uma imagem.
rea de conteudo
Modelo de caixa em CSS
rea de enchimento o espao adicional em torno da rea de contedo Com css possvel controlar a largura do enchimento em torno da rea de contedo.
rea de enchimento

Modelo de caixa em CSS A borda Os elementos podem volta uma borda opcional. A borda fica em torno do enchimento
borda

Modelo de caixa em CSS A margem opcional e envolve a borda. Permite adicionar espao os elementos na mesma pagina.
margem

Modelo de caixa em CSS Adicionando enchimento Isto realizado atravs da propriedade padding, esta usuda para definio algum enchimento para os quatro lados do contedo. Seu valor pode ser em pixels ou com porcentagem em relao 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 atravs 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} Ou p {margin: 0x 20 px 30px 10px } 1em cima 2 a dir 3em bx 4 a esq


Modelo de caixa em CSS 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

CSS - Cascading Style Sheets

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

CSS - Cascading Style Sheets

Caricato da

Copyright:

Formati disponibili

CSS CASCADING STYLE SHEETS

Ivanethe Carvalho Rocha

CSS Cascading Style Sheets

CSS Cascading Style Sheets

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.

32. 33. 34.

Voc nos encontrar bem no centro

border-bottom: 1px solid red;

39. 40. 41. 42.

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

H1,H2{ font-family: sans-serif color: gray }

CSS Cascading Style Sheets

H1{ Border-bottom: 1px solid black }

CSS Cascading Style Sheets

Criando arquivo CSS externo

CSS Cascading Style Sheets

CSS Cascading Style Sheets

As tags para o elemento style no sero mais necessrias no arquivo HTML.

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

Como ficaria o novo arquivo css?

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

Ignorando heranas em CSS Arquivo modificado

CSS Cascading Style Sheets

Ex: p {text-align : left | center | right | justify}

CSS Cascading Style Sheets

Ex: p { color: silver}

Especificar em termos das cores bsicas

Ex: p { color: rgb(80%,40%,0%)} p { color: rgb(204,102,0} p {color: #cc6600}

CSS Cascading Style Sheets

Font-size: controla o tamanho do texto.

Usando um fator de escala em

Usando palavras chaves p {font-size: small| medium| large }

CSS Cascading Style Sheets

Font-style: usada para obter um texto obliquo ou italico.

CSS Cascading Style Sheets

CSS Cascading Style Sheets

Criar classes em CSS necessrio dois procedimentos.

CSS Cascading Style Sheets

CSS Cascading Style Sheets

p. classseA{ color: green }

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

Modelo de caixa em CSS

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets

CSS Cascading Style Sheets