Tutorial Css

Por Rikezenho, 08 de mar. de 2007 em Tutoriais de Websites

4.7k

Rikezenho RCampones

info

Grupo: Campones

Registrado: 20/04/06

Posts: 84

Reputação: +2

08 de março de 2007 às 22:42

::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">

<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!

Editado Março 9 por Rikezenho

skynagerloasEx-ModeradorSHerói Herói

info

Grupo: Herói

Registrado: 12/11/05

Posts: 715

Reputação: +1

Char no Tibia: Lord'Skyxt

09 de março de 2007 às 19:19

Tuto legal,

Mas eu uso Dreamweaver tambem funciona?

SkyNagerloas.

Raphael Lion RCavaleiro

info

Grupo: Cavaleiro

Registrado: 07/02/07

Posts: 162

Reputação: +2

09 de março de 2007 às 19:40

Gostei Rike !!!

Mostrou Tudo Certin parabéns !!!

Cya !

Rikezenho RCampones

info

Grupo: Campones

Registrado: 20/04/06

Posts: 84

Reputação: +2

09 de março de 2007 às 20:12

Tuto legal,
Mas eu uso Dreamweaver tambem funciona?

SkyNagerloas.

Funciona sim ^^

O Dreamweaver até te ajuda a editar estilos CSS.

Flwww!

HeNnet HArtesão

info

Grupo: Artesão

Registrado: 01/09/05

Posts: 114

Reputação: +3

Char no Tibia: Tiduji

09 de março de 2007 às 20:48

Putz tem que ser aprovado.. muito bom o tuto parabéns tudo organizadinho e talz

Ajuda muito ;D

Abraços HeNnEt 8)

Rikezenho RCampones

info

Grupo: Campones

Registrado: 20/04/06

Posts: 84

Reputação: +2

12 de março de 2007 às 18:32

Cadê a equipe?...

Jvchequer"Veni, vidi, vici."JLenda Lenda

info

Grupo: Lenda

Registrado: 10/10/05

Posts: 2.2k

Reputação: +63

Char no Tibia: Master Chequer

14 de março de 2007 às 06:04

Movido.

Cya

Jvchequer"Veni, vidi, vici."JLenda Lenda

info

Grupo: Lenda

Registrado: 10/10/05

Posts: 2.2k

Reputação: +63

Char no Tibia: Master Chequer

14 de março de 2007 às 06:06

Tutorial Aceito.

Parabéns.

Cya

2 semanas depois...

HeNnet HArtesão

info

Grupo: Artesão

Registrado: 01/09/05

Posts: 114

Reputação: +3

Char no Tibia: Tiduji

27 de março de 2007 às 22:31

@OFF-Topic

OMG Coordenador fazendo flood o.O

ahuahuauauahaus

@Topic

Muito bom o tutorial, tiro algumas dúvidas que tinha a respeito de css, eu uso o Dreamwaver pra me ajudar

"O CSS é uma coisa muito boa que inventaram para sites =]"

Se não a melhor hehehe xD

Abraços HeNnEt 8)

1 mês depois...

Lips L

info

Registrado: 31/12/69

Posts: 0

Reputação: 0

07 de abril de 2007 às 22:01

Oi!

Seu tutorial ficou bem legal rsrs, eu ando estudando XHTML, HTML, CSS e gostei do seu tutorial ficou explicado !

[]'s

2 meses depois...

kamimuraOld School :DKBarão Barão

info

Grupo: Barão

Registrado: 19/04/06

Posts: 201

Reputação: 0

09 de junho de 2007 às 23:32

Oi,

simplismente fantastico....

o Majour é fera em XHTML e CSS,

o blog dele é bem interessante

ABraços,

Tiu Kami~Santos F.C.

giankopak GCampones

info

Grupo: Campones

Registrado: 08/06/07

Posts: 4

Reputação: 0

Char no Tibia: Bronca'Axel

10 de junho de 2007 às 22:30

excelente topico

explicando tudo

obrigado...

HeteBanidoHBanidos Banidos

info

Grupo: Banidos

Registrado: 17/06/07

Posts: 1

Reputação: 0

17 de junho de 2007 às 16:54

extremamente impressionante.

2 meses depois...

leorok LCampones

info

Grupo: Campones

Registrado: 01/01/07

Posts: 4

Reputação: 0

01 de agosto de 2007 às 19:30

Muito Fino

leorok LCampones

info

Grupo: Campones

Registrado: 01/01/07

Posts: 4

Reputação: 0

01 de agosto de 2007 às 19:31

Muito Fino