Regras de estilos; Folhas de estilos; Seletores; Validação.

Tamanho: px

Começar a partir da página:

Download "Regras de estilos; Folhas de estilos; Seletores; Validação."

Dina Benevides Silva
7 Há anos
Visualizações:

1 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

2 CSS Cascading Style Sheet 2

3 Regra de estilo seletor { propriedade: valor; } Declaração 3

4 4

5 <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

6 Para a construção das nossas folhas de estilo, utilizaremos um software gratuito chamado TopStyle, o qual se encontra disponível para download em 6

7 <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

8 <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

9 <head> <link rel="stylesheet" type="text/css" href= "meucss.css" media="all"> </head> <head> <style type= text/css url("meucss.css") all; <style> </head> 9

10 10

11 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 12

13 * { color: blue; } 13

14 14

15 h1, h2, h3 { color:green; } 15

16 h1 strong {...regra aplicada aos elementos STRONG dentro dos elementos H1... } p strong {...regra aplicada aos elementos STRONG dentro dos elementos P... } 16

17 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.

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> 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.

19 <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

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> 20

21 .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

22 #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

23 23

24 24

Documentos relacionados

Cascading Style Sheets

Cascading Style Sheets Telemédia Grupo de Comunicações por Computador Sumário O que são CSSs? Sintaxe das CSSs Associar CSSs a documentos HTML Estrutura hierárquica dos documentos HTML e herança de propriedades