Menu
Capítulo 6 - Exemplos de Desenhos "Stylesheet"

Exemplo 1 - Interno


Ver Resultado

Neste exemplo temos um documento HTML usando estilos, definidos pela linguagem CSS. O estilo atribuido está inserido na própria página dentro do <HEAD> do documento pelo elemento <STYLE TYPE="text/css"> e </STYLE>

DOCUMENTO HTML COM ESTILO DEFINIDO INTERNAMENTE
<HTML>
<HEAD>
<TITLE>Exemplo de página HTML usando estilos dentro do documento<TITLE>

<STYLE TYPE="text/css">
<!--

BODY {
color: #000;
background: #FFF;
margin-left: 7%;
font-family: verdana, helvetica, sans-serif;}

H1, H2 {
margin-left: -6%;
color: #900; }

A:link { color: #900 }

A:visited, A:active { color: #009 }

.hide {
display: none;
color: white; }

BLOCKQUOTE {
margin-left: 4em;
margin-right: 4em;
margin-top: 10pt;
margin-bottom: 10pt;
font-style: italic; }

ADDRESS {
text-align: right;
font-weight: bold;
font-style: italic }

#s1 {
color: #DDD;
font: 100px Impact, sans-serif; }
#p1 {
margin-top: -30px;
text-align: right; }

#s2 {
color: #000;
font: italic 40px Georgia, serif; }

#p2 {
margin-top: -80px;
margin-left: 5%; }

#s3 {
color: #080;
font: 40px Verdana, sans-serif; }

#p3 {
margin-top: 10px;
text-align: center; }

#s5 {
color: #F73;
font: bold 60px Verdana, sans-serif; }

#p5 {
margin-top: -80px;
text-align: left; }

#s6 {
color: #22A;
font: bold 25px Verdana, sans-serif; }

#p6 {
text-align: center;
margin-top: 0px; }

#s7 {
color: #088;
font: italic 20px Verdana, sans-serif; }

#p7 {
text-align: right;
margin-top: -10px; }

#s11 {
color: #990;
font: italic 20px Georgia, serif;}

-->
</STYLE>

</HEAD>

<BODY>
<P>
<H1>Web StyleSheets</H1>
<P CLASS=hide>
<P ID=p1><SPAN ID=s1>O que há de novo?</SPAN>
<P ID=p2><SPAN ID=s2>O que é stylesheets?</SPAN>
<P ID=p3><SPAN ID=s3>Documentos</SPAN>
<P ID=p5><SPAN ID=s5>CSS</SPAN>
<P ID=p6><SPAN ID=s6>>DSSSL</SPAN>
<P ID=p7><SPAN ID=s7>XSL</SPAN>

<BLOCKQUOTE>
<SPAN ID=s11> "Esperançosamente, futuras inovações Web imitarão o exemplo colocado pela Web Consortium em seus trabalhos sobre CSS"<BR> --Jakob Nielsen</SPAN>
</BLOCKQUOTE>

<H2>O que há de novo</H2>

<H2>DSSSL</H2>

<HR>

<ADDRESS>
Webmaster
</ADDRESS>

</BODY>
</HTML>

 
Forum
VOLTAR