Академический Документы
Профессиональный Документы
Культура Документы
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.
<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>
35.
15.
16. 17. 18. 19. 20. 21. 22. 23.
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:
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?
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. }
HTML HEAD
BODY TITLE
H1
H2
img
em
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 ?
{ 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. }
Especificar em hexadecimal
Background-color: controla a cor de fundo de um elemento. Utiliza os mesmos valores para color.
Especificando em porcentagem
p {font-size: 150%}
O objetivo definir definir uma classe de elementos e aplicar estilos a qualquer elemento que pertena a essa classe.
<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>
times-newroman; } h1 { top: 1; border-bottom: 1px solid black; } p{ color: yellow; font-family: sans-serif; } p. classseA{ color: green }
Adicionamos uma nova regra para alterar a fonte de qualquer pargrafo que esteja na classeA.
color: green
} Se houver um lista razoavelmente grande de seletores posso especific-la da seguinte forma: .classeA {
color: green
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
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
rea de conteudo
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.
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
rea de enchimento
borda
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
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
margem