Aula 3 - Parte Final HTML e CSS

Transcrição

1 Universidade Federal do Paraná - UFPR 16 de Agosto de 2010

2 Div 1 Div 2

3 Div Div Podemos dizer que a função da tag < div > é fazer a divisao dos itens de uma pagina, isto é posicionar os layouts. Para um melhor entendimente imagine que a tag < div > é uma espécie de container, aonde você vai posicionando os conteúdos nas posições desejadas.

4 Exemplo Div Div Figura: codigo html

5 CSS: é a abreviatura para Cascading Style Sheets. Folha de Estilos em Cascata. Função: CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, Qual é a diferença entre CSS e HTML? HTML: é usado para estruturar conteúdos. CSS: é usado para formatar conteúdos estruturados.

6 Estrutura do CSS Estrutura do CSS: seletor ( propiedade: valor ) seletor: TAG do html que vai ser atribuido algo( body ). propriedade: seria a propriedade a ser atribuida ao local como por exemplo a cor de fundo da palavra( background-color ). valor: como no exemplo anterior, seria a cor do fundo( red ).

7 Tipos de Aplicação Existem três formas de aplicar CSS em arquivos HTML, que são: In-line (o atributo style). Interno (a tag style). Externo (link para uma folha de estilos).

8 In-line In-line (o atributo style): O CSS sera aplicado neste caso nas TAGs do HTML, isto é, iremos definr a estrutura do layout na TAG desejada.

9 Exemplo de aplicação - In-line

10 Exemplo de aplicação - In-line

11 Interno Interno (a tag style): Neste caso através da TAG < style > podemos definir as estruturas dos layouts, determinando assim as propriedades desejadas.

12 Exemplo de aplicação - Interno

13 Exemplo de aplicação - Interno

14 Externo Externo (link para uma folha de estilos): É uma espécie de ligação com outro arquivo com a extensãao.css. O arquivo.css é uma folha de estilo CSS. Para efetuarmos isto, nos teremos neste caso dois arquivos um com a extensãao.html e outro com.css. E no arquivo.html faremos uma ligação para o arquivos.css.

15 Exemplo de aplicação - Externo Deve-se inserir este código na TAG < head > do arquivo.html. Lembrando que todas as mudanças feitas no arquivo.css refletirão em mudanças na página final.

16 Estrutura Sempre vamos obdecer o seguinte critério: propiedade : valor propriedade:color valor:red Exemplos: color:blue color:red font-size:23pt font-size:17pt

17 Cores e fundos color: Podemos definir a cor de duas formas: 1: pelo respectivo nome em inglês. 2: pelo jogo da velha mais 6 digitos em hexadecimal. background-color: cor do fundo da página. background-image colocar como fundo da página uma imagem.

18 Cores e Fundos background-repeat: quantidade de vezes que a imagem vai se repetir no fundo da página. Exitem as seguintes variações: background-repeat: repeat -x: repete na horizontal. background-repeat: repeat -y: repete na vertical. background-repeat: repaet: repete tanto na horizontal como na vertical. background-repeat: no-repeat: não repete.

19 Cores e Fundos background-attachment: determina se a imagem é fixa ou se ela rola juntamente com o elemento que a contém. Background-attachment: scroll: a imagem rola juntamente com a página. Background-attachment: fixed: a imagem é fixa, não importa o quanto você navega na página, a imagem sempre fica na mesma posição na tela.

20 Cores e Fundos background-position: determina a posição da imagem no na página. porcentagem:100 porcento (página inteira). tamanho:2cm, 20cm. posicionamento:top, botton, center. right, left.

21 Cores e Fundos background: Para a econômia de código e para uma melhor visualização podemos simplificar tudo em uma linha de código.

22 Fontes font-family: Determinamos em uma espécie de fila de várias fontes, que serão usadas no browser, na ordem determinada quando o indentificador da fonte não está instalada. font-style: estilo de fonte. Que pode ser: normal. italic. oblique.

23 Fontes font-variant:variação de tamanho. font-variant: small-caps; font-variant: normal; font-weight: o quanto em negrito a palavra vai ficar. font-weight: normal; font-weight: bold; font-size:tamanho da fonte. font-size: 10px; font-size: 12pt; font-size: 120 porcento font-size: 1em;

24 Fontes font igualmente ao background, também podemos economizar código.