Upload
talita-pagani
View
10.934
Download
1
Embed Size (px)
Citation preview
Construindo layout
de sites com
CSSTalita Pagani
@talitapagani
XI JORNADA DE INFORMÁTICA
UNESP - BAURU
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
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
Introdução
arquivo.html
estilo.css
arquivo.html
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
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" />
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
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)
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
Seletores
seletor { propriedade: valor; }
Seletor que defineo elemento quereceberá o estilo
Declaração
Um atributo que seráalterado (bordas, margem,fonte, espaçamento, etc.)
Valor da propriedade,podendo ser numérico,
texto, medida, código, etc.
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
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
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: inside square url("/images/blueball.gif");
Principais Propriedades
• Margens– margin-bottom– margin-left– margin-right– margin-top– Forma abreviada: margin (top right bottom left)• 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 right bottom left)• 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
Principais Propriedades
Principais Propriedades
• Pseudo-classes– :active– :focus– :hover– :link– :visited– :first-child– :first-letter– :after– :before
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
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
O Box Model
• Se uma div possuir largura e altura de 200 pixels e padding de 10 pixels em todas as direções, o navegador irá mostrar uma caixa com 220 pixels de largura e altura
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
Na Prática
• Iremos estilizar um documento HTML pronto utilizando as propriedades CSS
Na Prática
Na Prática
.wrapper
Na Prática
.header
.content
.footer
.navbar
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; }
.navbar li
{ float: left; list-style: none; margin: 0 10px 0 10px; }
.navbar li a, .navbar li 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; }
.footerNavbar li
{ float: left; list-style: none; margin: 0 10px 0 10px; }
.footerNavbar li a, .footerNavbar li 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; }
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
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
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
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-shadowp.shadow { text-shadow: 2px 2px 2px #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)• table tr td :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• Tableless
www.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-proprieda
des-css3
PERGUNTAS?
OBRIGADA!
[email protected]@tableless.com.brTwitter: @talitapagani