CSS PDF

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

CSS PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS PDF

Uploaded by

Copyright:

Available Formats

Tutorial de CSS para o desenvolvimento das aulas

Declarando o css no head do HTML

Dentro dos pargrafos

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

<pre class=j ><code>

<pre class=s ><code>

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

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

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

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

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

Imagens, links e tabelas

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

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

You might also like