Construindo layouts com CSS

Construindo layoutde sites comCSS XI JORNADA DE INFORMÁTICA UNESP - BAURU Talita Pagani @talitapagani

Agenda Introdução Inserindo o CSS em documentos HTML Por que Folhas de Estilo em Cascata? Seletores Propriedades O Box Model Na Prática: estilizando um documento XHTML com CSS Diretrizes para melhorar o desenvolvimento de layouts O que vem por aí com o CSS 3

Introdução Cascading Style Sheets ou Folhas de Estilo em Cascata Linguagem de formatação para documentos HTML e XHTML Separa o estilo do conteúdo Criação e manutenção do design ficam mais fáceis e consistentes

Introdução Principais especificações do CSS CSS 1 (1996, 1999): continha apenas propriedades básicas CSS 2.1: versão mais utilizada atualmente CSS 3: em desenvolvimento, contém novas propriedades, mas já pode ser utilizada

Introdução estilo.css arquivo.html arquivo.html

Inserindo o CSS em documento HTML Inline Insere as definições de estilo diretamente no elemento (não recomendado) <p style=”color: #F00;”>Conteúdo</p> Embeded O código é embutido diretamente em um arquivo HTML <style type=”text/css”> p { color: #F00; } </style> Arquivo Externo Todas as definições de estilo ficam centralizadas em um arquivo externo *.css que deve ser linkado aos arquivos HTML que a utilizarão, dentro da tag <head>. <link rel="stylesheet" type="text/css" href="structure.css" />

Por que Folhas de Estilo em Cascata? Prioridade e precedência de estilos Quando várias regras são aplicadas a uma elemento, entra em cena as regras de precedência em cascata: Estilo inline (maior precedência) Folha de estilo embutida Folha de estilo linkada Estilo padrão do navegador (menor precedência)

Seletores seletor{propriedade: valor; } Seletor que define o elemento que receberá o estilo Um atributo que será alterado (bordas, margem, fonte, espaçamento, etc.) Valor da propriedade, podendo ser numérico, texto, medida, código, etc. Declaração Bloco de Declarações

Seletores Um seletor pode ser: Uma tag HTML (ex.: p {...}, div {...}, h1 {...}, etc.) Uma classe Definição de estilo que pode ser utilizada por mais de um elemento na mesma página, criando assim uma categoria . Começam sempre com um ponto e são utilizadas no atributo class do HTML Um ID constitui uma definição/identificação única e só pode ser utilizada para apenas um elemento em cada página. Começam com # e são utilizados na propriedade id do HTML

Seletores Um seletor pode ser: Seletores mistos (ex.: p.destaque {...}, div#header {...}) Seletores agrupados (ex.: h1, p, div {...} ) Se vários elementos possuem as mesmas propriedades, pode-se aplicá-las em uma única declaração, separando os seletores com vírgula Seletores encadeados (ex.: #coluna div p {...}) Também chamados de seletores contextuais, definem uma regra para especificar o estilo de um elemento dentro de outros elementos Pseudo-classes (ex.: :link, :active, :hover, :visited, :first-child, etc.) E combinações de todas essas formas

Principais Propriedades Plano de Fundo: background-color background-image background-repeat (repeat, repeat-x, repeat-y, no-repeat) background-attachment (fixed, scroll) background-position Forma abreviada: background background: #FC0 url(imagem.gif) no-repeat center top;

Principais Propriedades Bordas border-bottom (<width> <style> <color>) border-bottom-color border-bottom-style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit) border-bottom-width border-left border-right border-top Todas juntas: border border-color border-style border-width outline-color outline-style outline-width border: 2px solid #FF9900; border: 2px solid #FF9900; border-right-color: #4A7EBB; border-bottom-color: #4A7EBB; border: 2px solid #FF9900; outline: 1px solid #000000;

Principais Propriedades Dimensões height min-height max-height width min-width max-width

Principais Propriedades Texto Font-style Font-variant font-weight font-size line-height font-family Forma abreviada: font font: italic bold 12px/18px Arial, Helvetica, sans-serif;

Principais Propriedades Texto color color: #036; letter-spacing text-align (center, left, right, justify) text-decoration (none, underline, overline, line-through, blink) text-indent text-transform (none, capitalize, uppercase, lowercase) white-space (normal, pre, nowrap)

Principais Propriedades Lista list-style-image (url(“imagem")) list-style-position (inside, outside) list-style-type (none, circle, disc, square, armenian, decimal, decimal-leading-zero, georgian, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman) Forma abreviada: list-style list-style: insidesquare url("/images/blueball.gif");

Principais Propriedades Margens margin-bottom margin-left margin-right margin-top Forma abreviada: margin (top rightbottomleft) margin: 10px 5px 2px 150px; margin: 10px auto;

Principais Propriedades Espaçamento interno padding-bottom padding-left padding-right padding-top Forma abreviada: padding(top rightbottomleft) padding: 8px 10px 8px 20px; padding: 10px 5px;

Principais Propriedades Posicionamento float (left, right, none) clear (left, right, both, none) display (block, inline, inline-block, inline-table, list-item, run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group, none) overflow (visible, hidden, scroll, auto) position (absolute, fixed, relative, static) top right left bottom visibility (visible, hidden, collapse) z-index

Principais Propriedades Pseudo-classes :active :focus :hover :link :visited :first-child :first-letter :after :before

O Box Model Padrão de renderização ou apresentação visual de um box (container de informações) segundo a formatação CSS.

O Box Model Se uma div possuir largura e altura de 200 pixels e paddingde 10 pixels em todas as direções, o navegador irá mostrar uma caixa com 220 pixels de largura e altura

Na Prática Iremos estilizar um documento HTML pronto utilizando as propriedades CSS

Na Prática .header .navbar .content .footer

Na Prática .mainContent .sidebar

Na Prática Baixar os arquivos do minicurso em http://www.talitapagani.com/material/site_minicurso.zip e descompactar na sua máquina Abrir o Dreamweaver Ctrl+N para criar um nova arquivo do tipo CSS

Na Prática Salve o arquivo com o nome estilo.css na mesma pasta do arquivo index.html Abrir o arquivo index.html no Firefox, no Internet Explorer e no IETester

Na Prática Começando: Declaração Reset * { border: none; margin: 0; padding: 0; }

Na Prática body { background: #069 url(images/bg_body.jpg) repeat-x 0 0; font: normal 12px/18px Arial, Helvetica, sans-serif;padding: 20px; } a, a:visited { color: #069; } a:hover { color: #333; text-decoration: none; }

Na Prática /* Estrutura */ .wrapper { background: #FFF; border: 1px solid #666; height: 100%; margin: 0 auto 0 auto; overflow: hidden;padding: 10px; width: 980px; }

Na Prática .header { height: 100%; position: relative; width: 100% } .header img { vertical-align: middle; }

Na Prática .content { height: 100%; overflow: hidden; padding: 10px 0 10px 0; } .mainContent { float: left; width: 760px; } .sidebar { float: left;margin: 0 0 0 20px; width: 200px; } .footer { border-top: 3px solid #999; clear: both; }

Na Prática /* Caixa de Busca */ .search { bottom: 80px; position: absolute; right: 0px; width: 400px; } .search input { border: 1px solid #999; padding: 3px; width: 300px; } .search button { background: #F60; border: 2px outset #F60; color: #FFF; font: bold 14px Arial, Helvetica, sans-serif; margin: 0 0 0 10px; }

Na Prática /* Menu de Navegação */ .navbar { background: url(images/bg_navbar.jpg) repeat-x 0 0; font-size: 14px; height: 42px; margin: 0; } .navbarli { float: left;list-style: none; margin: 0 10px 0 10px; } .navbarli a, .navbarli a:visited { color: #FFF; display: block; font-weight: bold; line-height: 42px; text-decoration: none; } .navbar .menuActive { margin-top: 5px; } .navbar .menuActive a, .navbar .menuActive a:visited { background: #FFF; color: #F60; padding: 0 10px 0 10px; line-height: 37px; }

Na Prática /* Menu do footer */ .footerNavbar { padding: 10px 0 10px 0; } .footerNavbarli { float: left; list-style: none; margin: 0 10px 0 10px; } .footerNavbarli a, .footerNavbarli a:visited { font-size: 11px; font-weight: bold; } .footerNavbar .copyright { float: right; }

Na Prática /* Tipografia */ h2 { color: #666; font-size: 32px; font-weight: normal; line-height: 40px; margin: 10px 0 10px 0; } h2 strong { color: #000; } h3 { border-bottom: 1px solid #CCC; font-size: 18px; font-weight: normal; line-height: 24px; margin: 10px 0 10px 0; }

Na Prática /* Notícias */ .headline { background: #E1E9FF; margin: 0 0 10px 0; padding: 10px; width: 180px; } .headline p { background: #FFF; border: 1px solid #999; font-size: 11px; height: 100%; overflow: hidden; padding: 5px; } .headline img { border: 1px solid #CCC; padding: 1px; } .imgSales { float: left; margin-right: 5px; } .imgComputer { float: right; margin-left: 5px; }

Na Prática /* Serviços */ .services { float: left; list-style: none; margin: 0 0 0 10px; padding: 0; width: 31%; } .services li { background: #EEE; clear: left; float: left; padding: 0 5px 0 5px; margin: 0 0 5px 0; width: 95%; } .services li a, .services li a:visited { display: block; }

Diretrizes para melhorar o desenvolvimento de layouts Construa o layout por etapas e ao concluir a etapa teste em diferentes navegadores Desenvolva para os navegadores modernos e depois adapte para os antigos Valide seu código HTML e CSS Evite hacks para determinados navegadores Modularizar CSS quando necessário @import url(“estilo.css”) Múltiplas folhas de estilo

O que vem por aí com CSS3 Maior controle de formas e efeitos Maior independência do uso de imagens, principalmente PNG para criar transparências Estilizar elementos de acordo com determinados atributos da tag HTML Concentrar a formatação cada vez mais apenas no CSS, diminuindo o uso de imagens e scripts

O que vem por aí com CSS3 Cantos arredondados: border-radius #div1 { border: 1px solid #699; -moz-border-radius: 20px; -webkit-border-radius: 20px; }

O que vem por aí com CSS3 Sombras em elementos de bloco: box-shadow #div2 { border: 1px solid #699; -moz-box-shadow: 5px 5px 5px #b6ebf7; -webkit-box-shadow: 5px 5px 5px #b6ebf7; }

O que vem por aí com CSS3 Sombras em textos: text-shadow p.shadow { text-shadow: 2px 2px2px #000; }

O que vem por aí com CSS3 Transparência: opacity e rgba #div3 { background-color: rgba(110, 142, 185, .4); } #div3 { background-color: #6e8eb9; opacity: 0.4; }

O que vem por aí com CSS3 Colunas: column-count, column-gap, column-rule #div4 { /* borda inserida para facilitar o entedimento */ border: 1px solid #699; -moz-column-count: 2; -moz-column-gap: 20px; -moz-column-rule: 1px solid #6e8eb9; -webkit-column-count: 2; -webkit-column-gap: 20px; -webkit-column-rule: 1px solid #6e8eb9; }

O que vem por aí com CSS3 Múltiplos backgrounds: separar os backgrounds por vírgula #div5 blockquote{ background: url(aspas1.gif) no-repeat 0 0, url(aspas2.gif) no-repeat 100% 100%; }

O que vem por aí com CSS3 Background com gradiente: linear-gradient, gradient #div8 { background: -moz-linear-gradient(bottom, #b6ebf7, #fff 50%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff)); }

O que vem por aí com CSS3 Rotacionar elementos: transform #div9 { -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); }

O que vem por aí com CSS3 Seletores por atributos elemento[atributo=valor] input[type=“text”] div[title=“abc”] :not() div.teste :not(span) tabletrtd :not(:last-child) :last-child ol.teste li:last-child :empty p:empty E muitos outros

Referências MACEDO, Marcelo da Silva. Construindo sites adotando padrões Web. Rio de Janeiro: Editora Ciência Moderna Ltda., 2004. SILVA, Maurício Samy. Criando sites com HTML: sites de alta qualidade com HTML e CSS. São Paulo: Novatec Editora, 2008. VISIE. Campus Online. Textos sobre Tableless.

Referências e sites interessantes Tablelesswww.tableless.com.br CSS no Lanchewww.cssnolanche.com.br Maujorwww.maujor.com Pinceladas da Webwww.pinceladasdaweb.com.br W3Schoolshttp://www.w3schools.com/

Referências e sites interessantes CSS3.infowww.css3.info 10 Efeitos com Propriedades CSS http://www.kadunew.com/blog/css/10-efeitos-com-propriedades-css3

OBRIGADA! contato@talitapagani.com talita@tableless.com.br Twitter: @talitapagani

Construindo layouts com CSS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Construindo layouts com CSS

Ähnlich wie Construindo layouts com CSS (20)

Mehr von Talita Pagani

Mehr von Talita Pagani (20)

Construindo layouts com CSS