A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

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.

Apresentações semelhantes


Apresentação em tema: "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."— Transcrição da apresentação:

1 Aplicativos Web e Webdesign I NTRODUÇÃO AO CSS

2 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.

3 Antigamente: Site com emaranhado de tags, estilos e formatações HTML: ESTRUTURA

4 Se o cliente pedisse alteração você tinha que alterar página por página.

5

6 Programação em Três Partes Html: Conteúdo CSS: Estilo Javascript: Inteligência

7 SEM PADRÕES ✗ Extensão da Mídia Impressa ✗ Layout baseado em Tabelas ✗ Conteúdo, Apresentação e Comportamento “aninhados” ✗ Código Incompreensível

8 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

9 Prazer CSS

10 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

11 VANTAGENS Carregamento mais rápido Menores custos com hospedagem Melhor Consistência Visual Redesign mais barato e eficiente Melhores resultados nos Mecanismos de Buscas Maior acessibilidade

12 E NTENDA A DIFERENÇA DE HTML X CSS VÍDEO HOTEL NA CHINA

13 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

14 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......

15 15 h1 {color:#00ff00} h2 {color:#ffff00} P {color: #ffffff} nivel 1 nivel 2 paragrafro 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.

16 16 Pelo acréscimo de atributos de estilo inline em algumas tags como,, ou Exemplo Este deve ser um bloco indentado com algum texto selecionado dentro dele Em linha

17 17 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 } P { text-align: center; Color: black; Font-family:arial; } Seletor,Seletor,Seletor { propriedade:valor } H1,h2,h3 { color: green }

18 18 Sintaxe e Tipos de Seletores Exemplo: arquivo HTML no body Tecnologia dos Media Informática arquivo CSS H1 { color:red } P { color:blue } Resultado: Tecnologia dos Media Informática

19 nome Define um estilo único para um elemento: body, h1...

20 Exemplo - Elemento body{ background: #ccc; font: 12pt Arial, Sans-Serif; color: #000; }

21 #nome Define um estilo único para um identificador

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

23 .nome Define um estilo único para uma classe, que pode ser utilizada qualquer hora.

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

25 ANOTE SUAS OBSERVAÇÕES /* Comentário */

26 DIVIDINDO UM SITE

27

28 #topo

29 #bemvindo

30 #login

31 #cabecalho

32 #logo

33 #box-procura

34 #menu

35 .destaque

36 #slider

37 AGORA FAÇA VOCÊ MESMO!

38 FAÇA A DIVISÃO DO SITE

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

40 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 cor Vermelha. 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, fonte Arial.

41 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} texto em azul texto tambem em azul um tipo de elementos, ou seja só fica associada a um tipo de elementos p.p1 { color: red } texto em vermelho

42 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 } Só este elemento é que é identificado como nome

43 43 Herança Um aspecto importante de algumas propriedades é o fato de se propagarem para os elementos "filhos". Exemplo: Título Parágrafo: texto, texto, texto, texto, texto. 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.

44 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: : quebra o fluxo normal do documento :mantém o fluxo normal do conteúdo texto, texto, texto Título texto, texto, texto, texto, texto, texto texto, texto, texto, texto, texto, texto

45 45 DIV e SPAN Css.Zonaesquerda { color: green }.zonacentral { color: yellow }.nota { color: red } Resultado: texto, texto, texto Título texto, texto, texto, texto, texto texto texto, texto, texto, texto, texto, texto


Carregar ppt "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."

Apresentações semelhantes


Anúncios Google