improdutivo

Excelente lista de links para tutoriais, dicas e recursos sobre a utilização de CSS. No site de Grace Smith.

Existem quatro tipos de posicionamento possiveis para as DIVs:
- Estático (static);
- Relativo (relative);
- Absoluto (absolute);
- Fixo (fixed).

O posicionamento estático corresponde ao fluir normal dos elementos num documento HTML, ou seja, as DIVs são posicionadas de cima para baixo, da esquerda para a direita. Se uma DIV for reposicionada através de css, a DIV imediatamente abaixo toma o seu lugar.

O posicionamento relativo é um reposicionamento de uma dada DIV relativamente à sua posição estática, ou seja, relativamente à sua posição estática a DIV está deslocada no eixo x tantos pixeis e no eixo y outros tantos pixeis.

O posicionamento absoluto é calculado tendo em conta a janela do browser. Neste caso as coordenadas x e y da DIV estão em perfeita correlação com as dimensões da janela do browser.

O posicionamento fixo permite manter uma DIV fixa na janela do browser, que não mexe com o movimento do scrool. Permite-nos criar efeitos como os realizados com frames.

Existem quatro tipos de layouts:
- Fixo (fixed);
- Elástico (elastic);
- Liquido (lquid);
- Hibrido (hybrid).

No layou fixo, as medidas são fixas, logo não existe alteração da estrutura da página quando se muda de resolução e ou de dimensão do monitor.

O layout elastico, tem a aparência de um layout fixo, mas aumentando ou diminuindo a fonte o layout acompanha o redimensionamento da fonte. É um layout flexível porque é constituído por unidades de medida relativas, a largura é relativa à largura da fonte do browser utilizado. Temos sempre o mesmo número de linhas e palavras se aumentarmos ou diminuirmos o layout com a janela do browser.

O layout liquido, usa colunas em percentagem. Ao redimensionar o browser o layout adapta-se ao tamanho.

O layout híbrido, é uma combinação do elastico e do liquido.Por exemplo, podemos ter o conteúdo de uma div em ems (font-size: 1 em;)e o conteúdo de outra em percentagem (font-size: 100%). Logo uma DIV vai manter sempre a sua estrutura, outra vai adaptar-se face ao redimensionamento da janela do browser.

Como sabemos um documento HTML pode conter definições CSS inline, embebidas e externas. Ora quando coexistem num mesmo documento poderá haver conflitos o que pode originar situações anómalas e renders estranhos do documento HTML.

Leitura

A ordem de leitura destes estilos, quando em simultâneo num HTML, é a seguinte:
1- CSS existente no browser;
2- CSS externa;
3- CSS embebida;
4- CSS inline.
Cascata

Quando existe mais do que um estilo num documento HTML, estes funcionam em cascata numa folha de estilo virtual com a ordem acima descrita.
A última regra da cascata é a que tem prioridade.
A ordem de prioridade é a seguinte:
1- inline;
2- CSS embebida;
3- CSS externa;
4- CSS do browser.

Isto quer dizer que em caso de regras iguais com valores diferentes a inline sobrepõe-se à embebida e esta à externa.
É importante saber que mesmo quando existem duas declarações iguais na mesma css, a última regra da lista das declarações é a que prevalece. É, também, importante a posição das folhas de estilo na head do HTML, a ultima folha CSS na ordem do HTML é a que tem predominância.

Inerência

Propriedades e valores em tags parent têm inerência sobre as child tags
Quando um selector está ligado por uma relação de parentesco a outro ou está contido nele, assume as propriedades do selector onde está contido.
Se, por exemplo, declararmos no selector body a property font-family todo o texto da página HTML vai assumir esta propriedade.

body {font-family: Verdana, serif;}

Se quisermos outro estilo dentro do HTML temos que o realizar pelas respectivos selectores
Por exemplo:

h1 {font-family: Georgia, serif;}
p {font-family: Tahoma, sans-serif;}

Agora as tags [h1]terão a fonte Georgia e não a verdana anteriormente declarada na tag body.
Mas se declararmos

h1 {font-size: 12px;}

a fonte seria verdana, a font declarada na tag body.
Por inerência uma tag ganha o estilo da tag pai.
[div id="”exemplo”"]
[p]Viva o Porto![/p]
[/div]

#exemplo{
font-family:Arial;
{
p{
font-size:1em; color:red;
}
em{color:blue; font-style:normal}

Neste exemplo teremos: Viva o (arial, 1 em, vermelho) Porto! (arial, 1 em, azul)

Relembrando, o render final é dado pela ordem das CSS, que podem ser externas, embebidas e inline. Em caso de conflito, o mesmo estilo para as mesmas tags, a última css aplicada sobrepõe-se à anterior.
*onde se escreveu [ ] deve escrever-se <>

Inserção de CSS num documento HTML

A CSS pode ser incluída num documento HTML de três formas: inline, embebida ou como ficheiro externo.
CSS inline

A CSS inline é a forma mais antiga, ainda do tempo da utilização das tabelas como elemento de estrutura do HTML. Neste caso a definição é escrita juntamente com o código HTML.

[p style="text-align: left"] texto bla bla bla[/p]

A declaração é escrita justamente com o código HTML. Poderá ser de alguma utilidade em algumas situações especificas, mas é uma técnica em desuso e não recomendada.
CSS embebida

Desta forma colocamos o código dentro da HEAD da página HTML a que queremos aplicar a CSS.

[style type="text/css"]
[!–
body{
margin: 0;
padding: 0;
text-align: center;
background-color: #333333;
}
–]
[/style]

Com este método os estilos são aplicados só à página onde estão colocados.
Não é uma boa solução para aplicar a um site, dado que se quisermos mudar a CSS temos que mudar página a página.
Podemos migrar a CSS embebida para uma CSS externa existente ou nova. Para isso clicamos com o botão direito do rato sobre CSS no painel CSS e escolhemos move. É-nos dada a opção de migrar a CSS para uma existente, caso haja, ou para um documento CSS novo.
CSS externa

O ficheiro .css é criado externamente ao HTML . Só temos que fazer a ligação do CSS ao HTML com um link na head.

[link rel="stylesheet" type="text/css" xhref="…/css/nomedoficheiro.css" mce_href="…/css/nomedoficheiro.css" /]

Ou podemos fazer a importação do ficheiro CSS

[style type="text/css"]@import url (http://...../.css)[/style]

Qualquer destes métodos é realizado colocando a instrução de link ou importação na head do HTML.
Usando um ficheiro externo todas as páginas HTML ligam-se a um ficheiro CSS. Isto significa que, se for preciso alterar formatação do site só temos que alterar um ficheiro CSS, e não mudar todas as páginas HTML, uma a uma.

Logo:
- A manutenção é mais fácil;
- O tamanho é reduzido;
- A largura de banda é reduzida;
- A flexibilidade é melhorada.

A forma mais usada é a CSS externa. No entanto, é possivel ter num mesmo documento HTML as três formas, ou seja, inline, embebida e externa. É, no entanto, preciso ter em atenção a ordem de leituras dos vários estilos e a implicação que têm uns com os outros.

* onde está escrito [ ] deve escrever-se<>

Definições

As definições de CSS(cascading style sheet) permitem-nos separar a estrutura da forma de um documento (X)HTML. O (X)HTML é usado para definir a estrutura através das tags mas toda a formatação (fontes cores, imagens de fundo, molduras, links, formatação do texto, etc ) é realizada pelas definições de CSS.

Um ficheiro de CSS mão é mais do que um conjunto de várias definições (embebidas na head do documento ou num ficheiro externo). Estas definições podem ser:
- regras (rules);
- @rules (que compreendem regras gerais de definição de impressão, de screen, de page, de print,etc.) ou;
- @import (que permitem a importação de um documento CSS existente num outro local, sem ser necessário copiá-lo. Por exemplo, esta página podia ser formatada por um ficheiro CSS existente no site esafmultimedia.com. Assim escreveríamos na head:

@ import url(http://esafmultimedia.com/CSS/geral.css)

A sintax de uma definição CSS consiste em 3 partes:

selector {propriedade: valor} // selector {property: value}

O selector referencia o elemento HTML que queremos formatar. A propriedade é um atributo do selector que queremos formatar e o valor está intimamente relacionado com a formatação do elemento.
Cada selector pode ter múltiplas propriedades; e cada propriedade tem valores independentes.

body {
background: #eeeeee;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}

Neste exemplo (de definição tipo rule) o body é o selector; a definição é o conjunto das instruções escritas entre as chavetas, background, é uma propriedade de body; #eeeeee é o valor do background nesta definição.

A propriedade e o valor estão separados por dois pontos e rodeados por chavetas.
Quando um valor é constituído por mais que uma palavra, deve estar entre aspas.
Também, podemos especificar mais do que uma propriedade na mesma declaração.

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

Para isto, devemos separar cada propriedade e o respectivo valor com um ponto e vírgula (;).

Comentários CSS

Os comentários CSS são uma forma prática de organizarmos código. Servem, como o próprio nome indica , para inserir texto em forma de comentário que ajuda o autor a relembrar a organização e a forma das definições ou para organizar o documento CSS em partes lógicas. São, também, extremamente úteis para partilhar código, permitindo que outra pessoa compreenda o porquê daquela organização ou definição.

/*isto é um comentário CSS*/

//atenção, este não é um comentário CSS!! Este comentário, comum a muitas //linguagens origina um erro de CSS.

Os comentários HTML usados para embeber a CSS na head são usados por precaução, dado que os browsers mais antigos, ignorando a tag style mostrariam as definições CSS na página.

Definir a CSS de de forma curta e concisa

Quando criamos as regras de CSS podemos compactar o código.
Por exemplo esta definição:

.imagem {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-color: #333333;
border-right-color: #333333;
border-bottom-color: #333333;
border-left-color: #333333;
}

pode ser escrita assim:

.imagem{
margin: 20px;
border: thin solid #333333;
}

Isto permite-nos poupar tempo e permitir um render mais rápido do documento.