Professor: Paulo Macos Trentin – paulo@paulotrentin.com.brhttp://www.paulotrentin.com.br

Escola CDI de Videira

4/6/2011 1

Do inglês, Cascading Style Sheet, ou folha de estilo em cascata.

É uma linguagem que provê a apresentação de documentos escritos em HTML ou XML.

Seu principal foco é a adição de estilos na página permitindo a separação do conteúdo do documento, de sua apresentação.

A vida de um programador Web se divide em duas etapas: antes do CSS e depois do CSS.

4/6/2011 2

Basicamente é definir em um arquivo a estrutura HTML e seu conteúdo, e em outro arquivo as regras para formatação e exibição de tal estrutura.

A vantagem básica de fazer isso é reaproveitamento de código. Para que informar ao navegador em cada parágrafo o tamanho da fonte em 14px se você pode fazer isso em um único lugar?

4/6/2011 3

A separação do conteúdo da apresentação cria a vantagem do efeito cascata.

Uma ação em cascata permite você definir um estilo para uma dada tag raiz e esse estilo se propagar, em cascata, pelo site.

Desta maneira, com uma linha de código você pode alterar o tamanho da fonte de todo o site, por exemplo.

4/6/2011 4

No início os sites foram apresentados usando tabelas, o que gerava inflexibilidade e falta de controle sobre o simples posicionamento de um elemento na página.

As CSSs permitem você definir precisamente o local de cada elemento fixo ou relativo a seu superior.

4/6/2011 5

Vejamos o seguinte código HTML para criação de um layout simples apenas com tabela:

4/6/2011 6

Agora, o mesmo layout porém, fazendo o uso de CSS e seus elementos de divisão por blocos, as DIVs:

4/6/2011 7

Basicamente o CSS seleciona um ou mais elementos HTML e sobre ele aplica o efeito desejado.

Para a seleção de um elemento único na página, que possui estilo específico usamos um id.

Para selecionar vários elementos que possuem características em comum, usamos uma classe.

4/6/2011 8

Assim como o Javascript, a codificação e inserção de arquivos CSS pode ocorrer dentro do cabeçalho da página, na tag head.

Exemplo:

4/6/2011 9

Não exatamente. Como o CSS nos permite separar a exibição do conteúdo em arquivos diferentes, para reutilização, é importante que usemos esta facilidade.

Exemplo de inserção de arquivo CSS no HTML:

4/6/2011 10

Crie uma pasta chamada css dentro da pasta meusite. Agora crie um novo arquivo de texto com nome estilo.css;

Abra esse arquivo com o NetBeans;

Insira o seguinte conteúdo nele:p{

font-size: 25px;

}

4/6/2011 11

Agora crie uma nova sua página HTML inserindo o seguinte conteúdo (lembre-se de usar a estrutura padrão do HTML antes disso):

4/6/2011 12

Usamos anteriormente o seletor p, que aplica o estilo usado entre as chaves {} para todos os elementos pda página.

Podemos dizer, portanto que um seletor é a parte da regra CSS que vem antes da chave inicial {.

h1{margin-top: 20px;

}

Na regra acima, o seletor h1 irá selecionar todos os títulos do site. A esses títulos estamos informando que desejamos uma margin-top de 20 pixels.

4/6/2011 13

É impossível um programador Web desenvolver um site com CSS sem saber o que é um pixel.

Pixel é simplesmente o menor elemento em um dispositivo de exibição. É um ponto na tela que na verdade é um quadrado.

Uma letra neste texto é formada por centenas de píxeis.

Aproxime seu olho o quanto puder do monitor e veja a letra abaixo. Perceba a variação de cores nos quadrados minúsculos:

A4/6/2011 14

Monitores modernos suportam definição em full HD (HighDefinition), isso significa que na vertical são capazes de exibir 1080 pixels.

Se compararmos aos 480 das antigas TVs, então temos um grande salto de qualidade, pois estamos exibindo a “mesma imagem”, porém com muito mais “quadradinhos”, sendo mais difícil de vê-los a olho nu, resultando em uma melhor imagem.

Os monitores permitem-nos modificar a resolução da tela, ou seja, quantos píxeis queremos usar. Um monitor moderno suporta tipicamente resolução de 1920 x 1080.

4/6/2011 15

Pegando um gráfico recente do Google Analytics, software que estudaremos futuramente, podemos ver as resoluções de tela mais usadas pelos usuários. Site comercial:

4/6/2011 16

Site universitário:

4/6/2011 17

Vendo as estatísticas usadas, podemos perceber que não é mais necessário desenvolver um site que “rode” em 800 x 600 píxeis.

Esses monitores já não são usados pela maioria das pessoas. Hoje com o barateamento dos laptops, percebemos que resoluções de 1280 x 800 são muito comuns.

Porém não podemos ignorar a grande quantidade de monitores com 1024 x 768 píxeis, que ainda lidera o mercado.

Portanto, para manter compatibilidade, atualmente recomenda-se o desenvolvimento de interfaces que suportem telas com largura de 1024 pixels.

4/6/2011 18

Visto o básico vamos começar com mais exemplos de seletores. Existe basicamente duas formas de adicionar estilos à elementos HTML:

Através de classe ou ID que é um atributo inserido no elemento HTML:

Arquivo css:

Arquivo html:

4/6/2011 19

Através de seletores de tags HTML

Arquivo css:

Arquivo html:

4/6/2011 20

O ID é um identificador único na página. Não podem haver dois elementos com o mesmo ID.

Portanto, sua aplicação se dá quando deseja-se atribuir estilos para um elemento único na página sem chances de selecionar outro elemento.

Uso no HTML:

Seleção com CSS:

4/6/2011 21

Uma classe é usada para selecionar vários elementos com estilos semelhantes.

Portanto, sua aplicação se dá quando deseja-se atribuir estilos para um elemento que é repetido na página, como itens de um menu.

Uso no HTML:

Seleção com CSS:

4/6/2011 22

Melhor site Brasileiro para estudo: http://maujor.com/

Seletores CSS: http://maujor.com/tutorial/seletores_css21_parte1.php

Seletores CSS W3C: http://www.w3.org/TR/CSS2/selector.html

Referência oficial para estudo: http://www.w3schools.com/css/

Livro: Use a Cabeça HTML com CSS e XHTML

Livro: Construindo Sites com CSS e (X)HTML

4/6/2011 23

Acesse o site do Maujor e através dos exemplos por ele mostrado, desenvolva uma página de seu interesse fazendo o uso de no mínimo 20 propriedades da CSS.

Observação: usar duas vezes a mesma propriedade não aumenta a contagem.

Abuse dos elementos HTML e a flexibilidade do CSS, use sua criatividade!

4/6/2011 24