Tag Archives: referencia

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

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

CSS – O que é?

CSS (Cascading Style Sheet) são folhas de estilo em cascata.

Pra que servem?

Servem para definir um estilo para o seu documento Web (HTML, XHTLM, por exemplo). Ao invez de você ter que toda hora definir dentro da tag usada os atributos desejados, basta fazer isso uma vez pelo CSS.

Ex.: Se você quer que toda a tag <p> tenha a fonte de cor azul, Verdana e tamanho 12px. Basta configurar ela no CSS dessa maneira:

p {
font: 12px Verdana;
color: blue;
}

E assim todas as tag <p> terão essa mesma característica. Caso você não queira que isso se aplique a todas mas sim em apenas algumas tag <p>, você pode definir uma classe com tais características e depois dentro da tag chamar essa classe.

Ex.:

.minhaclasse {
font: 12px Verdana;
color: blue;
} repare que para definir uma classe é necessário começar com um ponto.

e na tag:

<p class=”minhaclasse“> Meu parágrafo aqui </p>

Como que eu uso o CSS?

Há duas maneiras de aplicar uma folha de estilo em seu documento, uma é definir na própria página, ou chamar um arquivo externo de extensão .css. A segunda opção posibilita muito mais flexibilidade, devido a que você não irá precisar mudar os estilos página por páginas, caso venha querer mudar a “cara” do seu documento, e sim só alterar uma vez o próprio arquivo .css.

Sintaxe:

A sintaxe do CSS é muito simples. Primeiro coloca o nome da tag que queira definir o estilo abra “{” coloca os atributos e depois fecha “}”.

Os nomes das classes devem ser iniciados com um “.” e dos ID com “#“.

Ex.:

body {
background: black;
}

.minhaclasse {
color: #FF0000;
}

#meuDiv {
width: 100px;
height: 200px;
}

mais aqui

A diferença primordial entre class e id, é que a mesma classe você usa mais de uma vez em tags diferentes, enquanto o id é usado uma única vez – por uma <div> por exempo – pois o nome declarado no id serve para identificar aquela tag (exclusiva), como era feito pelo atributo name.

Definindo o estilo pela própria página:

Se você não ver porquê criar um arquivo externo ou que só vai precisar usá-lo em uma página, basta colocar o código do CSS dentro da tag <style> que por sua vez deve ficar dentro da tag <head> passando o atributo type como text/css.

Ex.:

<html>
<head>
<title>Meu Título</title>
<style type=”text/css”>
<!–
.minhaclasse {
font: 12px Verdana;
color: blue;
}
–>
</style>
</head>
<body>
<p class=”minhaclasse“> Meu parágrafo aqui </p>
</body>
</html>

Repare que o CSS propriamente dito vem dentro de um comentário ( <!– –> ), isso acontece para evitar bugs de alguns browser antigos, mas será ignorados pelos browsers mais novos.

Definindo o estilo através de um arquivo externo:

Pode-se chamar um arquivo externo de duas maneiras, uma já utrapassada e pouco usada e a mais semânticamente correta usando a tag <link> – tag na qual adiciona informações externas na página.

Primeira:

<style type=”text/css”>
<!–
@import: url(arquivo.css);
–>
</style>

Segunda, e recomendada:

<link rel=”stylesheet” href=”style.css” type=”text/css”/>

Para entender um pouco mais do porquê de tanto atributos vamos analisar um-por-um :

href: igual ao da tag <a>, define o caminho.

rel: vem do ingles relationship (relacionamento), com o atual arquivo especificado no href.

A tag <link> também deverá estar contida na tag <head>.

Alguns dos atributos mais utilizados:

background: cor; /* cor do fundo da página */
color: cor; /* cor da fonte */
font: familia; /* ex.: Verdana, Arial, Tahoma */
margin: top right bottom left; /* margin e os sentidos */
padding: top right bottom left; /* espaçamento dentro e os sentidos */
width: valor /* largura */
height: valor /* altura */
text-align: valor /* alinhamento do texto – center, left, right, justify */
border: largura tipo cor /* largura, tipo (solid, dotted, dashed), cor */

mais sobre:

Maujor.com
Maujor.com Tutorial
W3.org
W3.org Use Link
W3schools.com
W3schools.com examples
Wikipedia.org