Luiz José Hoffmann Filho ljhfilho@gmail.com HTML e CSS Luiz José Hoffmann Filho ljhfilho@gmail.com
Flutuação de elementos O que estas imagens tem em comum?
Antes de começar: Fluxo em uma página Quando o browser estiver colocando dois elementos em linha, próximos um do outro ... Texto da caixa 1 margin-right:10px Texto da caixa 2 margin-left:20px Conclusão: A largura da margem compartilhada será igual a soma das margens a direita (caixa 1) e a esquerda (caixa 2). Texto da caixa 1 Texto da caixa 2 Qual o tamanho da margem compartilhada? R: 30px
Fluxo em uma página Texto da caixa 1 Texto da caixa 1 Texto da caixa 2 Quando o browser estiver colocando dois elementos de bloco, um em cima do outro ... Texto da caixa 1 margin-bottom:10px Texto da caixa 1 Qual o tamanho da margem compartilhada? Texto da caixa 2 margin-top:20px Texto da caixa 2 R: 20px Conclusão: A altura da margem compartilhada será igual à altura da margem maior
CSS – Largura de caixa Qual a largura total de cada caixa abaixo? width:100px; margin: 10px; } .caixa2 { width:150px; border: 5px solid black; padding: 20px; margin: 10px; } .caixa3 { width:100px; border: 5px; padding: 20px; margin: 10px; box-sizing: border-box; } Largura = 100 Largura = 150 Largura = 100
Flutuação Qualquer elemento flutuante precisa ter uma largura Foge do fluxo normal da página Os elementos em linha do bloco abaixo do bloco flutuante respeitam os limites deste último
Exercício: Laboratório Construir o layout abaixo. OBS: Largura da caixa cinza DEVE ser alterada ao redimensionar janela do navegador. <html> <head> <style type="text/css"> #menu { width:350px; background-color:pink; float:left; } #informacoes { background-color:#999999; margin-left:350px; </style> </head> <body> <div id="menu"> menu<br> </div> <div id="informacoes"> Informacoes<br> </body> </html>
Exercício: Laboratório Construir o layout abaixo. OBS: Largura da caixa cinza DEVE ser alterada ao redimensionar janela do navegador. <head> <style type="text/css"> #menu { width:350px; background-color:pink; float:right; } #informacoes { background-color:#999999; margin-right:350px; </style> <link rel="stylesheet" type="text/css" href="estilos.css"> </head> <body> <div id="menu"> menu<br> </div> <div id="informacoes"> Informacoes<br> </body> </html>
Exercício: Laboratório Construir o layout abaixo. OBS: Apenas a caixa cinza pode ser redimensionada. Layout “gelatina” com 100 pixels das margens (esquerda e direita). <head> <style type="text/css"> width:1000px; #caixa { margin:auto; } width:350px; #menu { background-color:pink; float:left; background-color:#999999; #informacoes { margin-left:350px; </style> </head> <link rel="stylesheet" type="text/css" href="estilos.css"> <body> <div id="menu"> <div id="caixa"> menu<br> </div> <div id="informacoes"> Informacoes<br> </body> </html>
Layout congelado Layouts vistos até o momento: líquidos (expandem de acordo com a largura do navegador) Layout congelado: o layout fica bloqueado independente da largura da janela do browser
Exercício: Laboratório Construir o layout abaixo. OBS: Larguras das caixas (rosa e cinza) NÃO devem ser alteradas ao redimensionar janela do navegador. Largura total: 1000 pixels. Largura do menu: 300 pixels. <head> <style type="text/css"> width:1000px; #caixa { margin:auto; } width:350px; #menu { background-color:pink; float:left; background-color:#999999; #informacoes { margin-left:350px; </style> </head> <link rel="stylesheet" type="text/css" href="estilos.css"> <body> <div id="menu"> <div id="caixa"> menu<br> </div> <div id="informacoes"> Informacoes<br> </body> </html>
Posicionamento absoluto Posicionar elementos com precisão na página Pode ser utilizado para criar efeitos na página além da criação de multicolunas Se (posicionamento do elemento == absoluto) Então Navegador o remove do fluxo
Posicionamento absoluto O navegador coloca um elemento na posição indicada pelas propriedades top e right (ou também, bottom e left) em relação a página. Elementos de uma página não tem a menor ideia da existência de um elemento com posicionamento absoluto.
Posicionamento absoluto Que elemento fica por cima? Aquele que aparecer primeiro na página (.html). Como mudar esta sequência sem alterar o código HTML? R: Propriedade z-index Solução: Z-index
Posicionamento absoluto Qual o valor padrão para a propriedade position? static (segue o fluxo normal da página). Quais elementos podem ser posicionados de maneira absoluta? Elementos de linha e de bloco
Outros posicionamentos Quais são os outros valores para position? (static, absolute, fixed e relative) Static e Absolute: já apresentados. Fixed: Coloca um elemento em um local que seja relativo à janela do navegador (ao invés de ser em relação a página). Portanto, os elementos fixos nunca podem se mover. Se o valor da propriedade top for superior a altura da janela do navegador o elemento desaparece. Pode ser atribuido um número negativo ao valor da propriedade left (por exemplo, left: -90px;), desta forma o elemento será deslocado 90 pixels à esquerda da janela do navegador.
Posicionamento absoluto Relative: Coloca um elemento no fluxo normal da página, mas recua- o antes de exibí-lo na página. Comumente usado para posicionamento mais avançado e para efeitos especiais. Pode ser atribuido um número negativo ao valor da propriedade left (por exemplo, left: -90px;), desta forma o elemento será deslocado 90 pixels à esquerda da janela do navegador.
Construir o layout abaixo utilizando CSS? Utilizar div´s (id´s)
Qual a diferença visual entre os dois layouts? Semânticamente eles são diferentes (próximo slide)
Layout 2: uso de tags da versão 5 do HTML #header header #nav #section nav section #footer footer Layout 1: uso de id´s Layout 2: uso de tags da versão 5 do HTML
Utilize HTML 5 e CSS para construção do layout abaixo
#menuInferior { position: fixed; bottom:0px; left:50%; ---- O segredo está aqui margin-left:-250px; ---- E aqui (Largura: 500px, portanto: -250px) background-color:#990000; width:500px; padding:10px; text-align:center; color:#FFFF99; border:#FFFF66 2px solid; border-bottom:none; }
Layout com posicionamento absoluto 100px CSS: === } margin:0px; body { background-color:#CCCCCC; #principal { border:#FFFFFF dashed 1px; margin: 0px 320px 0px 100px; padding:10px; position: absolute; #barraLateral { background-color:#000099; right:100px; top: 0px; color:#FFFFFF; padding: 0px 10px 0px 10px; width:200px; ==== HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <title>Titulo da pagina</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <head> </head> <link rel="stylesheet" type="text/css" href="estilos.css"> <p> <div id="principal"> <body> Aqui jazem algumas informações. Aqui jazem algumas informações. Aqui jazem algumas informações. Aqui jazem algumas informações. </div> </p> <div id="barraLateral"> Sistemas para Internet. Sistemas para Internet. </html> </body>
Layout com posicionamento absoluto
http://www.free-css.com/
Layout com HTML 5 http://www.w3schools.com/html/html5_semantic_elements.asp
<header> Descreve o cabeçalho de um documento ou seção Deve ser utilizado como um container para introduzir um conteúdo (W3Schools) Geralmente contém cabeçalho de seções (h1...h6), mas não é obrigatório (W3C) Também pode ser utilizado para encapsular uma tabela de conteúdos (campo de buscas, logos relevantes, etc) (WC3) https://www.w3.org/TR/html/sections.html#the-header-element
<header> Pode haver vários elementos <header> em um documento (W3Schools) Não pode ser colocado dentro de <footer>, <address> ou dentro de outro <header>. (W3Schools) http://www.w3schools.com/tags/tag_header.asp
<nav> Define um conjunto de links de navegação (bloco de links) Nem todos os links devem estar dentro de <nav> Exemplo: http://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-tags
<section> Definir uma seção num documento “A section is a thematic grouping of content, typically with a heading” (W3C) Definido como um bloco de elementos relacionados Exemplo:
<article> Especifica conteúdo independente, auto-suficiente. Potenciais fontes para o elemento <article>: Postagem de fórum Postagem de blog Comentários
<aside> Definir algum conteúdo adicional a um conteúdo (deve estar relacionado) O fato do conteúdo estar localizado ao lado esquerdo/direito de outro conteúdo não é razão suficiente para utilizá-lo. Dica: pode ser colocado como barra lateral de um artigo http://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-tags
Layout com HTML 5 Exemplo <aside>:
<footer> Definir um rodapé para um documento ou seção Poder haver vários em um documento (dentro de seções). Geralmente um rodapé para o documento. Tipicamente contém informações sobre: Autor, copyright, contato, mapa do site, documentos relacionados, etc http://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-tags
Exemplos de marcações http://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-tags
Exemplos de marcações http://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-tags
Exemplos de marcações http://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-tags
Responsividade http://www.w3schools.com/html/html_responsive.asp
CSS - Responsividade A página web se adapta ao tamanho das telas dos dispositivos Utilizaremos HTML e CSS (não haverá programação) Responsividade web design: quando CSS + HTML são utilizados para redimensionar, ocultar, encolher, aumentar ou mover o conteúdo da página para que ela tenha uma boa aparência em qualquer tela.
Com biblioteca (Bootstrap*) CSS - Responsividade Exemplos: Sem biblioteca Com biblioteca (Bootstrap*) Exemplos: Site responsivo (sem biblioteca): <!DOCTYPE html> <html lang="en-US"> <head> <style> .article { float: left; margin: 5px; padding: 5px; width: 300px; height: 300px; border: 1px solid black; } </style> </head> <body> <h1>W3Schools</h1> <h2>Resize this responsive page!</h2> <div class="article"> <h3>About W3Schools</h3> <p>W3Schools is a web developer's site. It provides tutorials and references covering many aspects of web programming, including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.</p> <p>W3schools contains thousands of code examples. By using an online editor, readers can edit examples experimentally.</p> </div> <div class="article"> <h3>Most Wanted Tutorials</h3> <p>HTML5 Tutorial</p> <p>How to build your web site with HTML5</p> <p>CSS3 Tutorial</p> <p>JavaScript Tutorial</p> </div> <div class="article"> <h3>About This Demo</h3> <p>This demo is about responsive design.</p> <p>Try to make the page smaller or wider, to see responsive design in action.</p> </div> </body> </html> ====================================== Com biblioteca: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="jumbotron"> <h1>W3Schools Demo</h1> <p>Resize this responsive page!</p> </div> <div class="row"> <div class="col-md-4"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="col-md-4"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="col-md-4"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </div> </div> </body> </html> * Bootstrap é uma das bibliotecas para HTML, CSS e JavaScript mais famosas de responsividade de sites
CSS - Responsividade Viewport Área visível da página web do usuário HTML 5: introdução de um método para controlar o viewport, através de <meta> <meta> oferece instruções ao navegador de como controlar as dimensões e escalas
CSS - Responsividade Viewport (exemplo) <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> img { max-width:100%; height:auto; } </style> </head> <body> <img src="montanha.jpg" alt="Chania"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p> </body> </html>
CSS – Sistema de grade Grid-View: Páginas são divididas em colunas Facilita a criação das páginas web Facilita a colocação de elementos na página Um grid-view responsivo geralmente tem 12 colunas http://www.w3schools.com/css/tryresponsive_grid.htm
CSS - Sistema de grade Como construir um Grid-View? 100% de largura / 12 = número de colunas
CSS - Sistema de grade Como construir um Grid-View? Box-sizing = border-box para todas as caixas As colunas dentro de uma linha flutuarão à esquerda Aproveitar este slide e apresentar outros seletores CSS: http://www.w3schools.com/cssref/css_selectors.asp http://www.w3schools.com/cssref/css_selectors.asp
CSS - Sistema de grade Como construir um Grid-View? O somatório do número de colunas dentro de uma linha deve corresponder a 12:
CSS - Sistema de grade Como construir um Grid-View? Elementos de uma linha (colunas) não seguem o fluxo da página (estão flutuando), ou seja, elementos quem logo abaixo serão posicionados abaixo da linha (serão ocultados). Para resolver este problema será utilizado:
Exercício: Laboratório Construir o layout mostrado na figura abaixo. Crie uma biblioteca CSS responsiva e utilize as novas tags HTML 5 para diagramação da página. Aplique efeitos no menu ao passar o cursor do mouse. <!DOCTYPE html> <head> <html> * { <style> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> } box-sizing: border-box; background-color: yellow; header { nav { min-width: 150px; background-color: blue; background-color: gray; section { ul { padding: 0; margin: 0; list-style: none; li a { text-decoration: none; padding:10px; display: block; color: white; li a:hover { color:blue; background-color:white; .col-2 {width:16.66%} .col-1 {width:8.33%} .col-5 {width: 41.66%;} .col-4 {width: 33.33%;} .col-3 {width: 25%;} .col-8 {width: 66.66%;} .col-7 {width: 58.33%;} .col-6 {width: 50%;} .col-11 {width: 91.66%;} .col-10 {width: 83.33%;} .col-9 {width: 75%;} .col-12 {width: 100%;} padding:15px; float:left; [class*="col-"] { content:""; .linha:after { display:block; clear:both; </style> </head> <h1>Título geral</h1> <header class="linha col-12"> <body> </header> <div class="linha"> <li><a href="#">Opção 1</a></li> <ul> <nav class="col-3"> <li><a href="#">Opção 2</a></li> </ul> <li><a href="#">Opção 4</a></li> <li><a href="#">Opção 3</a></li> </nav> <section class="col-9"> <p> <h2>Subtítulo 1</h2> <article> </p> Informações do parágrafo. Informações do parágrafo. Informações do parágrafo. Informações do parágrafo. </article> <h2>Subtítulo 2</h2> </body> </div> </section> </html>
CSS - Responsividade Media Query Técnica introduzida na versão 3 Propriedades CSS serão executadas sob certas condições Exemplos:
CSS - Responsividade Media Query Sintaxe (tipos de mídia):
CSS - Responsividade Media Query Características das mídias Fonte: (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
CSS - Responsividade Media Query Exemplos de uso de Media Queries http://www.w3schools.com/css/css3_mediaqueries_ex.asp
CSS3 + HTML5: imagens O elemento <picture> do HTML5 Utilizado para definir várias imagens (várias fontes, uma imagem) srcset: obrigatório. Define a fonte da imagem media: opcional. Aceita media queries do CSS3 <img>: para navegadores que não oferecem suporte ao <picture> Exemplo:
Exercício: Laboratório Construir o layout mostrado na figura abaixo. As imagens deverão ser alteradas conforme a resolução. Desktop Tablet Smartphone Código HTML: ========= <html> <!DOCTYPE html> <head> <style> <link rel="stylesheet" type="text/css" href="estilos.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> } background-color: pink; header { background-color: blue; nav { background-color: gray; section { background-color:red; aside { </style> </head> <body> </header> <h1>Título geral</h1> <header class="linha col-12 col-m-12"> <div class="linha"> <li><a href="#">Opção 1</a></li> <ul class="menu menuV menuCor1"> <nav class="col-2 col-m-2"> <li><a href="#">Opção 2</a></li> </ul> <li><a href="#">Opção 4</a></li> <li><a href="#">Opção 3</a></li> </nav> <article> <section class="col-5 col-m-10"> <h2>Subtítulo 1</h2> </p> Informações do parágrafo. Informações do parágrafo. Informações do parágrafo. Informações do parágrafo. <p> <source srcset="smile2.jpg" media="(max-width:800px)"> <source srcset="smile1.jpg" media="(max-width:400px)"> <picture> <img src="smile1.jpg"> <source srcset="smile3.jpg"> </article> </picture> <h2>Subtítulo 2</h2> </section> <p> Outras informações serão colocadas aqui. Outras informações serão colocadas aqui. Outras informações serão colocadas aqui. </p> <aside class="col-5 col-m-12"> </aside> </html> </body> </div> ======== Código CSS: To change this license header, choose License Headers in Project Properties. /* */ and open the template in the editor. To change this template file, choose Tools | Templates Author : wilton.filho Created on : 22/02/2016, 10:09:07 box-sizing: border-box; * { list-style: none; ul.menu { overflow: auto; padding: 0; margin: 0; border:red 1px solid; ul { padding:10px; ul.menu li a { text-decoration: none; display: block; ul.menuV li a { display: inline; ul.menuH li { background-color: black; ul.menuCor1 a { color: white; color: black; background-color: white; ul.menuCor1 a:hover { /* Mobile first*/ float:left; width:100%; [class*="col-"] { @media only screen and (min-width: 400px) { /* Tablet */ .col-m-3 {width: 25%;} .col-m-2 {width:16.66%} .col-m-1 {width:8.33%} .col-m-4 {width: 33.33%;} .col-m-7 {width: 58.33%;} .col-m-6 {width: 50%;} .col-m-5 {width: 41.66%;} .col-m-8 {width: 66.66%;} .col-m-11 {width: 91.66%;} .col-m-10 {width: 83.33%;} .col-m-9 {width: 75%;} .col-m-12 {width: 100%;} .col-1 {width:8.33%} @media only screen and (min-width: 800px) { /* Desktop */ .col-2 {width:16.66%} .col-5 {width: 41.66%;} .col-4 {width: 33.33%;} .col-3 {width: 25%;} .col-8 {width: 66.66%;} .col-7 {width: 58.33%;} .col-6 {width: 50%;} .col-10 {width: 83.33%;} .col-9 {width: 75%;} .col-12 {width: 100%;} .col-11 {width: 91.66%;} @media only screen and (orientation: landscape) { background-color:green; body { clear:both; content:""; .linha:after { display:block;
CSS - Responsividade Criação de framework próprio Exemplos de frameworks: Bootstrap (Tutorial no W3Schools) w3.css