css - parte ii - dicas práticas
DESCRIPTION
Material de estudo e referência além de boas práticas no desenvolvimento Front-end.TRANSCRIPT
Construsite BrasilCriação de sites
PARTE II Desenvolvimento na prática
Construsite BrasilCriação de sites
PRINCIPAIS NívEIS DE ElEmENToS HTml (TABlE, BloCk, lIST-ITEm, INlINE, INlINE-BloCk)
Construsite BrasilCriação de sites
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.
Construsite BrasilCriação de sites
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.
Construsite BrasilCriação de sites
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.
Construsite BrasilCriação de sites
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)
Construsite BrasilCriação de sites
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
Construsite BrasilCriação de sites
USo DE ElEmENToS FlUTUANTES (FloATS)
Sinônimos: boiar, sobrenadar e vogar.
Construsite BrasilCriação de sites
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.
Construsite BrasilCriação de sites
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
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).
Construsite BrasilCriação de sites
USo DE ElEmENToS PoSICIoNADoS (PoSITIoN)
Construsite BrasilCriação de sites
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
depende do bloco para se posicionar.
Porém seria impossível criar o efeito
anterior.
Construsite BrasilCriação de sites
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;
observação: menor tempo de renderização se
comparado com float, pois o texto não
depende do bloco para se posicionar.
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.
Construsite BrasilCriação de sites
Libertando elementos flutuantes/flutuados(floats)
Construsite BrasilCriação de sites
<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;
}
Construsite BrasilCriação de sites
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
float: left
clear: both
Construsite BrasilCriação de sites
<div id=”blocoGeral”>
<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;}
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
float: left; float: right;
Problema!
o blocoGeral não aparece.
Construsite BrasilCriação de sites
<div id=”blocoGeral”>
<divclass=”blocoverdefl”></div>
<divclass=”blocoazulfr”></div>
</div>
#blocoGeral {
background: #333;
display: table;
}
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
Solução 1Definir a propriedade display com o valor table. display:table;
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
Problema!
o blocoGeral está se comportando como tabela, a renderização é dependente.
Construsite BrasilCriação de sites
<div id=”blocoGeral”>
<divclass=”blocoverdefl”></div>
<divclass=”blocoazulfr”></div>
</div>
#blocoGeral {
background: #333;
display: table;
width: 100%;
}
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
Solução 1Definir a propriedade width com o valor 100% por exemplo. width:100%;
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
Problema!
o blocoGeral está se comportando como tabela, a renderização é dependente.
Construsite BrasilCriação de sites
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.
Construsite BrasilCriação de sites
<div id=”blocoGeral”>
<divclass=”blocoverdefl”></div>
<divclass=”blocoazulfr”></div>
</div>
#blocoGeral {
background: #333;
display: table;
width: 100%;
height:400px;
}
.bloco {
width:200px;
height:400px;
}
.verde {
height:600px;
background: #A3CC52;
}
.azul { background: #3B9CD7; }
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
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
Problema!
o blocoGeral está se comportando como tabela, a renderização é dependente.
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.
Construsite BrasilCriação de sites
<div id=”blocoGeral”>
<divclass=”blocoverdefl”></div>
<divclass=”blocoazulfr”></div>
<div class=”cb”></div>
</div>
#blocoGeral { background: #333; }
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
.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.
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
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.
Construsite BrasilCriação de sites
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.
Construsite BrasilCriação de sites
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 id=”blocoGeral”>
<divclass=”blocoverdefl”></div>
<divclass=”blocoazulfr”></div>
<div class=”cb”></div>
</div>
#blocoGeral {
background: #333;
height: 400px;
}
.bloco {
width:200px;
height:400px;
}
.verde {
background: #A3CC52;
height: 600px;
}
.azul { background: #3B9CD7; }
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
Construsite BrasilCriação de sites
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.
Construsite BrasilCriação de sites
DICAS ÚTEIS QUE voCÊ NÃo APRENDE NA ESColA
Construsite BrasilCriação de sites
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 id=”blocoGeral”>
<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;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
.subBloco { background: #C40303; }
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
Bloco01
Bloco02
subBloco
Construsite BrasilCriação de sites
#blocoGeral * {background: #333;}
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
.subBloco { background: #C40303; }
Se definirmos o #blocoGeral seguido pelo seletor * ele aplica a formatação a todos os elementos descendentes.#blocoGeral *
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
Bloco01
Bloco02
subBloco
Construsite BrasilCriação de sites
SElECIoNANDo ElEmENToS FIlHoS Com >
Exemplo:
<div id=”blocoGeral”>
<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;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
.subBloco { background: #C40303; }
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
Bloco01
Bloco02
subBloco
Construsite BrasilCriação de sites
#blocoGeral > div {background: #333;}
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
.subBloco { background: #C40303; }
Se definirmos o #blocoGeral seguido pelo seletor > para os elementos div ele aplica a formatação a todos os div filhos. #blocoGeral > div
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
Bloco01
Bloco02
subBloco
Construsite BrasilCriação de sites
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.
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
Construsite BrasilCriação de sites
SElECIoNANDo ElEmENToS Com +
Exemplo:
<div>Bloco01</div>
<div>Bloco02</div>
<div>Bloco03</div>
<div>Bloco04</div>
div {
width:200px;
height:200px;
background: #333;
}
div+div { background: #C40303; }
Conseguimos selecionar elemento determinado e seus adjacentes.
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
Construsite BrasilCriação de sites
SElECIoNANDo ElEmENToS Com +
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; }
Conseguimos selecionar elemento determinado e seus adjacentes.
Construsite BrasilCriação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-lisi.
Construsite BrasilCriação de sites
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.
Construsite BrasilCriação de sites
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
Construsite BrasilCriação de sites
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.
Construsite BrasilCriação de sites
CSS vAlIDo É SEmPRE ImPoRTANTE
CSS validation ServiceW3Chttp://jigsaw.w3.org/css-validator/
Construsite BrasilCriação de sites
Créditos
Construsite BrasilCriação de sites
www.construsitebrasil.com
marcos CésarDesenvolvedor front-end e Designer
material elaborado por:
Construsite BrasilCriação de sites
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