Disciplina: Autoria Web€¦ · CSS Cascading Style Sheet » » » » 2 Edmilson Campos...
24
Disciplina: http://edmilsoncampos.net [email protected] Edmilson Campos, Prof. MsC. Regras de estilos; Folhas de estilos; Seletores; Validação. Autoria Web AULA 08
Transcript of Disciplina: Autoria Web€¦ · CSS Cascading Style Sheet » » » » 2 Edmilson Campos...
Disciplina:
http://edmilsoncampos.net
Edmilson Campos, Prof. MsC.
Regras de estilos; Folhas de estilos; Seletores; Validação.
Autoria Web
AULA 08
▪
▪»
»
»
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, utilizaremosum software gratuito chamado TopStyle, o qual se encontradisponí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
