Construindo layout de sites com CSS

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

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


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


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


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


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;


• Dimensões– height– min-height– max-height– width– min-width– max-width


• 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;


• 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)


• 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");


• Margens– margin-bottom– margin-left– margin-right– margin-top– Forma abreviada: margin (top right bottom left)• margin: 10px 5px 2px 150px;• margin: 10px auto;


• 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


• Pseudo-classes– :active– :focus– :hover– :link– :visited– :first-child– :first-letter– :after– :before

Agenda


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


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

http://www.talitapagani.com/material/site_minicurso.zip

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


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


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


• Cantos arredondados: border-radius#div1 {

border: 1px solid #699; -moz-border-radius: 20px; -webkit-border-radius: 20px;

}


• 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;

}


• Sombras em textos: text-shadowp.shadow { text-shadow: 2px 2px 2px #000;

}


• Transparência: opacity e rgba#div3 {

background-color: rgba(110, 142, 185, .4); } #div3 {

background-color: #6e8eb9; opacity: 0.4;

}


• 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;

}


• 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%;

}


• 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));

}


• 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/

http://www.tableless.com.br/

http://www.cssnolanche.com.br/

http://www.maujor.com/

http://www.pinceladasdaweb.com.br/

http://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

http://www.css3.info/

http://www.kadunew.com/blog/css/10-efeitos-com-propriedades-css3

http://www.kadunew.com/blog/css/10-efeitos-com-propriedades-css3

PERGUNTAS?

OBRIGADA!

[email protected]@tableless.com.brTwitter: @talitapagani

mailto:[email protected]

mailto:[email protected]

Construindo layout de sites com CSS

Technology

Transcript of Construindo layout de sites com CSS