aplicativos web e webdesign i ntroduÇÃo ao css. html: estrutura -dentro do html era utilizada...
TRANSCRIPT
Aplicativos Web e Webdesign
INTRODUÇÃO AO CSS
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.
Antigamente: Site com
emaranhado de tags, estilos e
formatações
HTML: ESTRUTURA
Se o cliente pedisse alteração
você tinha que alterar página
por página.
Programação em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript: Inteligência
SEM PADRÕES
✗ Extensão da Mídia Impressa
✗ Layout baseado em Tabelas
✗ Conteúdo, Apresentação e Comportamento “aninhados”
✗ Código Incompreensível
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
Prazer CSS
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
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
ENTENDA A DIFERENÇA DE HTML X CSS
VÍDEO HOTEL NA CHINA
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
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
<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.
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
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 }
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
nomeDefine um estilo único para um elemento: body, h1...
Exemplo - Elementobody{background: #ccc;font: 12pt Arial, Sans-Serif;color: #000;
}
#nomeDefine um estilo único para um identificador
Exemplo - ID#topo{width: 780px;background: #ccc url(bgtopo.jpg) repeat-x;font-size: 20pt;color: #ff0000;
}
.nomeDefine um estilo único para uma classe, que pode ser utilizada qualquer hora.
Exemplo - Classe.produto{float: right;text-align: center;font-size: 16pt;color: #ff0000;
}
ANOTE SUAS OBSERVAÇÕES
/* Comentário */
DIVIDINDO UM SITE
#topo
#bemvindo
#login
#cabecalho
#logo
#box-procura
#menu
.destaque
#slider
AGORA FAÇA VOCÊ
MESMO!
FAÇA A DIVISÃO DO SITE
EXERCÍCIOS1) Construa o layout abaixo, observando o que se pede. Salve os arquivos com nome exercicio1.html e exercicio1.css.
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.
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>
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> </div>
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