Olá!
Sou novo aqui no WebLivre,
pretendo compartilhar o maximo que eu sei sobre
CSS e
Photoshop com vocês.
O CSS economiza muito espaço em uma página, sem contar que deixa a mesma com muito mais técnica e estilo. Se enquadre nos atuais padrões da Web! Aqui eu darei apenas um ponta-pé inicial para vocês começarem a criar páginas utilizando CSS.
CSS quer dizer Cascating Style Sheets, ou folhas de estilo em cascata, foi criado em meados dos anos 90, e atualmente é muito considerado por Webdesigners profissionais em todo o mundo. A W3.org é responsável pela validação dos códigos de CSS, você pode saber mais sobre o assunto no site W3.org
Bom chega de papo-furado e vamos ao que interessa!
Pra inicio de
matéria, eu recomendo um editor de texto plano muito bom e completo, o EditPLUS
(Copyright ES Computing) para fazer o download vá até nossa seção de downloads
ou clique Aqui
Pra quem já tinha, deve saber que o EditPlus é um
potente editor pra HTML e CSS.
No CSS existem 4 formas de utilizá-lo, alguns dizem costumo
chamá-los de INTERNOS, LINKS, IMPORTS e INSET.
Vou explicar o que é cada um
destes modelos:
INSET
Também conhecido como conteúdo do atributo "STYLE" das tags do HTML
ex:
<div style=font:10px verdana>Texto</div>
LINKS
Uma forma de importação de uma folha de estilo em cascata (CSS), é utilizado junto com a tag <link> É importante lembrar que a tag <link> tem que estar entre as tags <head> e </head> segue o exemplo abaixo:
ex:
<html>
<head>
<link href="local\arquivo.css" type="text/css" rel="stylesheet">
</head>
</html>
INTERNOS
São os estilos definidos entre as tags <style type="text/css"> e </style>
ex:
<html>
<head>
<style type="text/css"><!--
tag { atributo_do_css: valor_do_atributo; atributo2: valor_do_atributo_2 }
-->
</style>
</head>
</html>
Obs: Lembrando que os estilos internos, poderão ser usados somente no próprio documento onde estão inseridos.
IMPORTS
Os IMPORTS são uma mistura de INTERNOS e LINKS. Os links, utilizam arquivos externos, ou seja, um arquivo de extensão .CSS que esteja em um outro local (não dentro da própria página). E os INTERNOS como acabamos de ver, são aqueles definidos entre as tags <style> e </style> . Pois então, os Imports são definidos entre estas mesmas tags, utilizando um sistema parecido com o dos links veja abaixo um exemplo:
<html>
<head>
<style type="text/css"><!--
@import { url('local\arquivo.css') }
--></style>
</head>
</html>
Obs: O uso do atributo "url" é obrigatório, e segue os padrões da Web quanto a tratamento de diretórios
| Sintaxe url('local\arquivo.ext') |
|---|
| url | atributo de CSS |
| 'local' | subdiretórios (se houver) |
| arquivo.ext | nome do arquivo onde estão os estilos |
Pequeno FAQ para introdução.
P: Mas, como que eu uso o CSS? Qual a sintaxe?
R: Simples, depois de seguir os tipos de definições acima, para utilizar-mos os recursos do CSS utilizamos a seguinte sintaxe:
tag/.class/#id:evento { atributo: valor do atributo; atributo2: valor para atributo 2 }
P: Qual a diferença de ID Class e tag?
R: A diferença é simples, toda tag de HTML pode conter o atributo "id=nome" assim como também pode conter o atributo "class=nome", a diferença basica entre eles está no prefixo (primeiro caractere da esquerda), veja abaixo o esquema:
| Prefixo | Significado | Sintaxe de uso | Nota |
|---|
| # | Id | <tag id=nome> | Lembrando que, não é preciso colocar o prefixo no atributo id, ou seja #estilo ficará somente estilo |
| . (ponto) | Classe ou class | <tag class=nome> | Lembrando que, não é preciso colocar o prefixo no atributo class, ou seja .estilo ficará somente estilo |
| tag | Tag normal | <tag></tag> | Já nas tags, você pode defini-las no CSS e não precisar chamar nenhum atributo da tag, para que ela ganhe o estilo ja definido. Você pode usar qualquer tag, ex: <body>, <span>, <div>, <b> e etc... |
Obs: Lembrando que, os atributos do CSS nem sempre são iguais aos do HTML, existe uma lista grande de atributos para o CSS 2.0 que mais pra frente eu passarei em uma outra matéria. E não é utilizado "=" como no HTML, e sim ":" para separar atributo de valor, e utiliza-se ";" obrigatóriamente para dividir os atributos que um estilo contém veja o exemplo abaixo:
<html>
<head>
<style type="text/css"><!--
#destacado {
color: #F00;
background: #AAA;
}
--></style>
</head>
</html>
No esquema acima está destacado de verde o "ID" escolhido, de laranja os atributos, de vermelho os separadores que eu citei na observação anterior e de cinza alguns valores de atributos.
Você deve estar se perguntando... O porquê eu usei valores hexadecimais com apenas 3 digitos, eu respondo: No CSS é possível utilizar desta maneira, para economizar espaço talvez... logo #000 = #000000 / preto | #fb0 = #FFBB00 / laranja etc...
P: O que são estes "eventos"?
R: Os eventos são mais especificos para links e para a tag de ancora <a>, eles são 4, o LINK, ACTIVE, HOVER e VISITED... Bom os nomes já dizem tudo, vou explicar como se usam e o que quer dizer cada um. Siga o exemplo abaixo:
<html>
<head>
<style type="text/css"><!--
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
--></style>
</head>
</html>
Nós podemos utilizar tanto desta forma um atributo em baixo de outro, como todos em uma linha só, separados por ponto-e-virgula ";". No exemplo acima, eu defini que, quando o link estiver normal (a:link) seu atributo será text-decoration: none (ou seja, nenhuma decoração de texto) já no a:hover (quando o mouse passar por cima) a decoração do texto será underline ou seja, sublinhado.
LINK Link normal
HOVER Quando mouse passar sobre o link
ACTIVE Quando o link for ativado (click)
VISITED Se o link já tiver sido visitado anteriormente (armazenado nos cookies, se ativados)
Bom acho que a introdução é esta, nas proximas matérias e artigos eu vou acrescentar mais exemplos de estilos e modelos de CSS :)
Abraços e Até lá!
