Disciplina: Autoria Web AULA 10 Regras de estilos; Folhas de estilos; Seletores; Validação. Corpo docente: MsC. Alexandro Vladno Edmilson Campos MsC. Fábio Procópio Esp. Felipe Dantas MsC. João Maria MsC. Liviane Melo
CSS Cascading Style Sheet 2
Regra de estilo seletor { propriedade: valor; } Declaração 3
4
<style type="text/css" media="all"> /*Isto é um comentário CSS*/ p { color: white; background-color: green; text-align: center; font-family: "Arial Narrow"; font-size: 15pt; font-weight: bold; } </style> <style type="text/css" media="all"> h1 { background-color: red; color: black; font-family: Arial, sans-serif; } p { margin-top: 10px; text-align: justify; } </style> 5
1. 2. 3. Para a construção das nossas folhas de estilo, utilizaremos um software gratuito chamado TopStyle, o qual se encontra disponível para download em http://topstyle.en.softonic.com/ 6
<html> <head> </head> <body> <p style="color:white; background-color: green; text-align: center; font-family:arial Narrow; font-size:15pt; font-weight:bold;"> Este parágrafo tem cor branca, fundo verde, está centralizado, <br> fonte Arial Narrow, tem tamanho 15 e está em negrito. </p> </body> </html> 7
<html> <head> <style type="text/css"> p { color: white; background-color: green; text-align: center; font-family: "Arial Narrow"; font-size: 15 pt; font-weight: bold; } </style> </head> <body> <p>este parágrafo tem cor branca, fundo verde, está centralizado, <br> fonte Arial Narrow, tem tamanho 15 e está em negrito. </p> </body> </html> 8
<head> <link rel="stylesheet" type="text/css" href= "meucss.css" media="all"> </head> <head> <style type= text/css > @import url("meucss.css") all; <style> </head> 9
10
index.htm css meucss.css p { } color:white; background-color: green; text-align: center; font-family: Arial Narrow ; font-size: 15pt; font-weight: bold; <html> <head> <link rel="stylesheet" type="text/css" href= "css/meucss.css" media= "all"> </head> <body> <p> Este parágrafo tem cor branca, fundo verde, está centralizado, <br> fonte Arial Narrow, tem tamanho 15 e está em negrito. </p> </body> </html> 11
12
* { color: blue; } 13
14
h1, h2, h3 { color:green; } 15
h1 strong {...regra aplicada aos elementos STRONG dentro dos elementos H1... } p strong {...regra aplicada aos elementos STRONG dentro dos elementos P... } 16
a:link { color: green; } a:hover { color: red; } a:active { background-color: gray; } 17
h1.destaque {font-family: Verdana;} p.diferente { color: green;} li.um {font-size: 18px; color: blue;} li.dois{font-size:18px; color: red;} <h1 class="destaque"> Cabeçalho com a fonte Verdana.</h1> <p class="diferente"> Parágrafo na cor verde.</p> <li class="um"> Item da lista com fonte no tamanho de 18px e cor azul.</li> <li class="dois"> Item da lista com fonte no tamanho de 18px e cor vermelha.</li> 18
<h1 class="destaque"> Cabeçalho com a fonte Verdana.</h1> <p class="diferente"> Parágrafo na cor verde.</p> <li class="um"> Item da lista com fonte no tamanho de 18px e cor azul.</li> <li class="dois"> Item da lista com fonte no tamanho de 18px e cor vermelha.</li> h1.destaque {font-family: Verdana;} p.diferente { color: green;} li.um {font-size: 18px; color: blue;} li.dois{font-size:18px; color: red;} 19
.diferente { color: green} <h1 class="diferente"> Cabeçalho escrito na cor verde -> Classe diferente.</h1> <p class="diferente"> Parágrafo escrito na cor verde -> Classe diferente.</p> <li class="diferente"> Item da lista escrito na cor verde -> Classe diferente.</li> <li class="diferente"> Item da lista escrito na cor verde -> Classe diferente.</li> 20
.diferente { color: green} <h1 class="diferente"> Cabeçalho escrito na cor verde -> Classe diferente.</h1> <p class="diferente"> Parágrafo escrito na cor verde -> Classe diferente.</p> <li class="diferente"> Item da lista escrito na cor verde -> Classe diferente.</li> <li class="diferente"> Item da lista escrito na cor verde -> Classe diferente.</li> 21
#green {color:green} p#diferente { color: green;} h1#destaque {font-family: Verdana;} li#um {font-size: 18px;} <p id="green">parágrafo à direita</p> <p id="diferente"> Parágrafo na cor verde.</p> <h1 id="destaque"> Cabeçalho com a fonte Verdana.</h1> <li id="um"> Item da lista com fonte no tamanho de 18px</li> 22
http://jigsaw.w3.org/cssvalidator/#validate_by_upload 23
24