REVISTA VIRTUS


Aprenda Css by falle criativo
curso_cssO que é CSS?

CSS(Cascating Style Sheets) é uma tecnologia que apareceu em 1996 e padronizada pela W3C. 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 ja 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 basico de tudo, com CSS vc pode posicionar elementos, definir font/cor/fundo para os textos e links, bordas e até alguns efeitos especiais como sombra.

Como usar

Você pode usar 4 diferentes modos de usar CSS em uma pagina HTML:

  1. Criar um arquivos .css onde vai estar todo o código e “chama-los” na pagina html;
  2. Deixar os códigos dentro da própria pagina html entre as tags <style></style>
  3. Importar o conteudo CSS de outro arquivo;
  4. 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>:

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

Modo 2

Entre as tags <head></head>, adicione:

CODE
<style type=”text/css”>
Aqui vai o conteudo em CSS
</style>


Modo 3

Entre as tags <head>:

CODE
<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 metodo é 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.:

CODE
<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.:

CODE
<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:
CODE
H1 {color:white; background:black; font-family:arial}

Para testar, salve esse arquivo como estilo.css e crie uma pagina html como abaixo:

CODE
<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 ags HTML é:

CODE
TAG(<b>, <h1> etc…) { atributo1; atributo2 }

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

O exemplo criado antes:

CODE
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 usuario precisa ter essa font tambem 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.

Pode parecer complicado no começo, mas é tudo um questão de treino, em uma semana você já pode ter um certo dominio de CSS.

Fonte: http://www.webtutoriais.com/open.php?cut=5762

Sites sobres CSS:
http://www.csszengarden.com/ 
http://maujor.com/index.php
http://www.w3schools.com/css/

Vídeo sobre Css:

Para ver mais vídeos entre aqui:
http://www.youtube.com/user/Carlosgenweb

Anúncios

Deixe um comentário so far
Deixe um comentário



Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s



%d blogueiros gostam disto: