Autor Tópico: [CSS] - Folhas de estilo - Tutorial básico  (Lida 1459 vezes)

Offline revx

  • Newbie
  • *
  • Mensagens: 0
  • Karma: +0/-0
    • Ver Perfil
[CSS] - Folhas de estilo - Tutorial básico
« em: Novembro 15, 2005, 09:09:06 pm »
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.

Código: [Seleccione]
[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 \\"

Código: [Seleccione]
[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)
Código: [Seleccione]
[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)

Código: [Seleccione]
[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

Código: [Seleccione]
[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\\"

Código: [Seleccione]
[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

Código: [Seleccione]
[i]Exemplo:[/i]

.center {text-align: center}

Pode deixar comentários na folha de estilos pondo o comentário entre /* */

Código: [Seleccione]
[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
Carpe Ad Infinitum

 

Sitemap 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49