Tutorial básico para css
Olá pessoal, vou disponibilizar para vocês duas bases de css, e ensina-los como editar.
Programas requeridos: Bloco de notas
Importante você perceber que cada area diferente, recebe uma separação simbolica. /*------------Css---------*/, isto ajuda você deixar o css mais organizado, mais o principal é o que vem em seguida. Isso define onde os estilos de css serão aplicados. Por exemplo:
O .titulo { Indica que será aplicado aos títulos da página. No caso do flogvip, será aplicado ao título escrito do fv. (não use acentos no css)
O .subtitulo { Indica que será aplicado aos subtítlos. No caso do flogvip é onde fica escrito Favoritos; Ultimas fotos e etc.
Muita atenção para um detalhe minimo que é impotantissimo. Certifique-se de que quando você começar uma parte, abra as chaves { e quando terminar , feche-as (}) Se você não fizer isso acontece-rá varios erros e o seu código ficará ilegível. Também ao final de cada estilo, separe-o com ponto e virgula. Segue o exemplo abaixo:
font: 0px Arial;
letter-spacing: 0px;
text-transform: none;
background: #edeed4;
width: 120px; }
Explorando as opções do css.
Font-family ou Font: fonte que você desejar;
(importante que essa fonte não seja fonte personalizada, apenas fontes do sistema operacional. Caso você coloque uma fonte personalizada, essa fonte só será visualizada em computadores que tenham a mesma fonte instalada, caso contrario será a fonte padrão do sistema)
Font-size: Tamanho da fonte em px; (pixels)
Font-style: é o estilo da fonte. Aqui você pode por italic, normal ou bold. Geralmente só funciona uma das opções;
Dica, pode-se resumir colocando assim:
text-transform: uppercase/lowercase; Essa propriedade define a transformação do seu texto. Uppercase transforma qual quer escrita em CAPSLOCK, e lowercase permite que mesmo que você escreva em CAPSLOCK o texto apareça em fonte normal.
Margin-top/bottom/right/left: é apartir de onde começará ser escrito na caixa que você está editando. Valores em px. Lembre-se, quando for usar esse codigo, use cada um em uma linha. exemplo
width: 19px ou 30%; Define largura da area que você está editando
heigth: 10px ou 40%; Define altura da area que você está editando. Se quiser que se ajuste automatico é só não colocar essa opção no seu css. (valores de exemplo)
border-top/bottom/right/left #000000: Cria uma borda visível na parte qual você inserir este código. Podemos inseri-las como sólido, como uma linha continua ou como um traçado. Exemplo:
border-bottom: 0px dotted #00000; (borda traçada, (falhada) na parte de baixo. Bottom > baixo)
Align: Alinhamento de caixas. Não funciona no flogvip, apenas em layouts pessoais
padding: 1px; Não sei bem ao certo como o flogvip lê, mais é um espaçamento entre linhas de escrita.
Text-align: center/justify/left; Alinhamento do texto dentro das caixas. Se você tiver criando uma 'table' para o post e inserir no seu css o texto ficará ajustado conforme vc colocar.
letter-spacing 3px; é o espaçamento entre as letras da area que você está editando.
Color: #000000; é a cor da fonte do lugar de onde você está editando. Esse código se obtem com programas de edição, todos programas da adobe oferece esse código de cores na caixa de cores.
background-color: #ffffff; é a cor do fundo do lugar de onde você está editando, Pode-se deixa-lo transparente inserindo transparent ou none, exemplo.
background-color: transparent;
-webkit-transition-duration: 10s; é a transformação de um link ou imagem quando você parar ou passar o mouse em cima. Segundos definem o tempo de transição de efeito até a foto normal.
-moz-tranzition-duration: 10s; bé a transformação de um link ou imagem quando você tira o mouse em cima. Ambos valores em segundos (10s/5s)
-webkit-filter: grayscale (50%); é o efeito que deixa as fotos das colunas do lado (flogvip) em escala de cinza. Ou seja, de você colocar 100% elas ficarão preto e branco, e quando passar o mouse, ficará colorida.
-moz-border-radius: 0px 0px 0px 0px; Isso serve para arredondar as quinas da area de onde vc está ditando, primeiro e segundo valor se refere as duas quinas de cima, e os dois ultimos as duas quinas de baixo
input,textarea, select { = Se dirige a caixas de texto que ficam disponível para que o visitante escreva. No caso do flogvip Caixa de comentários
.blockquote / .tab = são definições de post. Depende de como vc usar eles. Geralmente usamos blockquote para fundo de post, e definições de escrita. e tables para criar areas diferentes no post.
b = se refere a pré definição de post quando se usa como negrito
u = se refere a pré definição de post quando se usa em sublinhado
i = se refere a pré definição de post quando se usa italico
Sabendo isso você pode transformar qual quer css do jeito que você quiser, inserir ou retirar códigos. Abaixo disponibilizo duas css. Uma com a barra do fv em cima, e a outra em baixo. Lembre-se não remova o código na area de barra. Apenas altere os valores. O css que tem a barra do fv em baixo do título, nescesita-se que você hospede seu título e o coloque no css na area indicada. Por favor, os devidos créditos
Obs.:Crie um flogvip de testes, poste uma foto e coloque seu css. O 6te permite que você edite o css em um campo de texto no próprio site. V� salvando as alterações e toda vez que você salvar, atualize o flog. Assim você poderá ver onde você está editando e como está saindo.
