Embed Size (px)
Citation preview
Disciplina:
MsC. Alexandro Vladno
Edmilson Campos
MsC. Fábio Procópio
Esp. Felipe Dantas
MsC. João Maria
MsC. Liviane Melo
Corpo docente:
Regras de estilos; Folhas de estilos; Seletores; Validação.
Autoria Web
AULA 10
▪
▪»
»
»
seletor { propriedade: valor; }
Declaração
Regra de estilo
Edmilson Campos ([email protected]) 3
<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>
Edmilson Campos ([email protected]) 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/
Edmilson Campos ([email protected]) 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>
▪
▪
▪
Edmilson Campos ([email protected]) 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>
▪
▪
Edmilson Campos ([email protected]) 8
<head> <style type=“text/css”> @import url("meuCSS.css") all; <style> </head>
▪
▪»
»
<head> <link rel="stylesheet" type="text/css" href= "meuCSS.css" media="all"> </head>
Edmilson Campos ([email protected]) 9
css
index.htm 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>
Edmilson Campos ([email protected]) 11
▪
▪
▪
h1 strong { ...regra aplicada aos elementos STRONG dentro dos elementos H1... } p strong { ...regra aplicada aos elementos STRONG dentro dos elementos P... }
Edmilson Campos ([email protected]) 16
▪
▪
»
»
▪
»
»
▪ a:link { color: green; }
a:hover { color: red; }
a:active { background-color: gray; }
Edmilson Campos ([email protected]) 17
▪
▪
▪
<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;}
Edmilson Campos ([email protected]) 18
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>
Edmilson Campos ([email protected]) 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>
Edmilson Campos ([email protected]) 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>
Edmilson Campos ([email protected]) 21
<h1 id="destaque"> Cabeçalho com a fonte Verdana.</h1>
<p id="diferente"> Parágrafo na cor verde.</p>
<li id="um"> Item da lista com fonte no tamanho de 18px</li>
p#diferente { color: green;} h1#destaque {font-family: Verdana;} li#um {font-size: 18px;}
▪
▪
▪
»
»
#green {color:green} <p id="green">Parágrafo à direita</p>
Edmilson Campos ([email protected]) 22
