Beruflich Dokumente
Kultur Dokumente
Michael Marques
Corpo do Documento
<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
<p>
)ar"grafo de texto
Exemplo:
<p>Godo al"oritmo apresenta uma estrutura bHsica para *uncionar. Dle precisa ser...</p>
p
<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>
Exemplo:
<pre class=P=P><code> public static .oid main(Qtrin" ar"s) 3 </pre></code>
Exemplo:
<pre class=PsP><code> A nome dele B Ro6o. </pre></code>
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;
.=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
<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.>
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
<$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
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: