SlideShare uma empresa Scribd logo
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
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ção
Introduçãoestilo.cssarquivo.htmlarquivo.html
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
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" />
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
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)
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
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
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
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 Propriedades
Principais Propriedades
Principais PropriedadesPseudo-classes:active:focus:hover:link:visited:first-child:first-letter:after:before
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
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 Model
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
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
Na PráticaIremos estilizar um documento HTML pronto utilizando as propriedades CSS
Na Prática
Na Prática.wrapper
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; }
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
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
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
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
PERGUNTAS?
OBRIGADA!contato@talitapagani.comtalita@tableless.com.brTwitter: @talitapagani

Mais conteúdo relacionado

Mais procurados

html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
orenatoaraujo
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
Willian Watanabe
 
Introdução CSS
Introdução CSSIntrodução CSS
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEBCSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
Daniel Brandão
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
Professor Samuel Ribeiro
 
Curso de HTML5 - Aula01
Curso de HTML5 - Aula01Curso de HTML5 - Aula01
Curso de HTML5 - Aula01
Zarathon Maia
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
Leonardo Quixada
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
Pablo Sanches
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
Bunee.io - Hiring with Intelligence
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
Carlos Rodrigo de Araujo
 
Padroes Web
Padroes WebPadroes Web
Padroes Web
hellequin
 
Css - por Nícolas Lazarte Kaqui
Css - por Nícolas Lazarte Kaqui Css - por Nícolas Lazarte Kaqui
Css - por Nícolas Lazarte Kaqui
Arthur Henrique Guimarães de Oliveira
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
Gabriel Kamimura Yano
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
Eliene Resende
 
Slides Css3
Slides Css3 Slides Css3
Slides Css3
Pedro Neto
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Cristofer Sousa
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
Dra. Camila Hamdan
 
Aula 11
Aula 11Aula 11
Manual curso php
Manual curso phpManual curso php
Manual curso php
alexinaa
 

Mais procurados (19)

html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEBCSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
Curso de HTML5 - Aula01
Curso de HTML5 - Aula01Curso de HTML5 - Aula01
Curso de HTML5 - Aula01
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
Padroes Web
Padroes WebPadroes Web
Padroes Web
 
Css - por Nícolas Lazarte Kaqui
Css - por Nícolas Lazarte Kaqui Css - por Nícolas Lazarte Kaqui
Css - por Nícolas Lazarte Kaqui
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Slides Css3
Slides Css3 Slides Css3
Slides Css3
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
 
Aula 11
Aula 11Aula 11
Aula 11
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 

Destaque

Curso html
Curso htmlCurso html
Curso html
richard_romancini
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de textoPropriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto
Filipe Rezende
 
AULA 4 - PROPRIEDADES CSS
AULA 4 - PROPRIEDADES CSSAULA 4 - PROPRIEDADES CSS
AULA 4 - PROPRIEDADES CSS
diogolevel3
 
Css powerpoint
Css powerpointCss powerpoint
Css powerpoint
kongmata
 
Design Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - MultimídiaDesign Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - Multimídia
Dra. Camila Hamdan
 
Design de Interface - Diretrizes
Design de Interface - DiretrizesDesign de Interface - Diretrizes
Design de Interface - Diretrizes
Vinícius Silva de Andrade
 
Parceiro Programador
Parceiro ProgramadorParceiro Programador
Parceiro Programador
Carlos Henrique Muller
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
Morvana Bonin
 
HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
Mónica Ferreira
 
HTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebHTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da Web
Diego Pessoa
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2
Israel Messias
 
ebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSSebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSS
David Arty
 
TCC I - Igor Pimentel
TCC I - Igor PimentelTCC I - Igor Pimentel
TCC I - Igor Pimentel
igorpimentel
 
Introdução ao framework CakePHP
Introdução ao framework CakePHPIntrodução ao framework CakePHP
Introdução ao framework CakePHP
igorpimentel
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
igorpimentel
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
igorpimentel
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
People Strategists
 
Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklist
Dra. Camila Hamdan
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
ledsifes
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
Diego Eis
 

Destaque (20)

Curso html
Curso htmlCurso html
Curso html
 
Propriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de textoPropriedades css e propriedades de fontes de texto
Propriedades css e propriedades de fontes de texto
 
AULA 4 - PROPRIEDADES CSS
AULA 4 - PROPRIEDADES CSSAULA 4 - PROPRIEDADES CSS
AULA 4 - PROPRIEDADES CSS
 
Css powerpoint
Css powerpointCss powerpoint
Css powerpoint
 
Design Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - MultimídiaDesign Gráfico para Web: HTML 5 - Multimídia
Design Gráfico para Web: HTML 5 - Multimídia
 
Design de Interface - Diretrizes
Design de Interface - DiretrizesDesign de Interface - Diretrizes
Design de Interface - Diretrizes
 
Parceiro Programador
Parceiro ProgramadorParceiro Programador
Parceiro Programador
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
 
HTML e CSS
HTML e CSSHTML e CSS
HTML e CSS
 
HTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da WebHTML 5, CSS 3 e o futuro da Web
HTML 5, CSS 3 e o futuro da Web
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2
 
ebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSSebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSS
 
TCC I - Igor Pimentel
TCC I - Igor PimentelTCC I - Igor Pimentel
TCC I - Igor Pimentel
 
Introdução ao framework CakePHP
Introdução ao framework CakePHPIntrodução ao framework CakePHP
Introdução ao framework CakePHP
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
Design Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklistDesign Gráfico Para Web: Website checklist
Design Gráfico Para Web: Website checklist
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 

Semelhante a Construindo layout de sites com CSS

Folha de estilo css
Folha de estilo   cssFolha de estilo   css
3844 css
3844 css3844 css
3844 css
Lucio Webdesign
 
CSS
CSSCSS
CSS
CSSCSS
Introdução a desenvolvimento web
Introdução a desenvolvimento webIntrodução a desenvolvimento web
Introdução a desenvolvimento web
Iago Effting
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
Pedro Gaspar
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
Eliene Resende
 
Css
Css   Css
Html com css
Html com cssHtml com css
Html com css
Nadijar Casarin
 
Curso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSCurso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSS
Willian Magalhães
 
Htmlbasico
HtmlbasicoHtmlbasico
Htmlbasico
Fernando Vargas
 
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-loCurso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
Michel Bernardes de Jesus
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
RubenManhia
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
Ester Razzo Fischer
 
Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha
fevooduck
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
Cesar Braz
 
Academia Verão 2011 - HTML
Academia Verão 2011 - HTMLAcademia Verão 2011 - HTML
Academia Verão 2011 - HTML
Nuno Simaria
 
Academia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSSAcademia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSS
Nuno Simaria
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
Fabrício Lopes Sanchez
 

Semelhante a Construindo layout de sites com CSS (20)

Folha de estilo css
Folha de estilo   cssFolha de estilo   css
Folha de estilo css
 
3844 css
3844 css3844 css
3844 css
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
Introdução a desenvolvimento web
Introdução a desenvolvimento webIntrodução a desenvolvimento web
Introdução a desenvolvimento web
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 
Css
Css   Css
Css
 
Html com css
Html com cssHtml com css
Html com css
 
Curso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSCurso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSS
 
Htmlbasico
HtmlbasicoHtmlbasico
Htmlbasico
 
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-loCurso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
Curso HTML módulo 4 - Como buscar um elemento html e personalizá-lo
 
2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf2. Introdução ao CSSpptx.pdf
2. Introdução ao CSSpptx.pdf
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Academia Verão 2011 - HTML
Academia Verão 2011 - HTMLAcademia Verão 2011 - HTML
Academia Verão 2011 - HTML
 
Academia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSSAcademia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSS
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 

Mais de Talita Pagani

Design acessível para autistas
Design acessível para autistasDesign acessível para autistas
Design acessível para autistas
Talita Pagani
 
Projetando para a neurodiversidade
Projetando para a neurodiversidadeProjetando para a neurodiversidade
Projetando para a neurodiversidade
Talita Pagani
 
Guia de Acessibilidade de Interfaces Web focado em Autismo
Guia de Acessibilidade de Interfaces Web focado em AutismoGuia de Acessibilidade de Interfaces Web focado em Autismo
Guia de Acessibilidade de Interfaces Web focado em Autismo
Talita Pagani
 
Projetando sites e aplicativos mais adequados a pessoas com autismo
Projetando sites e aplicativos mais adequados a pessoas com autismoProjetando sites e aplicativos mais adequados a pessoas com autismo
Projetando sites e aplicativos mais adequados a pessoas com autismo
Talita Pagani
 
Acessibilidade para cidadania : uma avaliação de usabilidade e acessibilidade...
Acessibilidade para cidadania : uma avaliação de usabilidade e acessibilidade...Acessibilidade para cidadania : uma avaliação de usabilidade e acessibilidade...
Acessibilidade para cidadania : uma avaliação de usabilidade e acessibilidade...
Talita Pagani
 
Projeto CoCoA: Um Colete de Comunicação Alternativa
Projeto CoCoA: Um Colete de Comunicação AlternativaProjeto CoCoA: Um Colete de Comunicação Alternativa
Projeto CoCoA: Um Colete de Comunicação Alternativa
Talita Pagani
 
Carreira não linear em TI
Carreira não linear em TICarreira não linear em TI
Carreira não linear em TI
Talita Pagani
 
Acessibilidade Digital para Tecnologias Educacionais focadas em Autistas
Acessibilidade Digital para Tecnologias Educacionais focadas em AutistasAcessibilidade Digital para Tecnologias Educacionais focadas em Autistas
Acessibilidade Digital para Tecnologias Educacionais focadas em Autistas
Talita Pagani
 
Acessibilidade Web Cognitiva
Acessibilidade Web CognitivaAcessibilidade Web Cognitiva
Acessibilidade Web Cognitiva
Talita Pagani
 
Acessibilidade Web Cognitiva - BrazilJS 2016
Acessibilidade Web Cognitiva - BrazilJS 2016Acessibilidade Web Cognitiva - BrazilJS 2016
Acessibilidade Web Cognitiva - BrazilJS 2016
Talita Pagani
 
Construindo sites adequados para pessoas com Autismo - Webbr 2016
Construindo sites adequados para pessoas com Autismo - Webbr 2016Construindo sites adequados para pessoas com Autismo - Webbr 2016
Construindo sites adequados para pessoas com Autismo - Webbr 2016
Talita Pagani
 
Caro Analista de Requisitos, você faz UX Design e nem sabe disso
Caro Analista de Requisitos, você faz UX Design e nem sabe dissoCaro Analista de Requisitos, você faz UX Design e nem sabe disso
Caro Analista de Requisitos, você faz UX Design e nem sabe disso
Talita Pagani
 
Projetando sites adequados a pessoas com Autismo
Projetando sites adequados a pessoas com AutismoProjetando sites adequados a pessoas com Autismo
Projetando sites adequados a pessoas com Autismo
Talita Pagani
 
Towards Web Accessibility Guidelines of Interaction and Interface Design for ...
Towards Web Accessibility Guidelines of Interaction and Interface Design for ...Towards Web Accessibility Guidelines of Interaction and Interface Design for ...
Towards Web Accessibility Guidelines of Interaction and Interface Design for ...
Talita Pagani
 
PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...
PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...
PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...
Talita Pagani
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-end
Talita Pagani
 
Web Semântica - RoadShow TI Senac SP
Web Semântica - RoadShow TI Senac SPWeb Semântica - RoadShow TI Senac SP
Web Semântica - RoadShow TI Senac SP
Talita Pagani
 
Meetup inaugural - Bauru UX Design Group - Fev/2015
Meetup inaugural - Bauru UX Design Group - Fev/2015Meetup inaugural - Bauru UX Design Group - Fev/2015
Meetup inaugural - Bauru UX Design Group - Fev/2015
Talita Pagani
 
Introdução a testes de usabilidade - 11º Diverso Design
Introdução a testes de usabilidade - 11º Diverso DesignIntrodução a testes de usabilidade - 11º Diverso Design
Introdução a testes de usabilidade - 11º Diverso Design
Talita Pagani
 
Medindo o Desempenho de sua aplicação com as APIs de Web Performance
Medindo o Desempenho de sua aplicação com as APIs de Web PerformanceMedindo o Desempenho de sua aplicação com as APIs de Web Performance
Medindo o Desempenho de sua aplicação com as APIs de Web Performance
Talita Pagani
 

Mais de Talita Pagani (20)

Design acessível para autistas
Design acessível para autistasDesign acessível para autistas
Design acessível para autistas
 
Projetando para a neurodiversidade
Projetando para a neurodiversidadeProjetando para a neurodiversidade
Projetando para a neurodiversidade
 
Guia de Acessibilidade de Interfaces Web focado em Autismo
Guia de Acessibilidade de Interfaces Web focado em AutismoGuia de Acessibilidade de Interfaces Web focado em Autismo
Guia de Acessibilidade de Interfaces Web focado em Autismo
 
Projetando sites e aplicativos mais adequados a pessoas com autismo
Projetando sites e aplicativos mais adequados a pessoas com autismoProjetando sites e aplicativos mais adequados a pessoas com autismo
Projetando sites e aplicativos mais adequados a pessoas com autismo
 
Acessibilidade para cidadania : uma avaliação de usabilidade e acessibilidade...
Acessibilidade para cidadania : uma avaliação de usabilidade e acessibilidade...Acessibilidade para cidadania : uma avaliação de usabilidade e acessibilidade...
Acessibilidade para cidadania : uma avaliação de usabilidade e acessibilidade...
 
Projeto CoCoA: Um Colete de Comunicação Alternativa
Projeto CoCoA: Um Colete de Comunicação AlternativaProjeto CoCoA: Um Colete de Comunicação Alternativa
Projeto CoCoA: Um Colete de Comunicação Alternativa
 
Carreira não linear em TI
Carreira não linear em TICarreira não linear em TI
Carreira não linear em TI
 
Acessibilidade Digital para Tecnologias Educacionais focadas em Autistas
Acessibilidade Digital para Tecnologias Educacionais focadas em AutistasAcessibilidade Digital para Tecnologias Educacionais focadas em Autistas
Acessibilidade Digital para Tecnologias Educacionais focadas em Autistas
 
Acessibilidade Web Cognitiva
Acessibilidade Web CognitivaAcessibilidade Web Cognitiva
Acessibilidade Web Cognitiva
 
Acessibilidade Web Cognitiva - BrazilJS 2016
Acessibilidade Web Cognitiva - BrazilJS 2016Acessibilidade Web Cognitiva - BrazilJS 2016
Acessibilidade Web Cognitiva - BrazilJS 2016
 
Construindo sites adequados para pessoas com Autismo - Webbr 2016
Construindo sites adequados para pessoas com Autismo - Webbr 2016Construindo sites adequados para pessoas com Autismo - Webbr 2016
Construindo sites adequados para pessoas com Autismo - Webbr 2016
 
Caro Analista de Requisitos, você faz UX Design e nem sabe disso
Caro Analista de Requisitos, você faz UX Design e nem sabe dissoCaro Analista de Requisitos, você faz UX Design e nem sabe disso
Caro Analista de Requisitos, você faz UX Design e nem sabe disso
 
Projetando sites adequados a pessoas com Autismo
Projetando sites adequados a pessoas com AutismoProjetando sites adequados a pessoas com Autismo
Projetando sites adequados a pessoas com Autismo
 
Towards Web Accessibility Guidelines of Interaction and Interface Design for ...
Towards Web Accessibility Guidelines of Interaction and Interface Design for ...Towards Web Accessibility Guidelines of Interaction and Interface Design for ...
Towards Web Accessibility Guidelines of Interaction and Interface Design for ...
 
PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...
PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...
PROJETO GAIA: Guia de Acessibilidade de Interfaces Web focado em aspectos do ...
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-end
 
Web Semântica - RoadShow TI Senac SP
Web Semântica - RoadShow TI Senac SPWeb Semântica - RoadShow TI Senac SP
Web Semântica - RoadShow TI Senac SP
 
Meetup inaugural - Bauru UX Design Group - Fev/2015
Meetup inaugural - Bauru UX Design Group - Fev/2015Meetup inaugural - Bauru UX Design Group - Fev/2015
Meetup inaugural - Bauru UX Design Group - Fev/2015
 
Introdução a testes de usabilidade - 11º Diverso Design
Introdução a testes de usabilidade - 11º Diverso DesignIntrodução a testes de usabilidade - 11º Diverso Design
Introdução a testes de usabilidade - 11º Diverso Design
 
Medindo o Desempenho de sua aplicação com as APIs de Web Performance
Medindo o Desempenho de sua aplicação com as APIs de Web PerformanceMedindo o Desempenho de sua aplicação com as APIs de Web Performance
Medindo o Desempenho de sua aplicação com as APIs de Web Performance
 

Último

INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
Faga1939
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
Ismael Ash
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ismael Ash
 
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
ronaldos10
 

Último (6)

INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
 
ExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebuliçãoExpoGestão 2024 - Desvendando um mundo em ebulição
ExpoGestão 2024 - Desvendando um mundo em ebulição
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
 
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negóciosExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
ExpoGestão 2024 - Inteligência Artificial – A revolução no mundo dos negócios
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
 

Construindo layout de sites com CSS

  • 1. Construindo layoutde sites comCSSXI JORNADA DE INFORMÁTICAUNESP - BAURUTalita Pagani @talitapagani
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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
  • 8. 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
  • 9. 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" />
  • 10. 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
  • 11. 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)
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. 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;
  • 18. 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;
  • 21. 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)
  • 22. 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");
  • 23. Principais PropriedadesMargensmargin-bottommargin-leftmargin-rightmargin-topForma abreviada: margin (top rightbottomleft)margin: 10px 5px 2px 150px;margin: 10px auto;
  • 24. Principais PropriedadesEspaçamento internopadding-bottompadding-leftpadding-rightpadding-topForma abreviada: padding(top rightbottomleft)padding: 8px 10px 8px 20px;padding: 10px 5px;
  • 25. 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
  • 29. 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
  • 30. O Box ModelPadrão de renderização ou apresentação visual de um box (container de informações) segundo a formatação CSS.
  • 32. 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
  • 33. 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
  • 34. Na PráticaIremos estilizar um documento HTML pronto utilizando as propriedades CSS
  • 39. 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
  • 40. 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
  • 41. Na PráticaComeçando: Declaração Reset*{ border: none; margin: 0; padding: 0; }
  • 42. 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; }
  • 43. Na Prática/* Estrutura */.wrapper{ background: #FFF; border: 1px solid #666; height: 100%; margin: 0 auto 0 auto; overflow: hidden;padding: 10px; width: 980px; }
  • 44. Na Prática.header{ height: 100%; position: relative; width: 100% } .header img { vertical-align: middle; }
  • 45. 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; }
  • 46. 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; }
  • 47. 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; }
  • 48. 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; }
  • 49. 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; }
  • 50. 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; }
  • 51. 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; }
  • 52. 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
  • 53. 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
  • 54. 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
  • 55. 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
  • 56. O que vem por aí com CSS3Cantos arredondados: border-radius#div1 {  border: 1px solid #699;  -moz-border-radius: 20px;  -webkit-border-radius: 20px;  } 
  • 57. 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;  } 
  • 58. O que vem por aí com CSS3Sombras em textos: text-shadowp.shadow { text-shadow: 2px 2px2px #000;}
  • 59. 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;} 
  • 60. 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;  } 
  • 61. 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%; } 
  • 62. 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)); } 
  • 63. O que vem por aí com CSS3Rotacionar elementos: transform#div9 {  -moz-transform: rotate(2deg);  -webkit-transform: rotate(2deg);  }
  • 64. 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
  • 65. 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.
  • 66. Referências e sites interessantesTablelesswww.tableless.com.brCSS no Lanchewww.cssnolanche.com.brMaujorwww.maujor.comPinceladas da Webwww.pinceladasdaweb.com.brW3Schoolshttp://www.w3schools.com/
  • 67. Referências e sites interessantesCSS3.infowww.css3.info10 Efeitos com Propriedades CSShttp://www.kadunew.com/blog/css/10-efeitos-com-propriedades-css3