CSS-Cascading Style Sheets

Page 1

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 colocandose 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. 2.

<html> <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 { font-family: times-new-roman;

12.

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

13.

}

14.

h1 {

15.

Revolution</em>.

border-bottom: 1px solid red;

39.

16.

}

40.

17.

p{

41.

18. 19. 20.

color: blue; } </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

42.

verifique nossas <a href=“sobre\instrucoes.html">instruç ões detalhadas</a>. Junte-se a nós! </p> </body> </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 desejase 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 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. }


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

BODY TITLE

H1

P

P

H2

P

img

a

em

a


CSS – Cascading Style Sheets Herança em CSS  Analisando a figura quem será modificado? 

HTML

HEAD

BODY TITLE

H1

P

P

H2

P

img

a

em

a


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-newroman; 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: 1.2 em}

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


CSS – Cascading Style Sheets 

Font-style: usada para obter um texto obliquo ou italico. ◦ p {font-style: italic | oblique | normal}


CSS – Cascading Style Sheets 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 >  <img src="../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-newroman; } h1 { top: 1; border-bottom: 1px solid black; } p{ color: yellow; font-family: sans-serif; } p. classseA{ color: green }


CSS – Cascading Style Sheets 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.


CSS – Cascading Style Sheets 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

 

}


CSS – Cascading Style Sheets Criando classes em CSS  No documento HTML adiciono as classes para o respectivos elementos.  <html>  ......  <h1 class = “classeA”>  <p class= “classeA”>  ......  </html> 


CSS – Cascading Style Sheets 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> 


CSS – Cascading Style Sheets 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


CSS – Cascading Style Sheets Modelo de caixa em CSS  A área de conteúdo: armazena o conteúdo do elemento. Pode ser um texto, uma imagem. 

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

Área de conteudo


CSS – Cascading Style Sheets 

Modelo de caixa em CSS

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

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 Área de enchimento


CSS – Cascading Style Sheets Modelo de caixa em CSS  A borda  Os elementos podem à volta uma borda opcional. A borda fica em torno do enchimento 

borda

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


CSS – Cascading Style Sheets Modelo de caixa em CSS  A margem é opcional e envolve a borda. Permite adicionar espaço os elementos na mesma pagina. 

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 margem


CSS – Cascading Style Sheets Modelo de caixa em CSS  Adicionando enchimento  Isto é realizado através da propriedade padding, esta é usuda para definição algum enchimento para os quatro lados do conteúdo. Seu valor pode ser em pixels ou com porcentagem em 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 


CSS – Cascading Style Sheets 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} Ou p {margin: 0x 20 px 30px 10px } 1em cima 2 a dir 3em bx 4 a esq   


CSS – Cascading Style Sheets 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 


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.