Lady's CSS

{ Apresentação }

Bem vindo à página extra do tutorial comentado de CSS da kah. Aqui tentarei ensinar de uma forma simples como utilizar CSS na sua página. Caso tenha alguma dúvida ou contribuição sinta-se à vontade para enviar-me um neomail.

introdução básica

O que é CSS? A sigla CSS significa Cascading Style Sheets, em português, folhas de estilo em cascata. É um documento onde são definidos as regras de formatação ou de estilos dos elementos. Você pode mudar cores dos elementos, definir tamanho, posicionamento, etc.

Porque usá-lo / Qual sua finalidade? CSS permite que você retire da marcação HTML toda a formatação, diminuindo assim, o código. Deixa seu código mais organizado, simples e de fácil entendimento.

Como eu escrevo o código? seletor {propriedade: valor;}

Regras

Cópias não autorizadas serão contatadas diretamente a TNT.

Favor não copiar o conteúdo, nem partes do conteúdo.

Caso use o tutorial, credite.

Codificação

{ Codificando no paint }

Você pode utilizar duas ferramentas:

ferramenta de seleção ou retângulo.

Continuo:

Abra o paint, e em seguida abra o layout.
Apresentando nosso modelinho:

Selecione toda a caixinha, arrastando com o mouse, NÃO solte.

No canto direito irá aparecer à posição e o tamanho, que você selecionou. Então, antes de soltar congele a imagem (print screen, ver imagem abaixo).

Abra outra janela do paint e cole (Ctrl+V).

O código é basicamente esse, mude ou zeros. Está na ordem.

<div style="position: absolute; left: 00px; top: 00px; width: 00px; height: 00px;"> Texto aqui. ;D </div>
Left = Esquerda | Top = Topo | Width = Largura | Height = Altura

Código do exemplo:
<div style="position: absolute; left: 336px; top: 298px; width: 406px;"> Texto aqui. ;D </div>

Caixinha:

Faça como no continuo: selecione a caixinha, arrastando com o mouse, sem soltar clique em print screen (ver imagem do teclado a cima). Abra outra janela do paint e cole (Ctrl+V). No canto direito irá aparecer à posição e o tamanho, que você selecionou.

A única mudança é o overflow:auto (cria a scrollbar), o resto é igual o continuo. Novamente, mude os zeros.

Left = Esquerda | Top = Topo | Width = Largura | Height = Altura

Código do exemplo:

{ Codificando no PhotoFiltre }

Com a ferramenta de seleção, selecione a área da caixinha.
Ferramenta de seleção:

Selecione e arraste, mas NÃO solte, exemplo:

Então, antes de soltar congele a imagem (print screen).

Abra uma janela do paint e cole (Ctrl+V).

Em baixo, na barra de status, ira aparecer os dados da codificação.

Faça igual ao exemplo:

Obs.: Para fazer continuo: o código é basicamente esse, mude ou zeros.
Está na ordem.

<div style="position: absolute; left: 00px; top: 00px; width: 00px; height: 00px;"> Texto aqui. ;D </div>
Left = Esquerda | Top = Topo | Width = Largura | Height = Altura

Obs.: Para fazer de caixinha: a única alteração será o overflow:auto (cria a scrollbar), o resto é igual o continuo.Novamente, mude os zeros.

<div style="position: absolute; left: 00px; top: 00px; width: 00px; height: 00px; overflow: auto;"> Texto aqui. ;D </div>
Left = Esquerda | Top = Topo | Width = Largura | Height = Altura

{ Codificando no photoshop }

Com a ferramenta de seleção, selecione a área da caixinha.
Ferramenta Letreiro Retângulo (M):

Selecione, arraste e solte. Como no exemplo:

Com o botão direito do mouse selecione a opção 'Transformação Livre'.

Em seguida aperte F8 (Ou vá em janela e informações)

Pode ser que não esteja no formato de pixel, então:

Obs.: Para fazer continuo: o código é basicamente esse, mude ou zeros. Está na ordem.
<div style="position: absolute; left: 00px; top: 00px; width: 00px; height: 00px;"> Texto aqui. ;D </div>
Left = Esquerda | Top = Topo | Width = Largura | Height = Altura

Obs.: Para fazer de caixinha: a única alteração será o overflow:auto (cria a scrollbar), o resto é igual o continuo.
Novamente, mude os zeros.
<div style="position: absolute; left: 00px; top: 00px; width: 00px; height: 00px; overflow: auto;"> Texto aqui. ;D </div>
Left = Esquerda | Top = Topo | Width = Largura | Height = Altura

{ Multipáginas/âncora }

O que é código âncora

Código âncora pode ser definido como sendo uma página com várias ligações "escondidas" por um código, overflow hidden, no qual esconde parte do conteúdo. Ou seja, código âncora nada mais é do que um página com ligações e parte do conteúdo escondida por uma definição.

Porque usá-lo e Qual sua finalidade

Bom, primeiramente, você não é obrigado a usar e muitas pessoas até preferem o bom e velho layout continuo. O código âncora lhe permite facilidade e organização no conteúdo.

preciso ter algum conhecimento para usá-lo?

Conhecimento especifico não, você terá que saber CSS básico e saber codificar (confira os tutoriais a cima) o layout normal.

Código completo:

Altere os números de acordo com seu lay.

<h2>Header 2</h2>
<center>Texto normal, <a href="/">link</a>, underline, <b>negrito</b>, <i>itálico</i>
</center> 
Texto aqui, texto aqui, texto aqui...<br>
</div> 
 
<div id="b"> 
<a name="page1"><h1>Página I</h1></a>
Texto aqui, texto aqui, texto aqui...</div> 
 
<div id="b"> 
<a name="page2"><h1>Página II</h1></a>
Texto aqui, texto aqui, texto aqui...</div> 
 
<div id="b"> 
<a name="page3"><h1>Página III</h1></a>
Texto aqui, texto aqui, texto aqui...</div> 
 
<div id="b"> 
<a name="page4"><h1>Página IV</h1></a>
Texto aqui, texto aqui, texto aqui...</div> 
 
<div id="b"> 
<a name="page5"><h1>Página V</h1></a>
Texto aqui, texto aqui, texto aqui...</div> 
 
<div id="b"> 
<a name="page6"><h1>Página VI</h1></a> 
Texto aqui, texto aqui, texto aqui...</div> 
	
<div id="b"> 
<a name="end"><h1>Créditos</h1></a>
<center>
Codificação por <a href="/~ladymirtilla">Lady's CSS</a>;<br>
Menu e CSS por <a href="/~eleegance">Elegance</a>;</center>

fim do código, apague tudo abaixo.
<br><br><textarea rows="1" cols="1">

1º passo: layout e o background

Código básico do layout e do background.

img src="LAYOUT" style="position:absolute; top:0; left:0;
body {background: url('URL DO BACKGROUND');}

O layout deve estar entre tags e o background dentro das tags style.

2º passo: criação do CSS

Como você pode observar existem dois ID, identificador único, utilizados para a criação de menus. Neles você terá que alterar a posição e o tamanho, de acordo com a sua codificação, por isso é bom ter lido o tutorial de codificação, ajudara nas coordenadas. O terceiro serve para a navegação.

{Tutorial de codificação a cima}

3º passo: criação da navegação

Esse é o código para fazer a navegação, onde leva as ligações da página.
Na navegação você terá que codificar de acordo com o tamanho e a posição da caixa da navegação.

{Tutorial de codificação a cima}

4º passo: montando o código

Nesse fragmento há a presença de dois DIV, como deve ter percebido. O primeiro é aquele em que esconde parte do conteúdo. O segundo é a primeira ligação da página, denominada de home/página inicial (sinta-se a vontade para mudar o nome, só não esqueça de alterar em todos os locais em que ele aparece).

Coloquei as páginas 2-10 para facilitar a vida.

<div id="b"> 
<a name="page2"><h1>Página II</h1></a>
Texto aqui, texto aqui, texto aqui...</div> 
 
<div id="b"> 
<a name="page3"><h1>Página III</h1></a>
Texto aqui, texto aqui, texto aqui...</div> 
 
<div id="b"> 
<a name="page4"><h1>Página IV</h1></a>
Texto aqui, texto aqui, texto aqui...</div> 
 
<div id="b"> 
<a name="page5"><h1>Página V</h1></a>
Texto aqui, texto aqui, texto aqui...</div> 
 
<div id="b"> 
<a name="page6"><h1>Página VI</h1></a> 
Texto aqui, texto aqui, texto aqui...</div>

<div id="b"> 
<a name="page7"><h1>Página VI</h1></a> 
Texto aqui, texto aqui, texto aqui...</div>

<div id="b"> 
<a name="page8"><h1>Página VI</h1></a> 
Texto aqui, texto aqui, texto aqui...</div>
 
<div id="b"> 
<a name="page9"><h1>Página VI</h1></a> 
Texto aqui, texto aqui, texto aqui...</div>
 
<div id="b"> 
<a name="page10"><h1>Página VI</h1></a> 
Texto aqui, texto aqui, texto aqui...</div>
	
<div id="b"> 
<a name="end"><h1>Créditos</h1></a>
<center>
Codificação por <a href="/~ladymirtilla">Lady's CSS</a>;
</center>
</div>

Criação de Menus

Menus geralmente são criados por meio de class ou id, esses serão os dois tipos que estarei ensinando aqui.

Relembrando

.class é um seletor, no qual, pode ser usado várias vezes na formatação da sua página.
.pseudo:classes traduzindo seria, classes falsas. São muito usados em menus de navegação. Podem ser usados de três maneiras diferentes.
#ID é um identificador único, ou seja só pode ser usado esse id uma vez. Só será usado uma vez. Se quiser colocar em outro div, terá que fazer outro id.

{ CLASS um }

~ No primeiro exemplo, minha class se chama menu, repare que a class vem antes do seletor a.

.menu a, .menu a:link { display: block;
color:#fff;
background:#333;
font: 10 tahoma;
height: 15px;
width: 250px;
padding: 5px;
text-align: center;
text-decoration: none;
}

Um dos elementos básicos é o display, ele não pode faltar, responsável pode deixar o menu em vertical (block) ou horizontal (inline, none).

O tamanho do menu pode ser definido tanto no menu como no div do menu.

.menu a, .menu a:link {
}

{ CLASS DOIS }

~ Assim como no primeiro exemplo, minha class se chama menu. Agora, repare novamente a disposição do seletor.

a.menu, a.menu:link {}

{ ID }

~ Em breve;

Information

16/03/10 - nova parceria.
16/03/10 - novos diretórios.
12/03/10 - Inauguração.
01/03/10 - Restauração da petpage.

Link back

<a href="/~ladymirtilla"><img src="http://i.imgur.com/pFVVW.gif" border="0" title="Lady's CSS"></a>	<a href="/~ladymirtilla"><img src="http://i.imgur.com/vnBb5.gif" border="0" title="Lady's CSS"></a>
<a href="/~ladymirtilla"><img src="http://i54.tinypic.com/jzv7r8.gif" title="Lady's CSS" border="0"></a>	<a href="/~ladymirtilla"><img src="http://i931.photobucket.com/albums/ad159/_alacarte_/Ladys.gif" title="Lady's CSS" border="0"></a>
<a href="/~ladymirtilla"><img src="http://imgur.com/mrS2t.gif" border="0" title="Lady's CSS"></a>	<a href="/~ladymirtilla"><img src="http://i.imgur.com/GdNPo.gif" border="0" title="Lady's CSS"></a>
<a href="/~ladymirtilla"><img src="http://i1206.photobucket.com/albums/bb453/ceehdaikirai/haze/buttonladyy2.gif" border="0" title="Lady's CSS"></a>	<a href="/~ladymirtilla"><img src="http://i1206.photobucket.com/albums/bb453/ceehdaikirai/haze/buttonladyy.gif" border="0" title="Lady's CSS"></a>