Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada...

45
Aplicativos Web e Webdesign INTRODUÇÃO AO CSS

Transcript of Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada...

Page 1: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

Aplicativos Web e Webdesign

INTRODUÇÃO AO CSS

Page 2: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

HTML: ESTRUTURA

-Dentro do html era utilizada cores, tipos de fontes!-Ele não pode ser utilizado para isso; -É usado para determinar a estrutura do site.

Page 3: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

Antigamente: Site com

emaranhado de tags, estilos e

formatações

HTML: ESTRUTURA

Page 4: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

Se o cliente pedisse alteração

você tinha que alterar página

por página.

Page 5: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.
Page 6: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

Programação em Três Partes

Html: Conteúdo

CSS: Estilo

Javascript: Inteligência

Page 7: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

SEM PADRÕES

✗ Extensão da Mídia Impressa

✗ Layout baseado em Tabelas

✗ Conteúdo, Apresentação e Comportamento “aninhados”

✗ Código Incompreensível

Page 8: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

COM PADRÕES

✔ Acessível de qualquer dispositivo

✔ Layout baseado em CSS

✔ Separação entre

Conteúdo, Apresentação e Comportamento

✔ Código Acessível

Page 9: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

Prazer CSS

Page 10: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

10

CSS(Cascading Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML

Vantagens: Grande liberdade de formatação Maior produtividade Maior facilidade de atualização

CSS: ESTILO

Page 11: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

VANTAGENSCarregamento mais rápido

Menores custos com hospedagem

Melhor Consistência Visual

Redesign mais barato e eficiente

Melhores resultados nos Mecanismos de Buscas

Maior acessibilidade

Page 12: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

ENTENDA A DIFERENÇA DE HTML X CSS

VÍDEO HOTEL NA CHINA

Page 13: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

13

Os estilos podem ser inseridos nos documentos de três maneiras diferentes: Externas - Por meio de um link direcionado para um arquivo de style

sheet em separado, funcionando para uma ou mais páginas web.

Internas - Por meio de uma inserção de um style sheet numa única página web

Em linha - Pelo acréscimo de atributos de estilo inline em algumas tags

Implementação

Page 14: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

14

Externas

Neste caso temos um arquivo exterior que pode ser associado a vários arquivos html

Exemplo do que temos de escrever no arquivo html

<html><head><link rel=“STYLESHEET” href=“estilo.css” ><title>...</title></head><body>...

Page 15: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

15

<html><head><style type=“text/css”>h1 {color:#00ff00}h2 {color:#ffff00}P {color: #ffffff}</style></head><body><h1>nivel 1</h1><h2>nivel 2</h2><p>paragrafro</p><body></html>

Internas

Definidas num documento específico. Permitem aplicar o estilo apenas a esse documento. O elemento style têm de ser escrito dentro do head.

Page 16: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

16

Pelo acréscimo de atributos de estilo inline em algumas tags como <p>, <div>, ou <span>

Exemplo<div style="margin-left: 0.5in; font-size: 10pt">Este deve ser um bloco indentado com algum<span style="font-weight: bold; background: #FFFF00"> texto selecionado</span>dentro dele</div>

Em linha

Page 17: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

17

Sintaxe

Sintaxe Exemplo

Seletor { propriedade:valor} Body { background-color: #FFFFFF }

Seletor { propriedade:valor; propriedade:valor}

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

Seletor { propriedade:valor; propriedade:valor;Propriedade:valor}

P {text-align: center;Color: black;Font-family:arial;}

Seletor,Seletor,Seletor{ propriedade:valor }

H1,h2,h3{ color: green }

Page 18: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

18

Sintaxe e Tipos de Seletores

Exemplo:

arquivo HTML no body

<h1>Tecnologia dos Media</h1>

<p> Informática </p>

arquivo CSS

H1 { color:red }

P { color:blue }

Resultado:

Tecnologia dos MediaInformática

Page 19: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

nomeDefine um estilo único para um elemento: body, h1...

Page 20: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

Exemplo - Elementobody{background: #ccc;font: 12pt Arial, Sans-Serif;color: #000;

}

Page 21: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

#nomeDefine um estilo único para um identificador

Page 22: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

Exemplo - ID#topo{width: 780px;background: #ccc url(bgtopo.jpg) repeat-x;font-size: 20pt;color: #ff0000;

}

Page 23: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

.nomeDefine um estilo único para uma classe, que pode ser utilizada qualquer hora.

Page 24: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

Exemplo - Classe.produto{float: right;text-align: center;font-size: 16pt;color: #ff0000;

}

Page 25: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

ANOTE SUAS OBSERVAÇÕES

/* Comentário */

Page 26: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

DIVIDINDO UM SITE

Page 27: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.
Page 28: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

#topo

Page 29: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

#bemvindo

Page 30: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

#login

Page 31: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

#cabecalho

Page 32: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

#logo

Page 33: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

#box-procura

Page 34: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

#menu

Page 35: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

.destaque

Page 36: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

#slider

Page 37: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

AGORA FAÇA VOCÊ

MESMO!

Page 38: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

FAÇA A DIVISÃO DO SITE

Page 39: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

EXERCÍCIOS1) Construa o layout abaixo, observando o que se pede. Salve os arquivos com nome exercicio1.html e exercicio1.css.

Page 40: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

Título “SISTEMAS PARA INTERNET“ em formato de cabeçalho e centralizado.b) Após o cabeçalho incluir uma linha horizontal tamanho 2 e cor cinza.c) O texto “DISCIPLINAS - II SEMESTRE” na fonte Arial, negrito, tamanho 20 e corVermelha.d) Denominar as disciplinas (1,2 e 3), na fonte Arial, tamanho 13 e cor Verde.e) O texto “Esta é a primeira aula de HTML” deve ser um texto pré-formato, fonteArial.

Page 41: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

41

Tipos de Seletores

Seletores de classe

Um Seletor de classe permite identificar um conjunto de ocorrências de um elemento e atribuir-lhes um estilo comum.A classe pode ser :

• genérica - .rd{ color:blue}

<p class=rd>texto em azul</p><h1 class=rd>texto tambem em azul</h1>

• um tipo de elementos, ou seja só fica associada a um tipo de elementosp.p1 { color: red }

<p class=p1>texto em vermelho</p>

Page 42: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

42

Tipos de Seletores

Seletores de ID

Um Seletor de ID permite identificar uma única ocorrência de um elemento HTML. Os Seletores ID são criados pelo carácter # seguido do nome.

#nome { color:blue; background: black }

<p id=nome>Só este elemento é que é identificado como nome</p>

Page 43: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

43

Herança

Um aspecto importante de algumas propriedades é o fato de se propagarem para os elementos "filhos". Exemplo: <body>

<h1>Título</h1> <p>Parágrafo: texto, texto, texto, texto, texto.</p>

</body>

body { font-family: Verdana, Arial, sans-serif; font-size: 14px; }

Neste exemplo, não é necessário voltar a definir estas propriedades para os elementos H1 e P. Todos os elementos "filhos" do BODY vão herdar as propriedades de texto definidas para o BODY.

Page 44: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

44

DIV e SPAN

Existem dois elementos genéricos que não têm significado semântico nem produzem nenhum efeito, mas permitem definir secções/blocos e são muito usados com CSS. Permitem agrupar conteúdo em unidades lógicas:

<div>: quebra o fluxo normal do documento

<span>:mantém o fluxo normal do conteúdo

<div class="zonaesquerda"> <p>texto, texto, texto</p>

</div> <div class="zonacentral"> <h1>Título</h1>

<p> texto, texto, texto, <span class="nota">texto, texto</span>, texto</p> <p> texto, texto, texto, texto, texto, texto</p> </div>

Page 45: Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS. HTML: ESTRUTURA -Dentro do html era utilizada cores, tipos de fontes! -Ele não pode ser utilizado para.

45

DIV e SPAN

Css

.Zonaesquerda { color: green }

.zonacentral { color: yellow }

.nota { color: red }

Resultado:

texto, texto, texto

Títulotexto, texto, texto, texto, texto textotexto, texto, texto, texto, texto, texto