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 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?
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?
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:
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:
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!
http://cherryluv.com
Não copie.

Tem 14 anos e mora em Vila Velha - Espírito Santo. Sincera, gentil, feliz, tímida, divertida, preguiçosa, às vezes faz muita palhaçada na hora errada e inteligente. Ama design, HTML, photoshop, já até pensou em cursar isso, mas o que a impressiona é medicina, mais precisamente cirurgias. Seu coração primeiramente é de Deus, depois sua família, amigos, seus bichinhos de estimação (4 passarinhos, 2 coelhos e 1 cachorro), ama estudar, na verdade não ama estudar, apenas vai amar passar na faculdade, por isso "ama" estudar.


8 comentários

0 visitante (s) online
54 hits e 11 visitas do dia
Visitas Totais