Construindo layout de sites com CSS

Construindo layoutde sites comCSSXI JORNADA DE INFORMÁTICAUNESP - BAURUTalita Pagani @talitapagani

AgendaIntroduçãoInserindo o CSS em documentos HTMLPor que Folhas de Estilo em Cascata?SeletoresPropriedadesO Box ModelNa Prática: estilizando um documento XHTML com CSSDiretrizes para melhorar o desenvolvimento de layoutsO que vem por aí com o CSS 3

IntroduçãoCascading Style Sheets ou Folhas de Estilo em CascataLinguagem de formatação para documentos HTML e XHTMLSepara o estilo do conteúdoCriação e manutenção do design ficam mais fáceis e consistentes

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

Introduçãoestilo.cssarquivo.htmlarquivo.html

Inserindo o CSS em documento HTMLInlineInsere as definições de estilo diretamente no elemento (não recomendado) <p style=”color: #F00;”>Conteúdo</p> EmbededO código é embutido diretamente em um arquivo HTML <style type=”text/css”> p { color: #F00; } </style> Arquivo ExternoTodas 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 estilosQuando 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 embutidaFolha de estilo linkadaEstilo padrão do navegador (menor precedência)

Seletoresseletor{propriedade: valor; }Seletor que defineo elemento quereceberá o estiloUm atributo que seráalterado (bordas, margem,fonte, espaçamento, etc.)Valor da propriedade,podendo ser numérico,texto, medida, código, etc.DeclaraçãoBloco de Declarações

SeletoresUm seletor pode ser:Uma tag HTML (ex.: p {...}, div {...}, h1 {...}, etc.)Uma classeDefiniçã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 HTMLUm IDconstitui 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

SeletoresUm 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írgulaSeletores encadeados (ex.: #coluna div p {...})Também chamados de seletores contextuais, definem uma regra para especificar o estilo de um elemento dentro de outros elementosPseudo-classes (ex.: :link, :active, :hover, :visited, :first-child, etc.)E combinações de todas essas formas

Principais PropriedadesPlano de Fundo:background-colorbackground-imagebackground-repeat (repeat, repeat-x, repeat-y, no-repeat) background-attachment (fixed, scroll)background-positionForma abreviada: backgroundbackground: #FC0 url(imagem.gif) no-repeat center top;

Principais PropriedadesBordasborder-bottom (<width> <style> <color>)border-bottom-colorborder-bottom-style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit)border-bottom-widthborder-leftborder-rightborder-topTodas juntas: borderborder-colorborder-styleborder-widthoutline-coloroutline-styleoutline-widthborder: 2px solid #FF9900;border: 2px solid #FF9900;border-right-color: #4A7EBB;border-bottom-color: #4A7EBB;border: 2px solid #FF9900;outline: 1px solid #000000;

Principais PropriedadesDimensõesheightmin-heightmax-heightwidthmin-widthmax-width

Principais PropriedadesTextoFont-styleFont-variantfont-weightfont-sizeline-heightfont-familyForma abreviada: fontfont: italic bold 12px/18px Arial, Helvetica, sans-serif;

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

Principais PropriedadesListalist-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-stylelist-style: insidesquare url("/images/blueball.gif");

Principais PropriedadesMargensmargin-bottommargin-leftmargin-rightmargin-topForma abreviada: margin (top rightbottomleft)margin: 10px 5px 2px 150px;margin: 10px auto;

Principais PropriedadesEspaçamento internopadding-bottompadding-leftpadding-rightpadding-topForma abreviada: padding(top rightbottomleft)padding: 8px 10px 8px 20px;padding: 10px 5px;

Principais PropriedadesPosicionamentofloat (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)toprightleftbottomvisibility (visible, hidden, collapse)z-index

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

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

O Box ModelSe 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áticaIremos estilizar um documento HTML pronto utilizando as propriedades CSS

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

Na Prática.mainContent.sidebar

Na PráticaBaixar os arquivos do minicurso em http://www.talitapagani.com/material/site_minicurso.zip e descompactar na sua máquinaAbrir o DreamweaverCtrl+N para criar um nova arquivo do tipo CSS

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

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

Na Práticabody{ 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 layoutsConstrua o layout por etapas e ao concluir a etapa teste em diferentes navegadoresDesenvolva para os navegadores modernos e depois adapte para os antigosValide seu código HTML e CSSEvite hacks para determinados navegadoresModularizar CSS quando necessário@import url(“estilo.css”)Múltiplas folhas de estilo

O que vem por aí com CSS3Maior controle de formas e efeitosMaior independência do uso de imagens, principalmente PNG para criar transparênciasEstilizar elementos de acordo com determinados atributos da tag HTMLConcentrar a formatação cada vez mais apenas no CSS, diminuindo o uso de imagens e scripts

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

O que vem por aí com CSS3Sombras 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 CSS3Sombras em textos: text-shadowp.shadow { text-shadow: 2px 2px2px #000;}

O que vem por aí com CSS3Transparê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 CSS3Colunas: 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 CSS3Mú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 CSS3Background 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 CSS3Rotacionar elementos: transform#div9 { -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); }

O que vem por aí com CSS3Seletores por atributoselemento[atributo=valor]input[type=“text”]div[title=“abc”]:not()div.teste :not(span)tabletrtd :not(:last-child):last-childol.teste li:last-child:emptyp:emptyE muitos outros

ReferênciasMACEDO, 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 interessantesTablelesswww.tableless.com.brCSS no Lanchewww.cssnolanche.com.brMaujorwww.maujor.comPinceladas da Webwww.pinceladasdaweb.com.brW3Schoolshttp://www.w3schools.com/

Referências e sites interessantesCSS3.infowww.css3.info10 Efeitos com Propriedades CSShttp://www.kadunew.com/blog/css/10-efeitos-com-propriedades-css3

OBRIGADA!contato@talitapagani.comtalita@tableless.com.brTwitter: @talitapagani

Construindo layout de sites com CSS

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Construindo layout de sites com CSS

Mais de Talita Pagani

Construindo layout de sites com CSS