Antes de mais para poder trabalhar com css tem de ter experiência em html e saber funcionar bem com o mesmo. Se não percebe de html utilize os tutoriais presentes na secção Html da Categoria programação.
Em primeiro de tudo nós perguntamo-nos a nós mesmos o que é CSS ? A resposta é simples...
- CSS é a sigla para Cascading Style Sheets ou seja folha de estilo;
- Define como se demonstram os elementos HTML;
- Normalmente são armazenados em ficheiros próprios como por exemplo style.css;
- Foi adicionado ao HTML 4.0 para resolver uma série de problemas de costumização;
- No caso de ser armazenado o código em ficheiro próprio poupa muito trabalho;
- Com o CSS consegue um aspecto mais desenvolvido nos seus documentos html.
Origem do CSS e Fim do problema do Html
As tags html for originalmente concebidas para definir o conteúdo do documento. Era suposto definirem "Isto é o header", "Isto é um paragrafo", "Isto é uma tabela", usando tags como <h1>, <p>, <table>, etc.A layout do documento era cuidada pelo browser sem tags de formatação.
No entanto os dois principais concorrentes nestes primeiros tempos - Netscape e Internet Explorer - continuaram a adicionar novas tags e tributos (como <font> e o tributo da cor) devido a isto começou a ser mais e mais dificil criar sites web onde o conteúdo html fosse precisamente separado do documento de apresentação da layout e ser lido de igual maneira por todos os browsers.
Para resolver este problama, o World Wide Web Consortium (W3C) - o regularizador das linguagens web adicionou as folhas de estilo ao HTML 4.0.
Desde então todos os browsers principais suportam css, uns pior outros melhor.
Sintaxe
A sintaxe no css é feita por três partes:
- elemento_a_definir {propriedade: valor}
O elemento a definir é a tag à qual o código css vai ser aplicado, a propriedade é o atributo que queremos mudar e o valor é o valor que vamos definir nesse atributo, estes dois são separados por dois pontos.
[i]Exemplo de sintaxe:[/i]
body {color: white}
Aqui definimos que à tag <body> vamos atribuir o atributo color ou seja a cor do tipo de letra que neste caso definimos como branco no valor.
Se o valor for mais que uma palavra saparadas por um espaço deve se por o valor entre "
[i]Exemplo:[/i]
p {font-family: "Times New Roman"}
Para especificar mais que um atributo separamos os tributos por ; seguidos de um espaço (não obrigatória mais facilita a coomprensão do programador)
[i]Exemplo:[/i]
table {text-align: right; color:blue}
Se for de sua preferência pode definir cada variavel numa linha (será assim que será explicado em todo o tutorial apartir de agora para facilitar a compreensão)
[i]Exemplo:[/i]
p
{
text-align: right;
color: red;
font-family: arial
}
Pode definir mais de uma tag no mesmo style separando as tags a serem definidas por virgulas
[i]Exemplo:[/i]
h1,h2,h3,h4,h5,h6
{
color: black
}
Quando quer definir vários tipos de aspectos para tags similares pode definir uma determinada classe ao estilo pondo um ponto final seguido da classe desejada e adicionando à tag html o tributo class="a_classe definida"
[i]Exemplo:[/i]
p.right
{
text-align: right
}
p.center
{
text-align: center
}
e depois no documento html
<p class="right"> e <p class="center">
Podemos também omitir a tag pondo apenas .classe o que fará que este estilo possa ser aplicado em qualquer uma das tags
[i]Exemplo:[/i]
.center {text-align: center}
Pode deixar comentários na folha de estilos pondo o comentário entre /* */
[i]Exemplo:[/i]
/* Define o alinhamento do texto */
.center {text-align: center}
NOTA: NÃO DEVE UTILIZAR NÚMEROS NO INICIO DA VARIAVEL CLASS POIS O MOZZILA/FIREFOX NÃO INTERPRETARÁ.
Um tutorial mais complicadito para breve
[CSS] - Folhas de estilo - Tutorial básico
Nov 15 2005, 09:09 PM
