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.
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 Antigamente: Site com emaranhado de tags, estilos e formatações
Se o cliente pedisse alteração você tinha que alterar página por página.
Programação em Três Partes Javascript: Inteligência 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
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
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
Entenda a diferença de HTML X CSS VÍDEO hotel na china
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
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>...
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>
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>
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 }
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
nome Define um estilo único para um elemento: body, h1...
Exemplo - Elemento body{ background: #ccc; font: 12pt Arial, Sans-Serif; color: #000; }
#nome Define um estilo único para um identificador
Exemplo - ID #topo{ width: 780px; background: #ccc url(bgtopo.jpg) repeat-x; font-size: 20pt; color: #ff0000; }
.nome Define 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ÍCIOS 1) 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 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.
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>
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>
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.
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 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