You are on page 1of 18

Tutorial de CSS para o desenvolvimento das aulas

Michael Marques

Corpo do Documento

Declarando o css no head do HTML


Apenas insira o cdigo abaixo no head:
<style type="text/css" media="screen"> @import url("style.css"); </style>

<body>
As configuraes do body so declaradas no CSS
body bac!"round#color$ %e&eae&; color$ %'d(('b; mar"in$ ')px; *ont#*amily$ +erdana, -ene.a, /rial, sans#seri*; *ont#si0e$ small; line#hei"ht$ 1&)2; 3

Ttulos

<h1>
T!tulo principal

Exemplo:
<h1>4ntrodu56o 7 89"ica</h1>

%content h1 bac!"round$%bac:d; url(<barra.=p"<) no#repeat center top; bac!"round#color$%d>dde>; color$%))); *ont$ bold ?>px/1.& /rial, @el.etica, sans#seri*; text#ali"n$center; mar"in#bottom$1.'em; 3

<h2>
T!tulo secund"rio

Exemplo:
<h?>A que B l9"icaC</h?>
%content h? bac!"round$%bac:d; url(<b"#h?.=p"<) no#repeat le*t top; hei"ht$?.>em; border$1px solid %ccc; color$%;;;; *ont$ 1&px/1.(, +erdana, /rial, @el.etica, sans#seri*; line#hei"ht$?.>; mar"in$1.)em ); paddin"#le*t$1'px; 3

<h3>
T!tulo al#m do secund"rio

Exemplo:
<h;>;.1.; Dstrutura *inal de um pro"rama</h;>
%content h; bac!"round#color$%d>dde>; hei"ht$1.(em; border$)px solid %ccc; color$%;;;; *ont#si0e$1>px; line#hei"ht$1.>; paddin"#le*t$1'px; Eidth$ ')2; 3

<h5>
$tili%ado para o t!tulo &'xerc!cios(

Exemplo:
<h'>DxercFcios</h'>
%content h' bac!"round#color$%aeb?b&; hei"ht$1.(em; border$)px solid %ccc; color$%;;;; *ont#si0e$1>px; line#hei"ht$1.>; paddin"#le*t$1'px; Eidth$ >)2; 3

Dentro dos pargrafos

<p>
)ar"grafo de texto

Exemplo:
<p>Godo al"oritmo apresenta uma estrutura bHsica para *uncionar. Dle precisa ser...</p>
p

mar"in$1.)em ); *ont#si0e$1>px; line#hei"ht$1.>; text#ali"n$=usti*y; text#indent$ ;em;

<em>
*eixa o texto em it"lico )ode ser utili%ado em +ual+uer tag substituto do -i. do /T012 +ue no # mais usado , -em. #

Exemplo:
<em>Dsse texto *ica em itHlico.</em>

<strong>
*eixa o texto em negrito )ode ser utili%ado em +ual+uer tag , -strong. # substituto do -b. do /T012 +ue no # mais usado

Exemplo:
<em>Dsse texto *ica em ne"rito.</em>

<abbr>
Cria uma tooltip2 isto #2 uma palavra sublinhada com texto explicativo

Exemplo:
<abbr title="+ariH.eis s6o bla bla bla">.ariH.eis</abbr>.
abbrItitleJ, acronymItitleJ border#bottom$1px dashed %);K; cursor$help; 3 abbr spea!$spell#out; border$none; 3 acronym spea!$normal; border$none; 3

Cdigos

<pre><code>
Cdigo e texto puro

Exemplo:
<pre><code> Lro"rama M%()NomeOoLro"ramaM%(? </pre></code>

<pre class=j ><code>


Cdigo 3ava

Exemplo:
<pre class=P=P><code> public static .oid main(Qtrin" ar"s) 3 </pre></code>

<pre class=s ><code>


Sa!da do programa2 isto #2 +uando +ueremos representar as mensagens produ%idas pelo programa

Exemplo:
<pre class=PsP><code> A nome dele B Ro6o. </pre></code>

!"" #t$l$%ado no &et'eans


)ara formatar os cdigos 3ava exatamente com a formatao do 4et5eans2 deve6se seguir o seguinte procedimento:

7a%er o cdigo no 4et5eans 8r em &Ar+uivos( 6. &8mprimir em /T01 (

Abrir a p"gina gerada e visuali%ar o seu cdigo /T01

Copiar entre as tags -pre class9&:(.-code. a parte +ue representa o programa

pre code color$%);K; 3 code, color$%*(); *ont$ 1.1em, "Sourier NeE", courier, monospace; 3 pre display$bloc!; Eidth$K(2; o.er*loE$auto; Ehite#space$pre; bac!"round#color$%e**?*'; *ont$ 11px,"Sourier NeE", courier, monospace; line#hei"ht$1.>em; mar"in$?.)em ); paddin"$12; border$1px solid %ccc; paddin"#top$ )px;

3 pre.s display$bloc!; Eidth$K(2; o.er*loE$auto; Ehite#space$pre; bac!"round#color$%****ee; *ont$ 1.1em, "Sourier NeE", courier, monospace; line#hei"ht$1.?em; mar"in$?.)em ); paddin"$12; border$1px solid %ccc; paddin"#top$ )px;

3 pre.= display$bloc!; Eidth$K(2; o.er*loE$auto; Ehite#space$pre; bac!"round#color$%******; bac!"round$%****** url(<=a.a.=p"<) no#repeat center center; *ont$ 1.1em, "Sourier NeE", courier, monospace; line#hei"ht$1.?em; mar"in$?.)em ); paddin"$12; border$1px solid %ccc; paddin"#top$ )px;

/T Lara o c9di"o NetUeans T/ .=a.a#numeric#literals color$ %:&))))3

.=a.a#!eyEords color$ %))))KK; *ont#*amily$ Monospaced; *ont#Eei"ht$ bold3 .=a.a#layer#method *ont#*amily$ Monospaced; *ont#Eei"ht$ bold3 .=a.a#strin"#literal color$ %KK))(b3 .=a.a#bloc!#comment color$ %;*:*'*3

DIV's

<d$( class=)e*)>
Apenas deixa o texto em it"lico

Exemplo:
<di. class="ex">Dxemplo$</di.>
.ex

*ont#style$ italic; mar"in$1.)em ); *ont#si0e$1.1em; line#hei"ht$1.); text#ali"n$=usti*y;

<d$( class=)nota)>
4ota de ateno ao aluno;

Exemplo:
<di. class="nota"> Vuando estudarmos o conceito de modulari0a56o, *icarH mais *Hcil compreender a importWncia e utili0a56o das .ariH.eis locais e "lobais. </di.>

<d$( class=)ja(a)>
4ota de ateno para uma particularidade do 3ava

Exemplo:
<di. class="=a.a"> A comando this B mais utili0ando quando... </di.>

<d$( class=)desa+$o)>
$tili%amos +uando +ueremos +ue o aluno faa determinado desafio

Exemplo:
<di. class="desa*io"> Xa5a o mesmo al"oritmo, modi*icando... </di.>

<d$( class=)d$ca)>
<epresenta uma dica

Exemplo:
<di. class="dica"> Dsse c9di"o tambBm pode ser representado... </di.>

<d$( class=)l$(ro)>
)ara referenciar o material estudado com o livro6texto

Exemplo:
<di. class="li.ro"> Lara apro*undar seu conhecimento, consulte o li.ro texto (Lu"a, ?));) no capFtulo ', pH"ina '>. </di.>

<d$( class=)erro)>
)ara alertar de um erro comum de programao

Exemplo:
<di. class="li.ro"> Lara apro*undar seu conhecimento, consulte o li.ro texto (Lu"a, ?));) no capFtulo ', pH"ina '>. </di.>

A maioria dos div=s so iguais2 trocando apenas a imagem


.nota

display$bloc!; Eidth$K(2; Ehite#space$normal; bac!"round$%e&eae& url(<nota.pn"<) no#repeat le*t top; *ont$ 1>px "/rial", monospace; *ont#*amily$ /rial, sans#seri*; line#hei"ht$1.1em; mar"in$?.)em ); mar"in#le*t$ 1)px; paddin"$12; paddin"#top$ 1'px; paddin"#le*t$ ()px; *ont#style$ italic; 3

Imagens, links e tabelas

<$mg>
As imagens so geralmente declaradas como class9center2 o +ue deixa6as centrali%adas

Exemplo:
<im" src="*ila.pn"" alt="Yeprenta56o de uma *ila" class="center" />
im".center mar"in#le*t$ auto; mar"in#ri"ht$ auto; display$ bloc!; 3

<a>
1in>s devem ser da class9(lin>s(

Exemplo:
<a class="lin!s" tar"et="Zblan!" hre*="http$//EEE.uol.com.br">http$//EEE.uol.com.br</a>
a.lin!s$lin! color$ %(a'e:e; 3 a.lin!s$.isited color$ %&)((b); 3

Tabelas
Tabelas devem ficar dentro das div=s center2 pois devem ficar centrali%adas , melhor # desenvolver as tabelas usando o 4?$2 para depois inserir o cdigo gerado no /T01 da aula

Exemplo:
<di. class="center"> <table></table>

</di.>
<di. class="center"> table tr td paddin"$1px &px; 3

1istas

<ul><li>
1ista de elementos simples

Exemplo:
<ul class="circle"> <li>Qe / *or .erdadeiro e U *or .erdadeiro, ent6o a conclus6o B .erdadeira.</li> <li>Qe / *or .erdadeiro e U *or *also, a conclus6o B *alsa pois a express6o [eP desi"na que todos os elementos s6o uni*ormes.</li> </ul>

Outras listas
Ainda # poss!vel implementar listas com circulos2 +uadrados2 imagens2 listas numeradas2 etc

Exemplo:
<ul class="circle"> <li></li> </ul> <ul class="square"> <li></li> </ul> <ul class="ima"e"> <li></li> </ul>
ul *ont#si0e$ 1>px; *ont#*amily$ +erdana, -ene.a, /rial, sans#seri*; 3 ul.circle list#style#type$ circle; 3 ul.square list#style#type$ square; 3

ul.ima"e list#style#ima"e$ url(lin!."i*); 3

Caracteres 'speciais
As ve%es # preciso declarar utili%ar alguns caracteres especiais +ue no podem ser reconhecidos diretamente pelo bro@ser A tabela de caracteres # facilmente encontrada na 8nternet

<
A representado pelo cdigo M%()

>
A representado pelo cdigo M%(?

Exemplo:
sEitch (M%().ariH.elM%(?)

Tutoriais CSS
,s melhores tutoriais sobre CSS so encontrados em:

http: !!!"mau#or"com http: !!!"pt$br"html"net tutorials css