Blogger templates

Comunidade java aberto - Participe da nossa comunidade no facebook (clique aqui)

Visitas

quinta-feira, 26 de julho de 2012

O que é CSS? E como usa-lo?

,




O que é CSS?

CSS(Cascating Style Sheets) é uma tecnologia que apareceu em 1996 e padronizada pela W3. O CSS permite que sejam adicionados atributos especiais as tradicionais tags do HTML alem de permitir uma formatação muito mais precisa nos elementos no layout da pagina.



Para que usar CSS?

Um exemplo que todos já conhecem é esse efeito de quando se passa o mouse acima de um link ele muda de cor ou faz qualquer alteração na font. Claro que isso é o mais básico de tudo, com CSS vc pode posicionar elementos, definir font/cor/fundo para os textos e links, bordas e mais uma infinidade de funções.
---

Como usar


Você pode usar 4 diferentes modos de usar CSS em uma pagina HTML:
  • Criar um arquivos .css onde vai estar todo o código e "chama-los" na pagina html;
  • Deixar os códigos dentro da própria pagina html entre as tags <style></style>
  • Importar o conteúdo CSS de outro arquivo;
  • Adicionar dentro das próprias tags do html usando o atributo style.
Modo 1

Abra um novo documento no bloco de notas, salve com a extensão .css e, na sua pagina html, adicione entre as tags <head></head>:
<link rel=stylesheet href="nome_do_arquivo.css" type="text/css">


Modo 2

Entre as tags <head></head>, adicione:
<style type="text/css">
Aqui vai o conteudo em CSS</style>


Modo 3

Entre as tags <head>:
<style type="text/css">
@import url(nome_do_arquivo.css)
</style>


Você deve estar se perguntando, mas isso não é a mesma coisa do Modo 1? Não. Este método é melhor por permitir que o conteúdo do arquivo de onde esta sendo importado seja combinado com o CSS digitado na própria pagina HTML. Ex.:
<style type="text/css">
@import url(arquivo.css)
Aqui vai mais códigos CSS</style>


Modo 4

Adicionando a parte CSS dentro das tags do HTML com o atributo Style. Ex.:
<h1 style="aqui vai o conteúdo css">Texto</h1>

---


Começando a criar


Para iniciar, vamos apenas adicionar atributos as tags do html, para isso, abra um novo arquivo no bloco de notas(vamos usar o modo 1).

Ex. 1:
H1 {color:white; background:black; font-family:arial}

Para testar, salve esse arquivo como estilo.css e crie uma pagina html como abaixo:
<html>
<head>
<link rel=stylesheet href="estilo.css" type="text/css">
</head>
<body>
<h1>Haha, olha só oq eu fiz!!!!!!!!!!</h1>
</body>
</html>

Salve os dois arquivos na mesma pasta e teste, você verá que o texto entra as tags <h1> esta escrito em branco e com fundo preto.

Explicando o arquivo .css
A sintaxe usada para definir atributos as tags HTML é:
TAG(<b>, <h1> etc...) { atributo1; atributo2 }

Veja que os atributos estão separados por ;(ponto e virgula).

O exemplo criado antes:
H1 {color:white; background:black; font-family:arial}
  • Primeiro definimos a tag a ser usada(H1);
  • Depois definimos a cor;
  • É definida a cor do background;
  • É definida a font a ser usada.
---


Algumas funções


Agora para você treinar, veja algumas funções para serem usadas como atributos nas tags:
  • color:cor - Define a cor do texto, pode ser uma cor em inglês ou então um valor hexadecimal(Ex: #554823);
  • Background:cor - Define uma cor para o fundo, use o mesmo esquema da função acima;
  • font-family:font - Define a font a ser usada, pode ser qualquer fonte do seu PC, mas lembre-se, o usuário precisa ter essa font também para visualiza-la. Evite usar fonts baixadas da internet.
  • font-size:tamanho - Define o tamanho do texto, sempre indique a medida a ser utilizada junto com o valor, por exemplo para 12 pixels: font-size:12px
Agora tente criar uma folha de estilos usando diferentes tags e atributos.


Fonte: wmonline

0 comentários to “O que é CSS? E como usa-lo?”

Postar um comentário

Insira seu comentário

 

Java Aberto Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger