Ex1 Css

Escola Secundria Quinta das Palmeiras | Curso EFA Tcnico/a de Multimdia - Nvel III | Mdulo: CSS
Trabalho Final
(a desenvolver durante as sesses)
O cada pgina do site deve conter: - uma imagem ou cor de fundo (background); - um cabealho/ttulo (heading); - duas seces distintas, com contedo (seja texto e/ou imagens); - uma lista no ordenada (com 3 itens) / menu.
Uma dica: manter a elegncia e simplicidade visual pgina. Mais vale simples e eficaz do que complexo e complicado. Vamos dar estilo a isto!
CSS
3.0 Exerccio 1
Devers assim aplicar (preferencialmente) um estilo interno e aplicar propriedades relativas a: - fonte (ex: font-family, font-size, font-weight, font-style); - texto (ex: text-align, text-decoration); - fundo (ex: background-color, background-image, backgroundposition, background-repeat) - cor (ex: color). Eis um simples exemplo: <html> <head> <style type="text/css"> body { background-color: #000000; }
- Formador: Ricardo Silva | 2011 - 1
h1 { font-family: arial sans-serif; color: #FFFFFF; text-decoration: none; } </style></head> <body> <p style="font-family: 'times new roman', times, serif; font-size: 20px"> este o primeiro pargrafo</p> <h1> <a href=img/logo1.png>Escola Quinta das Palmeiras </a></h1> </body> </html>
CSS
3.0 Exerccio 2
Os atributos class e id e estilos internos sobre esses elementos. Exemplo: <html><head> <style type="text/css"> p.paragrafo1 {color: #FF0000; } p.paragrafo2 { color: #00FF00; } p#paragrafo3 { color: #FFFF00; } </style></head> <body> <p class="paragrafo1"> vermelho</p> <p class="paragrafo2"> verde </p> <p id="paragrafo3"> amarelo </p> </body></html>
CSS
3.0 Exerccio 3
Configurao de estilos aos estados de ncoras no corpo do documento XHTML (estado link, visited, hover) <head> <style type="text/css"> a.p1:link { color: #ff0000; text-decoration: underline; } a.p1:visited { color: #339933; background-color: #666699; textdecoration: none; } a.p1:hover { color: #660000; background-color: #FF3399; textdecoration: none; }
/* isto um comentrio */ a.p2:link { color: #ff0000; text-decoration: underline; } a.p2:visited { color: #339933; background-color: #666699; textdecoration: none; } a.p2:hover { color: #66FF00; background-color: #FF3399; textdecoration: none; }
a.p3:link { color: #ff0000; text-decoration: underline; } a.p3:visited { color: #339933; background-color: #666699; textdecoration: none; } a.p3:hover { color: #FF3366; background-color: #FF3399; textdecoration: none; } </style> </head>
<body> <p><a class="p1" href="informatica.html" target="_blank">Informatica</a></p> <p><a class="p2" href="medicina.html" target="_blank">Medicina</a></p> <p><a class="p3" href="civil.html" target="_blank">Engenharia Civil</a></p> </body></html>
CSS
3.0 Exerccio 4
Deslocaes de elementos, atravs da utilizao da propriedade margin.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> p { margin-left: 100px; } img { margin-right: 200px; } body { background-image: url("imagens/imagem1.png"); } </style> </head> <body> <p> texto deslocado para a direita </p> <p> graas folha de estilo interna</p> <img src=imagens/imagem2.png /> </body></html>

Ex1 Css

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Ex1 Css

Caricato da

Copyright:

Formati disponibili

Escola Secundria Quinta das Palmeiras | Curso EFA Tcnico/a de Multimdia - Nvel III | Mdulo: CSS

(a desenvolver durante as sesses)

- Formador: Ricardo Silva | 2011 - 1

- Formador: Ricardo Silva | 2011 - 2

- Formador: Ricardo Silva | 2011 - 3

Deslocaes de elementos, atravs da utilizao da propriedade margin.

- Formador: Ricardo Silva | 2011 - 4

Potrebbero piacerti anche