BLOG DE TESTE : Tutorial de como fazer css para flogvip

Fazer css não é difícil, só é preciso paciência, então vamos lá!
Esse é o código base, vc vai copia-lo ok?
/* COPIA IDIOTA */
/* TUDO POR YEAHNICK */

input, textarea {
color:#CC99FF;
font-family:Tahoma;
font-size:12px;
border:1px solid #33CCCC;
background:#020202
}
html {
scrollbar-3dlight-color:#ECE9D8;
scrollbar-arrow-color:#020202;
scrollbar-base-color:#ECE9D8;
scrollbar-darkshadow-color;#020202 ;
scrollbar-face-color:#ECE9D8;
scrollbar-highlight-color:#ECE9D8;
scrollbar-shadow-color:#99CC00; }
#999933, OffX=1, OffY=1, positive=2), chroma (color=#FFFFFF);}
.HeadImage {padding-top:10px}
</style>
<html>
<head>
/* Formatação de Fontes */
p, a, body, td, tr, div {
font-style: normal;
font-weight: normal;
font-size:11px;
color:#296A7D;
font-family:verdana;
cursor:crosshair;
        text-align:center;

}
/* Formatação dos Links */
a, a:link{
color:#296A7D;
cursor:help;
TEXT-DECORATION:dotted;
}
a:hover {
color:#FFFFFF;
cursor:help;
TEXT-DECORATION:dotted;
text-align:center;
}
/* Blockquote */
blockquote{
background-color:#296A7D;
-moz-border-radius:8px 8px 8px 8px;
border-left:5px dotted none;
border-right:5px dotted none;
padding:5px 5px 5px 5px;
margin:3px 3px 3px 3px;
color:#FFFFFF;
text-align:center;
}
/* Estillos */
b { cursor:crosshair; color:#296A7D; TEXT-DECORATION:center;
}
s { cursor:crosshair; color:#296A7D; TEXT-DECORATION:center;border-bottom:2px dotted #FFFFFF;
}
u { cursor:crosshair; color:#ffffff ; TEXT-DECORATION:center;
}
i { cursor:crosshair; color:#296A7D; TEXT-DECORATION:center;
}
text-align:center;
}
/* Caixa de Comentários */
input, textarea, select
{font-family: verdana;
font-size:11px;
color:#296A7D;
border-top: 1px SOLID #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
        background-color:#BDE9F6;
        -moz-border-radius:8px 8px 8px 8px;
        text-align:center;
        }

/* Opacidade */
.opacidade
{filter:alpha(opacity=80);
-moz-opacity:0.70;
opacity:0.60;}
.opacidade:hover
{filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.9;}
a img {
filter: alpha(opacity=100);
-moz-opacity: 0.7;}
a:hover img {
filter: alpha(opacity=40);
-moz-opacity: 2.0;}
/* Formatação das Tables/Post */
.table {
font:tahoma;
text-align:center;
color:#FFFFFF;
        border-bottom:5px solid #296A7D
        background-color:#296A7D;
-moz-border-radius:3px 3px 3px 3px;

}
.fundopost {
color:#296A7D;
background-color:#534472;
        border-top:2px:#;
border-left:2px solid ;
border-right:2px solid:;
border-bottom:2px dotted ;
        padding:1px 1px 1px 1px;
text-align:center;
}
text-align:center;

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:

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,
Copie esse código abaixo, e cole no post do seu flogvip, ou em baixo da tag

<head>

(no caso de blog).

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!

05 abril 2014

Tutorial de como fazer css para flogvip

Nenhum comentário:

Postar um comentário