Post on 11-Jul-2020
Disciplina:
http://edmilsoncampos.net
edmilson.campos@ifrn.edu.br
Edmilson Campos, Prof. MsC.
Regras de estilos; Folhas de estilos; Seletores; Validação.
Autoria Web
AULA 08
▪ CSS Cascading Style Sheet
»
▪
▪
▪»
»
»
Edmilson Campos (edmilson.campos@ifrn.edu.br)2
▪
▪»
»
»
seletor { propriedade: valor; }
Declaração
Regra de estilo
Edmilson Campos (edmilson.campos@ifrn.edu.br)3
▪
▪
Edmilson Campos (edmilson.campos@ifrn.edu.br)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>
Edmilson Campos (edmilson.campos@ifrn.edu.br)5
▪
▪1.
−
2.−
3.−
Para a construção das nossas folhas de estilo, utilizaremosum software gratuito chamado TopStyle, o qual se encontradisponível para download em http://topstyle.en.softonic.com/
Edmilson Campos (edmilson.campos@ifrn.edu.br)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 (edmilson.campos@ifrn.edu.br)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 (edmilson.campos@ifrn.edu.br)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 (edmilson.campos@ifrn.edu.br)9
▪
Edmilson Campos (edmilson.campos@ifrn.edu.br)10
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 (edmilson.campos@ifrn.edu.br)11
▪
▪
»−
−
−
−
−
»−
−
−
−
Edmilson Campos (edmilson.campos@ifrn.edu.br)12
* { color: blue; }
▪
▪
▪
»
Edmilson Campos (edmilson.campos@ifrn.edu.br)13
▪
▪
Edmilson Campos (edmilson.campos@ifrn.edu.br)14
▪
▪
▪
»
h1, h2, h3{
color:green;}
Edmilson Campos (edmilson.campos@ifrn.edu.br)15
▪
▪
▪
h1 strong {...regra aplicada aos elementos STRONG dentro dos elementos H1...
}
p strong {...regra aplicada aos elementos STRONG dentro dos elementos P...
}
Edmilson Campos (edmilson.campos@ifrn.edu.br)16
▪
▪
»
»
▪
»
»
▪
a:link {
color: green;}
a:hover {
color: red;}
a:active {
background-color: gray;}
Edmilson Campos (edmilson.campos@ifrn.edu.br)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 (edmilson.campos@ifrn.edu.br)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 (edmilson.campos@ifrn.edu.br)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 (edmilson.campos@ifrn.edu.br)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 (edmilson.campos@ifrn.edu.br)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 (edmilson.campos@ifrn.edu.br)22
▪
▪ http://jigsaw.w3.org/css-validator/#validate_by_upload
▪
Edmilson Campos (edmilson.campos@ifrn.edu.br)23
▪
▪
▪
Edmilson Campos (edmilson.campos@ifrn.edu.br)24