Capítulo 6 - Exemplos de Desenhos " Stylesheet "
Exemplo 3 - Externo
Exemplo do documento HTML ilustrando o uso de CSS no formato da primeira página deste curso.
INSTRUÇÕES DE ESTILO : curso.css
/* Modelo da página de apresentação dos cursos */
A:link{
color: blue;
text-decoration:none;
font-family: "EngraversGothic BT ", Arial, sans-serif;
font-size:11pt;
padding-left:0.1em;
padding-right:0.1em;}
A:visited {color:red; text-decoration:none;}
H1,H2,H3,H4 {font-family: "Garamond ", "Time New Roman ";}
DIV.head{
background:rgb(255,204,0);
margin:30pt auto auto auto;
width:480px;
color:black;
text-align:center;
padding:0;
border:solid darkblue;}
DIV.head H1{
text-align:center;
font-size:32pt;
color:darkblue;
font-weight:normal;
text-transform:uppercase;
padding:0;
margin-bottom:-15em;}
DIV.head H2.logotipo{
text-align:center;
font-size:14pt;
color:red;
letter-spacing:12pt;
text-transform:uppercase;
font-style:italic;
padding:0;
margin-bottom:0;}
DIV.head H3{
text-align:center;
font-size:18pt;
color:black;
font-weight:bold;
text-transform:none;
padding:0;
margin-bottom:0;}
DIV.head H4.edition{
text-align:center;
font-size:12pt;
text-transform:none;
padding:0;
margin-bottom:0;
margin-top:2%;}
DOCUMENTO HTML
<HTML>
<HEAD>
<TITLE>Cursos de Estilos CSS</TITLE>
<LINK REL= "stylesheet " TYPE= "text/css " HREF= "../cursos.css ">
</HEAD>
<BODY BGCOLOR= "#FFFFFF " BACKGROUND= "../imagens/back.gif ">
<DIV CLASS= "head ">
<TABLE BORDER=0 WIDTH=100%>
<TR>
<TD BGCOLOR= "lightyellow " VALIGN= "top ">
<CENTER><A HREF= "http://64.111.15.93/dicas ">
w w w . s e u s i t e . c o m</A></CENTER>
</TD>
</TR>
</TABLE>
<H2 ALIGN= "CENTER " CLASS= "logotipo ">curso de Estilos CSS</H2>
<H1 ALIGN= "CENTER ">Título do Curso</H1>
<table border=0 width=100%>
<tr>
<td bgcolor= "lightyellow " valign= "top ">
<H3 ALIGN= "CENTER ">Nome do Autor</H3>
<center><A HREF= "mailto:e-mail do autor ">e-mail do autor</a> </center>
</td>
</tr>
<tr>
<td>
<H4 ALIGN= "CENTER " CLASS= "edition "> Uma breve descrição sobre o que abordará o curso </H4>
<HR SIZE=3 NOSHADE WIDTH= "30% ">
</td>
</tr>
</table>
<TABLE ALIGN= "center "><TR ALIGN= "center ">
<TD><IMG SRC= "../imagens/bullet1.gif "></TD>
<TD><A HREF= "descricao.html ">Vínculo1</A> </TD>
<TD><IMG SRC= "../imagens/bullet1.gif "></TD>
<TD><A HREF= "indice.html ">Vínculo2</A> </TD>
<TD><IMG SRC= "../imagens/bullet1.gif "></TD>
<TD><A HREF= "biblio.html ">Vínculo3</A> </TD>
<TD><IMG SRC= "../imagens/bullet1.gif "></TD>
<TD><A HREF= "sugestao.html ">Vínculo4</A> </TD>
<TD><IMG SRC= "../imagens/bullet1.gif "></TD>
</TR></TABLE>
</DIV>
</BODY>
</HTML>
