quinta-feira, 12 de março de 2009

Introdução ao CSS


Cascading Style Sheets

Com o CSS, seus documentos HTML podem ser exibidos usando diferentes estilos.

CSS resolve um problema muito comum

As tags HTML foram originalmente projetadas para definir o conteúdo de um documento. Elas foram criadas com a intenção de dizer "Isto é um cabeçalho", "Isto é um parágrafo", "Isto é uma tabela", utilizando tags como <h1>, <p>, <table>, e por daí por diante.
O layout do documento foi criado para ser manipulado pelo browser, sem a utilização das tags de formatação.

As tags de formatação não foram criadas na especificação original do HTML. Isso tornou cada vez mais difícil a criação de web sites, onde o conteúdo dos documentos HTML tivesse que ser separado do layout do documento. Para resolver esse problema, o World Wide Web Consortium (W3C) - Um consórcio sem fins lucrativos, responsável pela padronização do HTML criou o Cascading Style Sheets (CSS).

Hoje o CSS já é suportado pela maioria dos browsers existentes.


As folhas de estilo podem poupar muito trabalho

As folhas de estilo definem como elementos HTML são mostrados.
Exemplo: Tag <font>, <center>, <i>, etc...
Geralmente elas são gravadas em um arquivo externo ".css". Arquivos .css externos habilitam você a mudar a aparência e layout de várias páginas, apenas editando um único arquivo ".css".

CSS é um grande avanço do sites Web, porque permite desenvolvedores controlar o estilo e o layout de muitas Web pages simultaneamente.
Como um desenvolvedor web você pode definir um estilo para cada elemento HTML e aplicá-lo a tantas páginas quanto você quiser.

Para fazer mudanças globais, simplesmente mude o arquivo ".css", e todos elementos nas páginas Web atualizarão automaticamente.

Folhas de Estilo permitem o estilo da informação ser especificada de muitas maneiras.
Estilos podem ser especificados dentro de um simples elemento HTML, dentro da tag <head>, ou em um arquivo externo ".css".
Mesmo múltilpas folhas de estilo externas podem ser referenciadas dentro de um simples documento HTML.

--------------------------------------------------------------------------------

Sintaxe CSS
A sintaxe CSS é dividida em três partes: seletor, propriedade e valor:

seletor {propriedade: valor}

O seletor é normalmente a tag HTML que você quer definir, a propriedade é o atributo que você deseja alterar, e cada propriedade pode ter um valor.

A propriedade e o valor são separados por ":" e devem estar entre chaves:

Exemplo:

body {color: black}


Obs: Se o valor possuir várias palavras, coloque entre aspas:


p {font-family: "sans serif"}


Obs: Se você deseja especificar mais de uma propriedade, você deve separá-las com ";".

O exemplo abaixo mostra como definir um parágrafo alinhado ao centro, com a cor do texto em vermelho:


p {text-align:center;color:red}


Para ficar mais fácil a leitura, você pode descrever uma propriedade em cada linha:


p
{
text-align: center;
color: black;
font-family: arial
}



Fonte: http://www.w3schools.com/css/

Nenhum comentário:

Postar um comentário

Obrigado pela participação. Continue visitando Dúvidas de Programação - Programming Doubts

Links

Related Posts with Thumbnails