Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Introdução ao CSS Este modelo pode ser usado como arquivo de partida para apresentar materiais de treinamento em um cenário em grupo. Seções Clique com o botão direito em um slide para adicionar seções. Seções podem ajudar a organizar slides ou a facilitar a colaboração entre vários autores. Anotações Use a seção Anotações para anotações da apresentação ou para fornecer detalhes adicionais ao público. Exiba essas anotações no Modo de Exibição de Apresentação durante a sua apresentação. Considere o tamanho da fonte (importante para acessibilidade, visibilidade, gravação em vídeo e produção online) Cores coordenadas Preste atenção especial aos gráficos, tabelas e caixas de texto. Leve em consideração que os participantes irão imprimir em preto-e-branco ou escala de cinza. Execute uma impressão de teste para ter certeza de que as suas cores irão funcionar quando forem impressas em preto-e-branco puros e escala de cinza. Elementos gráficos, tabelas e gráficos Mantenha a simplicidade: se possível, use estilos e cores consistentes e não confusos. Rotule todos os gráficos e tabelas.
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 Antigamente: Site com emaranhado de tags, estilos e formatações
4
Se o cliente pedisse alteração você tinha que alterar página por página.
6
Programação em Três Partes Javascript: Inteligência
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
CSS: ESTILO 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
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
Entenda a diferença de HTML X CSS
VÍDEO hotel na china
13
Implementação 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
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>...
15
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. <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> </html>
16
Em linha 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>
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 } P text-align: center; Color: black; Font-family:arial; Seletor,Seletor,Seletor { propriedade:valor } H1,h2,h3 { color: green }
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 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
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
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 elementos p.p1 { color: red } <p class=p1>texto em vermelho</p>
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>
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.
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>
45
DIV e SPAN Título 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
Apresentações semelhantes
