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 â&#x20AC;&#x201C; 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