[Página prévia] [Próxima página] [Seção página de conteúdo]

Amostras de Style Sheets

Logo abaixo você vai poder encontrar o conteúdo completo dos arquivos stylesheets.css (para IE 4.0x), stylesheets3.css (para IE 3.0x), e n_stylesheets.css (para Netscape), usados como alternativas de folha de estilo para esta seção. Estas amostras estão aqui para que você possa estudar e fazer suas próprias tentativas de desenvolvimento de style sheets.

Versão para Internet Explorer 4.0 

.blue
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 12pt;
	color: #990000;
	background: #CCFFFF;
	position: relative;
	}

.dropshadow
{
	font: Bold x-large 'Arial', 'sans-serif';
	position:relative;
	top:0;
	left:0;
	width:auto;
	height:100;
	filter:dropshadow(color=#483D8B,OffX=3,OffY=3,Positive=1)}

.dropshadow1
{		
	font: Bold x-large 'Arial', 'sans-serif';
	color: #FFFFCC;
	filter: DropShadow(Color=#669999,OffX=-3,OffY=-3,Positive=0);
	width: auto;
	height: auto;
	position: relative;
	}

.first
{		
	border-top-width: thin;
	border-left-width: thin;
	border-left-color: #66CC99;
	border-top-color: #66CC99;
	border-top-style: outset;
	border-left-style: inset;
	padding-top: 2pt;
	padding-left: 2pt;
	}

.float
{		
	width: 40%;
	text-align: left;
	float: right;
	font-size: 10pt;
	color: #006600;
	background: #FFFFFF;
	position: relative;
	padding: 4pt 4pt;
	border-width: thin;
	border-style: groove;
	}

.glow
{		
	font: Bold x-large 'Arial', 'sans-serif';
	color: #CC6699;
	filter: glow(Color=#FFFF00,Strength=5);
	width: auto;
	height: auto;
	position: relative;
	left: 0;
	top: 0;
	}

.hugeding
{		
	font: 80pt 'Wingdings', 'fantasy';
	color: #FFFF99;
	position: relative;
	}

.indent
{		
	margin-left: 1cm;
	position: relative;
	}

.large
{		
	font-family: 'Arial', 'Sans-Serif';
	font-style: italic;
	font-weight: bold;
	font-size: 16pt;
	color: #660066;
	text-align: left;
	position: relative;
	}

.noindent
{
	margin-left: 0;
	position: relative;
	}

.note
{		
	font-size: 10pt;
	color: #006600;
	background: #FFFFFF;
	position: relative;
	padding: 2pt 2pt;
	border-width: thin;
	border-style: groove;
	}

.red
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: normal;
	font-size: 8pt;
	color: #FF0000;
	text-align: center;
	position: relative;
	}

.redleft
{		
	font-family: 'Arial', 'Sans-Serif';
	font-size: 9pt;
	color: #990000;
	text-align: left;
	position: relative;
	}

.shadow
{		
	font: Bold x-large 'Verdana', 'Arial', 'Sans-Serif';
	color: #9999ff;
	filter: shadow(Color=#330066,Direction=135);
	height: 45;
	position: relative;
	left: 0;
	top: 0;
	}

.shadow3
{		
	font: Bold x-large 'sans-serif';
	color: #339999;
	position: absolute;
	left: 18pt;
	top: 35pt;
	z-index: 3;
	}

.small
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: normal;
	font-size: 8pt;
	text-align: center;
	}

A:active
{		
	color: #FF0000;
	}

B
{		
	color: #990000;
	position: relative;
	}

BLOCKQUOTE
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	position: relative;
	margin-left: 2cm;
	}

CAPTION
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 10pt;
	color: #000066;
	margin: .1in;
	position: relative;
	}

DIV
{		
	position: relative;
	}

H1
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: xx-large;
	color: #996699;
	text-align: Left;
	position: relative;
	filter: shadow(color=#660099,OffX=6,OffY=6,Positive=1) ;
	}

H2
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 18pt;
	color: #660066;
	text-align: Center;
	position: relative;
	}

H3
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 16pt;
	color: #ffff66;
	background: #996699;
	padding: 5pt. 5pt;
	position: relative;
	}

H4
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #660066;
	background: transparent;
	width: auto;
	height: auto;
	position: relative;
	left: auto;
	top: auto;
	}

H5
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 10pt;
	color: #660066;
	background: #FFFFCC;
	padding: 5pt;
	position: relative;
	}

I
{		
	color: #000099;
	position: relative;
	}

LI
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	margin: .4cm;
	position: relative;
	}

OL
{		
	position: relative;
	margin-left: 1.5cm;
	}

P
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	position: relative;
	margin-left: 1cm;
	}

PRE
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 10pt;
	color: #990000;
	text-align: left;
	margin-left: 1cm;
	position: relative;
	}

TABLE
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #006600;
	position: relative;
	}

TD
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	position: relative;
	}

TH
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 12pt;
	color: #990000;
	background: #CCCC99;
	position: relative;
	}

TR
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	position: relative;
	}

UL
{		
	position: relative;
	margin-left: 1.5cm;
	}
Versão para Internet Explorer 3.0 

.StyleSheetHiddenPlaceHolder { display: none; }

H1
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 30pt;
	color: #660066;
	}

H2
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: x-large;
	color: #660066;
	}

H3
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 12pt;
	color: #660066;
	background: #FFFFCC;
	}

H4
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #660066;
	background: #FFFFCC;
	}

H5
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 10pt;
	color: #660066;
	background: #FFFFCC;
	}

P
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	margin-left: 1cm;
	}

BLOCKQUOTE
{		
	font-family: "'Trebuchet MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	margin-left: 2cm;
	}

PRE
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 12pt;
	color: #990000;
	}

XMP
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 10pt;
	color: #990000;
	text-align: left;
	}

I
{		
	color: #000099;
	}

B
{		
	color: #990000;
	}

UL
{		
	margin-left: 1.5cm;
	}

OL
{		
	margin-left: 1.5cm;
	}

LI
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	}

TD
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	}

TH
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 12pt;
	color: #990000;
	background: #CCCC99;
	}

TH.blue
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 12pt;
	color: #990000;
	background: #CCFFFF;
	}

CAPTION
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 10pt;
	color: #000066;
	margin: .1in;
	}

A:active
{		
	color: #FF0000;
	}

.note
{		
	font-size: 10pt;
	color: #006600;
	background: #FFFFFF;
	}
.small
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 8pt;
	text-align: center;
	}

.red
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 8pt;
	color: #FF0000;
	text-align: center;
	}

.redleft
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 10pt;
	color: #990000;
	text-align: left;
	}

.indent
{ margin-left: 1cm }

.noindent
{
	margin-left: 0;
	position: relative;
	}

.large
{		
	font-family: 'Arial', 'Sans-Serif';
	font-style: italic;
	font-weight: bold;
	font-size: 16pt;
	color: #660066;
	text-align: left;
	margin-left: 1cm;
	}

.shadow
{		
	font-family: "'Trebuchet MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 30pt;
	color: #9999FF;
	text-align: left;
	margin-top: -48pt;
	margin-left: -1pt;
	}

P.hugeding
{		
	font: 80pt 'Wingdings', 'fantasy';
	color: #FFFF99;
	}

.shadow3
{		
	font-family: "'Trebuchet MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 30pt;
	color: #336666;
	text-align: left;
	margin-top: -70pt;
	margin-left: 38pt;
	}
Versão para Netscape Communicator 4.0 



	.StyleSheetHiddenPlaceHolder { display: none; }

	H1
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-style: bold;
		font-weight: bold;
		font-size: xx-large;
		color: #666666;
		text-align: left;
		position: relative;
		}

	H2
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: x-large;
		color: #660066;
		}

	H3
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: large;
		color: #660066;
		}

	H4
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: medium;
		color: #660066;
		}

	H5
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: medium;
		color: #660066;
		}

	P
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		margin-left: 1cm;
		}

	BLOCKQUOTE
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		margin-left: 2cm;
		position: relative;
		}

	PRE
	{		
		font-family: 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: 10pt;
		color: #990000;
		text-align: left;
		margin-left: 1cm;
		position: relative;
		}

	EM
	{		
		color: #000099;
		}

	STRONG
	{		
		color: #990000;
		}

	UL
	{		
		margin-left: 1.5cm;
		}

	OL
	{		
		margin-left: 1.5cm;
		}

	LI
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TABLE
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #006600;
		}

	TR
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TD
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #000066;
		}

	TH
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: large;
		color: #990000;
		background: #CCCC99;
		}

	CAPTION
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: small;
		color: #000066;
		margin: .1in;
		}

	A:link
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #0000FF;
		}

	A:visited
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #990099;
		}

	A:active
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #FF0000;
		}
	.small
	{		
		font-family: 'Trebuchet MS', 'Verdana', 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: small;
		text-align: center;
		}

	.red
	{		
		font-family: 'Trebuchet MS', 'Verdana', 'Arial', 'Sans-Serif';
		font-weight: normal;
		font-size: small;
		color: #FF0000;
		text-align: center;
		}

	.redleft
	{		
		font-family: 'Trebuchet MS', 'Verdana', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: 11pt;
		color: #990000;
		text-align: left;
		}

	.indent
	{		
		margin-left: 1cm;
		}

	.noindent
	{		
		margin-left: 0;
		position: relative;
		}

	.large
	{		
		font-family: 'Trebuchet MS', 'Arial', 'sans serif';
		font-style: bold;
		font-weight: bold;
		font-size: 18pt;
		color: #999999;
		text-align: left;
		margin-top: .4cm;
		margin-left: .02cm;
		}

	.blue
	{		
		font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		color: #990000;
		background: #CCFFFF;
		}


	.note
	{		
		font-size: small;
		color: #006600;
		background: #FFFFFF;
		border: thin #006600 ridge;
		}

	.first
	{		
		padding-top: 2pt;
		padding-left: 2pt;
		border-top-width: thin;
		border-left-width: thin;
		border-left-color: #66CC99;
		border-top-color: #66CC99;
		border-top-style: outset;
		border-left-style: inset;
		}

	.hugeding
	{		
		font: 80pt 'Wingdings', 'fantasy';
		color: #FFFF99;
		position: relative;
		}

	.shadow
	{		
		font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
		font-weight: bold;
		font-size: xx-large;
		color: #9966FF;
		text-align: left;
		}

	.shadow3
	{		
		font: Bold x-large 'Trebuchet MS', 'sans-serif';
		color: #339999;
		position: absolute;
		}
		
	#layer1
	{		
		position: relative;
		}

	#layer2
	{		
		position: absolute;
		left: -2pt;
		top: -2pt;
		}

	#layer3
	{		
		position: absolute;
		left: 40pt;
		top: 30pt;
		}

[Página prévia] [Próxima página] [Seção página de conteúdo]