Aula 3 - Parte Final HTML e CSS - Departamento de Informática · Equipe Instrutor do Departamento...

Parte final HTMLFormatacao em CSS, folhas de estilo

Aula 3 - Parte Final HTML e CSS

Equipe Instrutor do Departamento de Informatica

Universidade Federal do Parana - UFPR

16 de Agosto de 2010

Equipe Instrutor do Departamento de Informatica Aula 3 - Parte Final HTML e CSS


Div

1 Parte final HTMLDiv

2 Formatacao em CSS, folhas de estiloBreve HistoriaTAGs basicas



Div

Div

Podemos dizer que a funcao da tag < div > e fazer a divisaodos itens de uma pagina, isto e posicionar os layouts.Para um melhor entendimente imagine que a tag < div > euma especie de container, aonde voce vai posicionando osconteudos nas posicoes desejadas.



Div

Exemplo Div

Figura: codigo html



Breve HistoriaTAGs basicas

Breve Historia

CSS: e a abreviatura para Cascading Style Sheets. —Folha de Estilos em Cascata.

Funcao: CSS e uma linguagem para estilos que define olayout de documentos HTML. Por exemplo, CSS controlafontes, cores, margens, linhas, alturas, larguras, imagensde fundo,

Qual e a diferenca entre CSS e HTML?

HTML: e usado para estruturar conteudos.

CSS: e usado para formatar conteudos estruturados.




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 localcomo por exemplo a cor de fundo dapalavra(“background-color“).

valor: como no exemplo anterior, seria a cor dofundo(”red“).




Tipos de Aplicacao

Existem tres formas de aplicar CSS em arquivos HTML, quesao:

In-line (o atributo style).

Interno (a tag style).

Externo (link para uma folha de estilos).




In-line

In-line (o atributo style): O CSS sera aplicado neste caso nasTAGs do HTML, isto e, iremos definr a estrutura do layoutna TAG desejada.




Exemplo de aplicacao - In-line




Interno

Interno (a tag style): Neste caso atraves da TAG < style >podemos definir as estruturas dos layouts, determinando assimas propriedades desejadas.




Exemplo de aplicacao - Interno




Externo

Externo (link para uma folha de estilos): E uma especie deligacao com outro arquivo com a extensaao .css.O arquivo .css e uma folha de estilo CSS.Para efetuarmos isto, nos teremos neste caso dois arquivos umcom a extensaao .html e outro com .css. E no arquivo .htmlfaremos uma ligacao para o arquivos .css.




Exemplo de aplicacao - Externo

Deve-se inserir este codigo na TAG < head > do arquivo.html.Lembrando que todas as mudancas feitas no arquivo .cssrefletirao em mudancas na pagina final.




Estrutura

Sempre vamos obdecer o seguinte criterio:propiedade : valor

propriedade:color

valor:red

Exemplos:color:bluecolor:redfont-size:23ptfont-size:17pt




Cores e fundos

color: Podemos definir a cor de duas formas:

1: pelo respectivo nome em ingles.2: pelo ”jogo da velha”mais 6 digitos em hexadecimal.

background-color: cor do fundo da pagina.

background-image colocar como fundo da pagina umaimagem.




Cores e Fundos

background-repeat: quantidade de vezes que a imagem vaise repetir no fundo da pagina.Exitem as seguintes variacoes:

background-repeat: repeat -x: repete na horizontal.

background-repeat: repeat -y: repete na vertical.

background-repeat: repaet: repete tanto na horizontalcomo na vertical.

background-repeat: no-repeat: nao repete.




Cores e Fundos

background-attachment: determina se a imagem e fixa ouse ela rola juntamente com o elemento que a contem.

Background-attachment: scroll: a imagem rolajuntamente com a pagina.

Background-attachment: fixed: a imagem e fixa, naoimporta o quanto voce navega na pagina, a imagemsempre fica na mesma posicao na tela.




Cores e Fundos

background-position: determina a posicao da imagem no napagina.

porcentagem:100 porcento (pagina inteira).

tamanho:2cm, 20cm.

posicionamento:top, botton, center. right, left.




Cores e Fundos

background: Para a economia de codigo e para uma melhorvisualizacao podemos simplificar tudo em uma linha de codigo.




Fontes

font-family: Determinamos em uma especie de fila devarias fontes, que serao usadas no browser, na ordemdeterminada quando o indentificador da fonte nao estainstalada.

font-style: estilo de fonte.Que pode ser:

normal.italic.oblique.




Fontes

font-variant:variacao 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 porcentofont-size: 1em;




Fontes

font igualmente ao background, tambem podemos economizarcodigo.


Aula 3 - Parte Final HTML e CSS - Departamento de Informática · Equipe Instrutor do Departamento...

Documents

Transcript of Aula 3 - Parte Final HTML e CSS - Departamento de Informática · Equipe Instrutor do Departamento...