Ir para conteúdo

Tutorial Css

Rikezenho

Por Rikezenho
em Tutoriais de Websites

 Share

Posts Recomendados

Rikezenho

Rikezenho 2

Postado
Postado (editado)

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

Editado por Rikezenho
Link para o comentário
Compartilhar em outros sites
  • 2 weeks later...
HeNnet

HeNnet 3

Postado
Postado

@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)

Link para o comentário
Compartilhar em outros sites
  • 2 weeks later...
Visitante Lips

Visitante Lips

Postado
Postado

Oi!

 

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

 

[]'s

Link para o comentário
Compartilhar em outros sites
  • 2 months later...
  • 1 month later...
 Share
Ir para a lista de tópicos

  • Quem Está Navegando   0 membros estão online

    • Nenhum usuário registrado visualizando esta página.
×
×
  • Criar Novo...