Tutorial personalizando css
Home » Extras » Tutorial personalizando css

Fazer css não é difícil, só é preciso paciência, então vamos lá!

Esse é o código base, mas como estava havendo erros, recomendo que ao invéz de você copiar o código, você baixá-lo aqui!

 /* --------------- Fonte ---------------- */

p, a, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: 11px;
color: #66b0cd;
font-family: verdana;
line-height: 13px;
cursor: crosshair;}

/* ----------------- Link -------------- */

a, a:link{
color: #66b0cd;
height:0px;
border-bottom: none;
cursor: help;
TEXT-DECORATION: none;}

a:hover {
color: #ff9999;
border-bottom: 1px dashed #66b0cd;
cursor: help;
TEXT-DECORATION: none;
background-color: none;}

/* ----------------- Estilos ---------------- */

b { cursor: help; color: #66b0cd; TEXT-DECORATION: bold;}
u { cursor: crosshair; color: #ff9999; TEXT-DECORATION: underline; border-bottom:
1px dashed #66b0cd;}
i { cursor: crosshair; color: #ff9999; TEXT-DECORATION: italic;
border-bottom: none;}
ul {line-height: 100%; color: #809CAD; font-color: #a89761; margin: 0 18;}

/* ------------------------------- Caixas ----------------------------------*/

input, textarea {
color: #ff9999;
font-family: tahoma;
font-size: 11 px;
border: 1px dashed #66b0cd;
background-color: #FFFFFF;}

/* ------------------------------- Table ----------------------------------*/

.table {
color: #ff9999;
background-color: #fff4f4;
border-top: 1px dotted #ff9999;
border-bottom: 3px double #ff9999;
text-align: right;}

Agora é só editar:

Fonte: É a sua fonte,
font-size: 11px;
é o tamanho da fonte, geralmente varia de 9px à 12px.
color: #66b0cd;
é a cor da sua fonte. font-family: verdana; é o nome
da fonte, as mais usadas são verdana, tahoma, arial.
cursor: crosshair;
é o cursor que vai ficar no seu blog, não só em cima da
fonte, nas suas páginas todas. Abaixo você encontra o nome dos cursores do
sistema, é só passar o mouse em cima do nome:

cursor: hand;
cursor: crosshair;
cursor: text;
cursor: wait;
cursor: help;
cursor: move;
cursor: e-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: n-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: w-resize;
cursor: progress;
cursor: all-scroll;
cursor: col-resize;
cursor: not-allowed;
cursor: row-resize;
cursor: url(mycursor.cur);
*Cursor personalizado*

Já vimos sobre a fonte, cursor, agora veremos sobre os Links!

Link: É a configuração do seu link. 'a, a:link{' é a 'face' do seu link, sem estar com o mouse por cima. color: #66b0cd; é a cor do seu link, por exemplo, isso é um link, se você não colocar o mouse por cima, apenas vê-lo, ele está rosa certo? Isso que é o 'a, a:link{'! border-bottom: none; é uma linha que fica por baixo do link, se estiver sem em none; é porque está sem linha nenhuma, como o meu link, perceba que ele está sem linha nenhuma. Veja alguns exemplos:

Esse está com a configuração de border-bottom: 1px solid #000000; O 1px significa a grossura da linha, veja um link com, por exemplo, 2px:
Esse está com a configuração de border-bottom: 2px solid #000000; E o #000000 é a cor da linha! Se quiser esse código para pôr no seu css, está aqui: border-bottom: 1px solid #000000; Agora que você já sabe mudar a cor e agrossura da linhas, veja outros modelos:

Esse está com a configuração de border-bottom: 1px dashed #000000;

Esse está com a configuração de border-bottom: 1px dotted #000000;

Esse está com a configuração de border-bottom: 3px double #000000; Atenção: Bordas Double tem que estar configurada em 3px para ela aparecer corretamente!

Ok. Agora e o cursor: help;? Já sabe o que é né? É o cursor quando você passa sobre o mouse. Recomendo que coloque o mesmo cursor tanto no a, a:link{ quanto no a:hover {. Mas você não sabe o que é a:hover {? Então vamos lá! ^^ a:hover { é quando o mouse passa por ele, por exemplo, isso é um link, passe o mouse sobre ele, ele não mudou de cor? Então, isso que é o a:hover {! Agora as configurações dele é igual ao do
a, a:link{, o 'color', 'border-bottom', 'cursor'…

Atenção:

Lembrando que não é só border-bottom que tem não! Também tem border-top (borda em cima, ao invés de ser em baixo do link), border-left (que é a borda do lado esquerdo) e border-right, que é a borda do lado direito!

Estilos: É o famoso Negrito, Sublinhado, e Itálico. No b{, onde está escrito: TEXT-DECORATION: bold;, é que o seu negrito ficará em negrito! Mas como assim? Por exemplo, se você colocar TEXT-DECORATION: none;, o seu negrito não ficará gordinho, apenas da cor que você escolheu! Entendeu? :D No Itálico a mesma coisa, se tiver: TEXT-DECORATION: italic; o seu itálico ficará 'caidinho', e seu Underline, se tiver TEXT-DECORATION: underline; ele ficará com a linhazinha em baixo! ul{ O que é isso? o.o ' é tipo um parágrafo, não liguem para isso não, é raro usar isso! Eu nunca usei, ou seja, pode deixar como está! ^^

Caixas: Se você usa flog, é a famosa 'caixinha de comentários', se você usa blog, são caixinhas parecidas com o de comentário, muito usado para formulários ou ask-me, e se você usa wordpress, também é a caixa de comentários. Ainda não descobriu o que é?

Isso aí em cima! ^^ E também as pequenas caixinhas de 'enviar', etc! Essa:

No css onde está border: 1px dashed #66b0cd; é a borda que ficará na sua caixinha, ex:

Nessa eu coloquei border: 1px solid #000000. mas você aprendeu outros tipos de linha ali em cima certo? :D

Table: Table são "divisórias", é como se fossem pequenos títulos dentro de um post, por exemplo:


Isso é uma table!


color: #ff9999; é a cor da fonte que fica dentro da table, background-color: #fff4f4; é o fundo da table, perceba que essa aí em cima tem um fundo rosa clarinho! border-top: 1px dotted #ff9999; e border-bottom: 3px double #ff9999; são as 'linhas' de cima, e de baixo. E finalmente text-align: right; é o alinhamento do texto de dentro da table. Lembre-se: center: centro, right: direita e left: esquerda!

Disso você não pode esquecer:

Observe esse código:

/* ———— Fonte ————– */

p, a, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: 11px;
color: #66b0cd;
font-family: verdana;
line-height: 13px;
cursor: crosshair;}

Perceba que no final de cada 'coisa' tem o ;, por exemplo: font-size: 11px; Caso você retire, a 'parte' não irá funcionar, por exemplo, se você tirar o ; do cursor: crosshair;, o cursor não irá funcionar! E isso não serve só para as configurações da fonte não, são para todo o css!

Outra coisa:

Observe esse código:

/* ———— Fonte ————– */

p, a, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size: 11px;
color: #66b0cd;
font-family: verdana;
line-height: 13px;
cursor: crosshair;}

Viu os { e }? Todas as 'partes' do css tem que começar com { e terminar com }.

Não entendeu direito a parte dos ; e nem dos { }? Simples, só você não ficar futucando muito o seu css, mude o necessário ^^

Após terminar de editar o css, salve como style.css, o nome não importa, apenas lembre-se de colocar .css no final do nome.
Agora que você salvou, hospede seu css, se não sabe onde nem como, aqui explica!
Copie esse código abaixo, e cole no post do seu flogvip, ou em baixo da tag

<head>

(no caso de blog).

<link media="screen" href="LINK DO SEU CSS AQUI" type="text/css" rel="stylesheet">

Pegue o link do seu css e coloque onde indica no código acima!

Pronto, o seu flog, ou a página do seu blog já está com css!

Mas é claro, se você tiver dúvidas sobre esse tutorial, pode perguntar pelo ask-me!

Tutorial totalmente produzido por Biiah

http://cherryluv.com

Não copie.

Get Adobe Flash playerPlugin by wpburn.com wordpress themes