css - parte ii - dicas práticas

Construsite BrasilCriação de sites

PARTE II Desenvolvimento na prática


PRINCIPAIS NívEIS DE ElEmENToS HTml (TABlE, BloCk, lIST-ITEm, INlINE, INlINE-BloCk)


Elementos invisíveis (base, link, meta, script, style, title)

NÃO SÃO ELEMENTOS DE CONTEÚDO REAL PARA O USUÁRIO, SÃO ESPECIFICAÇÕES E ORIENTAÇÕES PARA OS NAVEGADORES E MECANISMOS DE BUSCA ORGÂNICA.


Elementos a nível de bloco {títulos (h1, h2, h3...), p, div, section, article, header, footer}

ELEMENTOS QUE CARREGAM CONTEÚDO REAL EM BLOCO.


Elementos em linha (a, b, br, img, input, label, span, textarea, tt)

ELEMENTOS QUE CARREGAM CONTEÚDO SEGUIDOS, EM LINHA.

Lorem ipsum dolor sit amet consectetuer adipiscing ipsum dolor sit amet

Não permite estilos de bloco, como margin.


Elementos de tabela (table, inclui tr, td e tudo mais)

Endentamento

Tempo longo para renderização.

Um elemento é dependente do outro para se posicionar.

ELEMENTOS ENDENTADOS E QUE CAUSAM “DEPENDÊNCIA“

Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Problema!Mesmo se você definir a altura do elemento da tabela ele será adaptado de acordo com o tamanho do conteúdo.

yoooop (travado)

http://lists.debian.org/debian-l10n-portuguese/2010/01/msg00005.html


Elementos de lista (ul, li)

ELEMENTOS DE ORDEM, LISTAGEM

Lorem ipsum dolor sit amet

consectetuer adipiscing elit

Sed diam nonummy nibh

Euismod tincidunt ut laoreet

Dolore magna aliquam erat volutpat

Ut wisi enim ad minim veniam

Quis nostrud exerci tation

Ullamcorper suscipit lobortis

Nisl ut aliquip ex ea commodo consequat

Duis autem vel eum iriure

Olor in hendrerit in


USo DE ElEmENToS FlUTUANTES (FloATS)

Sinônimos: boiar, sobrenadar e vogar.


cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit

in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.

float: right

float: left

margin

observação: maior tempo de renderização se

comparado com position, pois o texto

depende do bloco para se posicionar.


cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit

in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.

float: right

float: left

Os elementos definidos com a propriedade float passam a “boiar“ em relação aos outros elementos. Imagine um naufrágio, onde os textos são os lixos que flutuam ao lado das boias, mas não

sobrepõem uns aos outros sobre a água (mesma camada).


USo DE ElEmENToS PoSICIoNADoS (PoSITIoN)


cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

position: absolute;

top:0;

left:0;

position: absolute;

bottom:0;

right:0;

Os elementos com a propriedade position de valor absolute é “tirado da camada natural“ e posicionado.

observação: menor tempo de renderização se

comparado com float, pois o texto não


Porém seria impossível criar o efeito

anterior.


cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

position: absolute;

top:0;

left:0;

position: absolute;

bottom:0;

right:0;

observação: menor tempo de renderização se

comparado com float, pois o texto não


Porém seria impossível criar o efeito

anterior.

Os elementos definidos com a propriedade position com o valor absolute passam a “voar“ em relação aos outros elementos. Imagine um avião, onde os textos são as nuvens, onde o avião e as nuvens se sobrepoem.


Libertando elementos flutuantes/flutuados(floats)


<div id=”blocoGeral”>

<div id=”blocoVerde”></div>

<div id=”blocoTexto”>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed

diam nonummy nibh euismod tincidunt ut laoreet dolore magna

aliquam erat volutpat. Ut wisi enim ad minim veniam, quis

nostrud exerci tation ullamcorper suscipit lobortis nisl ut

aliquip ex ea commodo consequat [...]

</div>

</div>

#blocoVerde {

width:200px;

height:400px;

background: #A3CC52;

float:left;

}

#blocoTexto {

clear:both;

}


cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.



Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu

float: left

clear: both



<divclass=”blocoverdefl”></div>

<divclass=”blocoazulfr”></div>

</div>

#blocoGeral { background: #333 }

.bloco {

width:200px;

height:400px;

}

.verde { background: #A3CC52; }

.azul { background: #3B9CD7; }

.fl{float:left;}

.fr{float:right;}



float: left; float: right;

Problema!

o blocoGeral não aparece.





</div>

#blocoGeral {

background: #333;

display: table;

}

.bloco {

width:200px;

height:400px;

}



Solução 1Definir a propriedade display com o valor table. display:table;



Problema!

o blocoGeral está se comportando como tabela, a renderização é dependente.





</div>

#blocoGeral {

background: #333;

display: table;

width: 100%;

}

.bloco {

width:200px;

height:400px;

}



Solução 1Definir a propriedade width com o valor 100% por exemplo. width:100%;



Problema!



Problema Tabela!Mesmo se você definir a altura do elemento a

nível de tabela ele será adaptado de acordo com o tamanho do conteúdo que está endentado.

Isso causa mais dependência entre elementos.





</div>

#blocoGeral {

background: #333;

display: table;

width: 100%;

height:400px;

}

.bloco {

width:200px;

height:400px;

}

.verde {

height:600px;


}


Exemplo:Definimos a propriedade height com o valor 400px e mudamos a propriedade height da class .verde para 600px.height:400px = #blocoGeral height:600px = .verde



Problema!


Problema Tabela!Mesmo se você definir a altura do elemento da tabela ele será adaptado de acordo com o tamanho do conteúdo.

Problema Navegador!A renderização de elementos a nível de tabela variam e causam mais problemas em diferentes navegadores.

Solução?Esquecer tabela para casos como este. Elemento a nível de tabela é para tabelas e algumas exceções.





<div class=”cb”></div>

</div>

#blocoGeral { background: #333; }

.bloco {

width:200px;

height:400px;

}



.cb { clear:both; }

.fl{float:left;}

.fr{float:right;}

Solução 2Adicionar qualquer elemento a nível de bloco, definir a propriedade clear com o valor both. clear:both;

libertando de verdade.



o blocoGeral está se comportando como elemento a nível de bloco, a renderização é menos dependente.

Solução Simples!você pode reutilizar a classe criada para blocos sucessores no layout, reaproveitar é sempre a melhor opção.


Prova de fogo!Mesmo que você defina a altura do elemento a nível de

bloco, ele será mantido de acordo com a definição das css, sem dependência dos elementos flutuantes, sendo assim os elementos flutuantes vão transbordar o seu elemento pai.


Exemplo:Definimos a propriedade height com o valor 400px e mudamos a propriedade height da class .verde para 600px.height:400px = #blocoGeral height:600px = .verde




<div class=”cb”></div>

</div>

#blocoGeral {

background: #333;

height: 400px;

}

.bloco {

width:200px;

height:400px;

}

.verde {


height: 600px;

}



manter o nível natural dos elementos é a melhor opção!

Exemplo: Quanto definimos uma propriedade display com o valor table e esse elemento originalmente é um elemento a nível de bloco (display: block; ex.: div) o navegador tem de processar ele de forma diferente

do padrão, levando mais tempo para a renderização do layout.


DICAS ÚTEIS QUE voCÊ NÃo APRENDE NA ESColA


PoRQUE UTIlIzAmoS * PARA FAzER Um RESET Do HTml NAS CSS?

* SElECIoNA ToDoS oS ElEmENToS DESCENDENTES.

Atenção!o grau de importância das css selecionadas com * é maior.

Exemplo:


<div class=”bloco verde”>Bloco01

<div class=”subBloco”></div>

</div>

<div class=”bloco azul”> Bloco02</div>

</div>

#blocoGeral {background: #333;}

.bloco {

width:200px;

height:400px;

}



.subBloco { background: #C40303; }



Bloco01

Bloco02

subBloco


#blocoGeral * {background: #333;}

.bloco {

width:200px;

height:400px;

}




Se definirmos o #blocoGeral seguido pelo seletor * ele aplica a formatação a todos os elementos descendentes.#blocoGeral *



Bloco01

Bloco02

subBloco


SElECIoNANDo ElEmENToS FIlHoS Com >

Exemplo:


<div class=”bloco verde”>Bloco01

<div class=”subBloco”></div>

</div>

<div class=”bloco azul”> Bloco02</div>

</div>

#blocoGeral {background: #333;}

.bloco {

width:200px;

height:400px;

}






Bloco01

Bloco02

subBloco


#blocoGeral > div {background: #333;}

.bloco {

width:200px;

height:400px;

}




Se definirmos o #blocoGeral seguido pelo seletor > para os elementos div ele aplica a formatação a todos os div filhos. #blocoGeral > div



Bloco01

Bloco02

subBloco


SElECIoNANDo ElEmENToS Com +

Exemplo:

<div>Bloco01</div>

<div>Bloco02</div>

<div>Bloco03</div>

<div>Bloco04</div>

div {

width:200px;

height:200px;

background: #333;

}

Conseguimos selecionar elemento determinado e seus adjacentes.



Exemplo:

<div>Bloco01</div>

<div>Bloco02</div>

<div>Bloco03</div>

<div>Bloco04</div>

div {

width:200px;

height:200px;

background: #333;

}

div+div { background: #C40303; }




Exemplo:

<div>Bloco01</div>

<div>Bloco02</div>

<div>Bloco03</div>

<div>Bloco04</div>

div {

width:200px;

height:200px;

background: #333;

}

div+div+div { background: #C40303; }



SElEToRES DE ATRIBUToS

Conseguimos selecionar os elemento de acordo com seus atributos.

Exemplo:

input[type=”text”] { propriedade:valor; }

a[href^=”http”]{propriedade:valor;}

a[href$=”.html”]{propriedade:valor;}

seleciona todos os inputs de texto.

seleciona todos os elementos a que começam com o valor http.

seleciona todos os elementos a que terminam com o valor .html.


PRoPRIEDADES PRoPRIETÁRIAS

Conseguimos definir propriedades para um browser específico.

As propriedades proprietárias passaram a existir porque cada grupo de desenvolvedores

cria novas funcionalidades para as css mas só podem aplicar ao seu motor e não em todos.

Por exemplo:

A equipe de desenvolvedores da Apple (Webkit) criaram a funcionalidade de transição entre

estados de formatação para os elementos, a propriedade -webkit-transtition.

A equipe apresenta a solução para o orgão responsável pelo padrão de desenvolvimento web

(w3c) esses funcionalidades aos poucos vão sendo desenvolvidas e implementadas para os

motores de outros browsers como firefox (gecko), ie ou ópera.

Quando o processo de desenvolvimento chega ao término e funciona perfeitamente em todos

os browsers ele passa a ser aceito sem as propriedades proprietárias, sendo padronizada

pelo w3c.

Exemplo:

-moz

-o

-webkit


PRoPRIEDADES PRoPRIETÁRIAS

Conseguimos definir propriedades para browser específico.

outro exemplo:

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

Exemplo:

-moz

-o

-webkit

Já está sendo implementado como padrão e reconhecido pelos navega-dores com os motores gecko e webkit sem a necessidade da utilização de

propriedades proprietárias.

Cuidado ao utilizar geradores de código automáico, talvez sejam desnecessários.


CSS vAlIDo É SEmPRE ImPoRTANTE

CSS validation ServiceW3Chttp://jigsaw.w3.org/css-validator/

http://jigsaw.w3.org/css-validator/


Créditos


www.construsitebrasil.com

marcos CésarDesenvolvedor front-end e Designer

material elaborado por:


Referêcias6 estratégias para melhorar a organização do seu CSS/ Algumas estratégias simples podem ser utilizadas para deixar o seu CSS mais organizado, consistente e de fácil manutenção. Tabeless. [acesso em 26 de novembro de 2012]. Disponível em: http://tableless.com.br/6-estrategias-para-melhorar-a-organizacao-do-seu-css-2/

Christopher Schmitt. Livro: CSS Cookbook/Soluções rápidas para problemas comuns com CSS. Novatec Editora Ltda. 2010.

Eric A. Meyer, CSS: The Definitive Guide. O’Reilly Media; Third Edition edition (November 14, 2006).

Diego Eis Elcio Ferreira. Livro: HTML5 e CSS3 com farinha e pimenta.

W3C, CSS Validation Service. Disponível em: http://jigsaw.w3.org/css-validator/acess

Bernard De Luna - Sexy web projects specialist | Web design speaker and teacher. Disponível em: http://bernarddeluna.com/

Zeno Rocha | HTML5, CSS3 e JavaScript. Disponível em: http://zenorocha.com/

CSS3 Generator. Disponível em: http://css3generator.com/

WebPlatform Docs. Disponível em: http://docs.webplatform.org

http://www.pinceladasdaweb.com.br/blog/2011/06/30/tabela-semantica-html5/

css - parte ii - dicas práticas

Documents