::Tutorial de CSS!
Bom, pra quem não conhece essa maravilha chamada CSS, ela significa Cascading Style Sheet, ou, Folha de Estilo em Cascata.
Tá, ainda não entendi nada.
CSS é usado em sites, para alterar MUITAS páginas com simples e rápidas alterações.
Como o próprio nome diz, CSS é um estilo em cascata, ou seja, o que for mudado no estilo CSS, será mudado em todas as páginas que usem esse estilo.
Por exemplo:
O cara quer mudar o fundo de 5.000 páginas em 5 segundos. Simples, com CSS.
Em 5 segundos ele poderá alterar essas 5.000, ou 10.000, 1 milhão, quantas desejar, graças ao CSS.
Agora chega de enrolação, e vamos pro tutorial.
Sintaxe CSS
A sintaxe é a seguinte:
objeto{
propriedade: valor;
}
Para criar classes, a sintaxe é a seguinte:
.nomedaclasse{
propriedade: valor;
}
Uso:
<p class="nomedaclasse">Esta classe</p> <td class="nomedaclasse">Pode ser usada em qualquer objeto.</p>
Também há outro tipo de classes, que são atribuidas a objetos específicos.
p.nomedaclasse{
propriedade: valor;
}
Uso:
<p class="nomedaclasse">Esta classe</p> <p class="nomedaclasse">Só pode ser usada no elemento P, que defini no estilo.</p>
Também há as pseudo-classes, que também são atribuidas a objetos específicos.
objeto:pseudo-classe{
propriedade: valor;
}
Pseudo-classes para links:
a:hover -> quando o mouse está em cima do link a:link -> o link normal a:visited -> o link visitado a:active -> o link ativo a:focus -> o link marcado
Onde botar esse tal de CSS?
Existem algumas formas de inserir ele em uma página.
-Na tag HTML
-Em uma folha de estilo separada
-No HEAD da página
-NA TAG HTML
Por exemplo, você criou um parágrafo(P). Daí vai lá e adiciona o elemento style.
<p style="[...]">Teste</p>
-EM UMA FOLHA DE ESTILO SEPARADA
Crie um arquivo de extensão .css, com qualquer nome. Nele você adiciona a sintaxe normalmente, como se tivesse adicionando o estilo diretamente em uma página HTML.
Depois disso, para adicionar o estilo na página HTML, adicione isto:
<link rel="stylesheet" type="text/css" href="nomedoestilo.css">
Ou
<style type="text/css">
@import url("nomedoestilo.css");
</style>
Entre as tags <HEAD> e </HEAD> do seu site.
-NO HEAD DE UMA PÁGINA
Entre as tags <HEAD> e </HEAD>, crie uma tag assim:
<style type="text/css">
objeto{
propriedade: valor;
}
</style>
No CSS, todo valor que tiver mais de uma palavra, deve ser colocado entre aspas(duplas).
Por exemplo:
font-family: "Lucida Sans Unicode", "Sans Serif";
Bom, a sintaxe já expliquei, agora vou começar a explicar os objetos e como usá-los.
Bem, todo e qualquer coisa que você mude pelo objeto(A primeira sintaxe que expliquei), será alterada na página, caso incluída.
Por exemplo, você muda o body pela folha de estilo:
body{
background: #FFFFFF;
}
Em toda página que estiver com a folha de estilo incluída, o body será alterado diretamente, não precisará chamar nenhuma classe nem nada.
Cada objeto tem suas propriedades, então, vou explicá-las aqui.
LEGENDA: Texto entre colchetes são os valores que se pode atribuir
OBJETO FONT(FONTE)
color -> cor da fonte, [valor pode ser em hexadecimal(#000000) ou nome(black)]; font-family -> tipo da fonte, [valor pode ser nome da fonte, sans serif/serif/nada]; font-size -> tamanho da fonte, [em pixels]; font-style -> estilo da fonte, [oblique,normal,italic]; font-variant -> fontes maiúsculas de menor altura, [normal,small-caps(Maiúsculas de menor altura)]; font-weight -> quanto escura a fonte é, [normal,bold,bolder,lighter,100~900(Valores de 100 a 900)]; font -> maneira abreviada para todas as propriedades
OBJETO TEXT(TEXTO)
letter-spacing -> espaçamento entre as letras, [valor em número(Ex: 5), são aceitos valores negativos]; word-spacing -> espaçamento entre palavras, [valor em número(Ex: 5), são aceitos valores negativos]; text-align -> alinhamento do texto, [left, right, center, justify(Força a ocupar toda linha da esquerda e direita)]; text-decoration -> decoração do texto, [none, underline(Sublinhado), overline(Sobrelinhado), line-through(Sobrelinhado), blink(Piscando)]; text-indent -> recuo do texto, [valor em número(Ex: 5), ou %]; text-transform -> forma das letras, [uppercase(Todas maiúsculas), lowercase(Todas minúsculas), capitalize(Primeira letra maiúscula)]; direction -> direção do texto, [ltr(Esquerda para Direita),rtl(Direita para Esquerda)]; white-space -> como o browser trata os espaços em branco, [normal, pre, nowrap(Texto apresentado em uma única linha, só será cortado quando for encontrada a tag <BR>)];
OBJETO MARGIN(MARGEM)
margin-top -> define a margem superior; margin-right -> define a margem direita; margin-bottom -> define a margem inferior; margin-left -> define a margem esquerda; margin -> maneira abreviada para todas as margens; *Todos os valores podem ser em %, número ou auto(Padrão)
OBJETO BORDER(BORDA)
border-width -> espessura da borda border-style -> estilo da borda border-color -> cor da borda ----------------------------------------- border-top-width -> espessura da borda superior border-top-style -> estilo da borda superior border-top-color -> cor da borda superior ----------------------------------------- border-right-width -> espessura da borda direita border-right-style -> estilo da borda direita border-right-color -> cor da borda direita ----------------------------------------- border-bottom-width -> espessura da borda inferior border-bottom-style -> estilo da borda inferior border-bottom-color -> cor da borda inferior ----------------------------------------- border-left-width -> espessura da borda esquerda border-left-style -> estilo da borda esquerda border-left-color -> cor da borda esquerda ----------------------------------------- border-top -> maneira abreviada para todas as propriedades da borda superior border-right -> maneira abreviada para todas as propriedades da borda direita border-bottom -> maneira abreviada para todas as propriedades da borda inferior border-left -> maneira abreviada para todas as propriedades da borda esquerda border -> maneira abreviada para todas as quatro bordas
Valores podem ser atribuidos:
color: código hexadecimal: #FFFFFF/nome da cor: red, blue, green...etc style: none: nenhuma borda/hidden: equivalente a none/dotted: borda pontilhada/dashed: borda tracejada/solid: borda contínua/double: borda dupla/groove: borda entalhada/ridge: borda em ressalto/inset: borda em baixo relevo/ outset: borda em alto relevo width: thin: borda fina/medium: borda média/thick: borda grossa/ Em números
OBJETO PADDING(ESPAÇAMENTO)
padding-top -> define a espaçamento superior; padding-right -> define a espaçamento direita; padding-bottom -> define a espaçamento inferior; padding-left -> define a espaçamento esquerda; padding -> maneira abreviada para todos os espaçamentos; *Todos os valores podem ser em %, número ou auto(Padrão)
OBJETO BACKGROUND(FUNDO)
background-color -> cor do fundo, [em valor hexadecimal(#000000) ou nome(black)];
background-image -> imagem de fundo, [url("caminho/imagem")];
background-repeat -> maneira como a imagem de fundo é posicionada, [no-repeat, repeat, repeat-x, repeat-y];
background-attachment -> se a imagem de fundo "rola" ou não com a tela, [fixed,scroll];
background -> maneira abreviada para todas as propriedades;
Referências:
Maujor
Numaboa
Bom... Aqui termina meu tutorial, está meio mal explicado, mas é isso, deu pra aprender o básico... ^^
No começo vocês vão começar a confundir as propriedades dos objetos, mas é normal.
O CSS é uma coisa muito boa que inventaram para sites =]
Espero ter ajudado!
Flwwww!
