Tag Archives: reference

CSS Reference #3

Terceira referência de CSS agora mostrando a propriedade Font.

FONT

font-style: define o estilo da font.

nomal: não muda nada, a font fica na vertical.

italic: deixa a font em itálico, inclinada.

oblic: converte a font oblíqua.

font-variant: mostra o texto com todas as letras em maiúsculo mas mantendo o tamanho diferente entre maiúsculas e minúsculas.

normal: não altera a font.

small-caps: transforma em maiúscula de menor altura.

font-weight: define o quanto a font é mais pesada, mais escura.

normal: não altera.

bold: negrito.

bolder: um pouco mais escuro que bold.

lighter: um pouco mais claro que bold.

Ou pode setar uma centena para definir o valor: 100, 200, 300, 400, 500, 600, 700, 800, 900.

font-size : tamanho da font, altura. Pode tanto definir um valor numa medida aceita pelo CSS (px, em, pt, cm…), porcentagem, ou um tamanho pré-definido abaixo, do menor para o maior:

xx-small, x-small, smaller, small, medium, large, larger, x-large, xx-large,

font-family: o tipo da font (o nome), podendo definir uma lista de maior prioridade dos tipo mais à esquerda separando por vírgula. Caso o usuário não tenha determinada font passa à próxima, assim sucessivamente. Para nomes complexo adicionar aspas dupla.

ex: Verdana, Arial, Tahoma, “Comic Sans MS”, Sans-Serif;

color: aplica uma cor desejada à font (Hexadecimal, RGB ou nome em inglês).

ex: #FF0000;

ex: red;

ex: rgb(255, 0, 0);

font: jeito simplificado de escrever tudo. Ficando nessa seguinte ordem os valores: [style] [variant] [weight] [size] [line-height] [family].

Sendo os valores size e family obrigatórios os demais assumem o valor padrão.

ex: font: italic small-caps bold 12px Arial, Tahoma, Sans-Serif;

ex: font: 12px Arial, Tahoma, Sans-Serif;

mais sobre:

Maujor – A Propriedade Font

W3Schools – CSS Reference

Anúncios

CSS Reference #2

Começando a segunda referência de CSS, vamos ver sobre: Margin & Padding.

Primeiramente uma breve descrição sobre cada. O margin como próprio nome já diz é o espaçamento da margem do elemento, da borda pra fora. Já o padding é o espaçamento da borda pra dentro do elemento. Ambas propriedades tem a sintaxe bem semelhante.

Margin

margin: seta o valor da margem para todos os lados. Podendo definir um a um, ou só um valor para todos, ou um valor para os lado e outro para cima e para baixo. Ficando a seqüência assim: top right left bottom.
ex: margin: 15px 0px 20px 5px; (ficando: 15px (cima) 0px (direita) 20px (baixo) 5px (esquerda).

margin-top: define só a margem do topo. (ex: 15px;);

margin-right: define só a margem do topo. (ex: 0px;);

margin-bottom: define só a margem do topo. (ex: 20px;);

margin-left: define só a margem do topo. (ex: 5px;);

Padding

padding: seta o valor do espaçamento para todos os lados. Podendo definir um a um, ou só um valor para todos, ou um valor para os lado e outro para cima e para baixo. Ficando a seqüência assim: top right left bottom.
ex: padding: 15px 0px 20px 5px; (ficando: 15px (cima) 0px (direita) 20px (baixo) 5px (esquerda).

padding-top: define só o espaçamento do topo. (ex: 15px;);

padding-right: define só o espaçamento do topo. (ex: 0px;);

padding-bottom: define só o espaçamento do topo. (ex: 20px;);

padding-left: define só o espaçamento do topo. (ex: 5px;);

mais sobre:

W3Schools – CSS Reference

CSS Reference #1

Primeira referência de CSS vai ser sobre:

Background & Border

  • Background

background-color: define a cor de fundo (ex: hexa/rgb/nome/transparent);

background-image: imagem do fundo (ex: url(img/fundo.gif) );

background-repeat: se a imagem de fundo repete ou não. (ex: repeat/repeat-x/repeat-y/no-repeat);

background-attachment: define se a imagem de fundo fica fixa ou rola junto com a página (ex: fixed/scroll);

background-position: aonde começa a imagem de fundo, por padrão top e left. (ex: top/center/bottom/x-pos/x-% left/center/right/y-pos/y-%);

background: forma resumida de utilizar tudo, mas não é necessário declarar tudo. Qual não for declarado assumirá o valor padrão. (ex: #FF00FF url(fundo.gif) no-repeat);

  • Border

border-width: largura da borda. (ex: thin/medium/thick/valor);

border-style: estilo da borda. (ex: solid/dotted/dashed/groove/ridge/inset/outset);

border-color: a cor da borda (ex: hexa/rgb/nome/none);

border: forma resumida (ex: 1px solid black);

border-top: definido do mesmo modo que o border porém só para cima.

border-right: borda da direita (ex: 2px dotted yellow);

border-bottom: borda de baixo;

border-left: borda da esquerda;

Por enquanto é só isso, adiante veremos mais.

mais sobre:

W3Schools.com – CSS Reference

Cultured Code – CSS Reference