Assine:
Mini-lib Css Reset Do Micox
Mini-lib css reset do micox
Escrito por Micox em WebStandards e CSS. Data: 25/07/2008
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Abaixo mostrarei tipo uma mini-lib CSS com o qual eu tenho iniciado meus últimos projetos. Ajuda bastante pra não ter que ficar redefinindo tuuuudo novamente a cada novo projeto.
Provavelmente os senhores webstandeiros aí têm as suas mini-libs também. Leiam a minha, adaptem, sugiram melhorias, implementem idéias minhas nas suas libs, troquemos conhecimentos.
Funcionalidades:
Coloquei esquemas de zerar propriedades (css reset) padronizando nos diferentes navegadores; tamanhos de títulos; classes especiais pra posicionamento, pra simular tabelas, pra avisos, pra teclas de acesso, pra fazer wrapper, pra simular colunas, pra debugar (com bordas), pra fazer menus drop-down, e pra ativar o .hover e o first-child.
Divirtam-se.
Provavelmente os senhores webstandeiros aí têm as suas mini-libs também. Leiam a minha, adaptem, sugiram melhorias, implementem idéias minhas nas suas libs, troquemos conhecimentos.
Funcionalidades:
Coloquei esquemas de zerar propriedades (css reset) padronizando nos diferentes navegadores; tamanhos de títulos; classes especiais pra posicionamento, pra simular tabelas, pra avisos, pra teclas de acesso, pra fazer wrapper, pra simular colunas, pra debugar (com bordas), pra fazer menus drop-down, e pra ativar o .hover e o first-child.
Divirtam-se.
CODE
/* Micox CSS mini-lib 1.0 - 22/02/2008 - elmicox.blogspot.com
A leitura dos comentários é obrigatória para o entendimento */
/* padronizando propriedades pros navegadores ficarem parecidos e corrigindo alguns bugs */
* { margin: 0; padding: 0; outline: 0;
font-weight: inherit; font-style: inherit;
font-size: 100%; font-family: inherit;
line-height: 1.1em; vertical-align: baseline }
p { margin-bottom: 0.5em; }
hr { clear: both; float: none; width: 100%; }
* html body hr { margin: -7px; display: block;} /* os hr tem uma altura extra misteriosa no IE */
a, img { border: none; }
img { vertical-align: middle;}
fieldset { display: block; border: 2px ridge #FFF; padding: 10px; } /* fieldset não é block em todos */
ul, ol { margin-left: 1.5em; list-style-position: outside; }
li { vertical-align: top; line-height: 1.2em;} /* IE: posição vertical do marcador no IE e espaço extra fantasma em lis*/
li a { zoom: 1; line-height: 1.2em; } /* complemento do anterior */
input[type=hidden]{ display: none !important; visibility: hidden !important;} /* input hidden no FF */
button { border: 1px outset #AAA; }
legend { margin-bottom: 1.4em; } /* Fixes incorrect styling of legend in IE6 fieldsets. */
label { display: block;}
table { border-collapse: separate; border-spacing: 0; }
caption, th, thead, tfoot { text-align: center; font-weight: bold; }
blockquote:before, blockquote:after,q:before, q:after { content: “”; }
blockquote, q { quotes: "" ""; }
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* FF 1999 */
white-space: -pre-wrap; /* OP 4-6 */ white-space: -o-pre-wrap; /* OP 7 */ word-wrap: break-word; /* IE 5.5+ */
}
h1 { font-size: 250%; font-weight: normal;}
h2 { font-size: 200%; font-weight: normal;}
h3 { font-size: 150%; font-weight: normal;}
h4 { font-size: 120%; font-weight: normal;}
h5 { font-size: 110%; font-weight: normal;}
h6 { font-size: 100%; font-weight: bold;}
/* centralizando o container (que tem todo o conteúdo da página) */
#container { margin: auto; vertical-align: middle; }
/* classes úteis de posicionamento.
Ex.: Tenho uma lista de caixas separadas por margin. Pra última caixa se alinhar com a borda,
é bom colocar a classe last nela */
.top { margin-top: 0; vertical-align: top; vertical-align: top;}
.bottom { margin-bottom: 0; vertical-align: baseline; vertical-align: bottom;}
.left { margin-left: 0; float: left; }
.right { margin-right: 0; float: right; }
.center { margin: auto; vertical-align: middle; }
.first { margin-top: 0; margin-left: 0; vertical-align: top;}
.last { margin-bottom: 0; margin-right: 0; vertical-align: bottom;}
/* classes úteis na formatação */
.screenreader { display: none; }
.ak { text-decoration: underline; /* access keys */ }
.u { text-decoration: underline; /* textos underline */}
.notice { background-color: #F9FF9A; /*yellow*/}
.error { background-color: #FF8E8E; /*red*/}
.highlight { background:#ff0; }
/* para não precisar do famoso div wrapper [http://www.positioniseverything.net/easyclearing.html] */
.clear { display: inline-block; }
.clear:after, .container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear { display: block; zoom: 1; }
/* fazendo colunas com alturas iguais [http://www.positioniseverything.net/articles/onetruelayout/equalheight] */
.paifullcols { overflow: hidden; width: 99.8%; display: inline-block; }
.paifullcols:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.paifullcols { display: block; zoom: 1; }
.paifullcols .fullcol { float: left; padding-bottom: 1000em; margin-bottom: -999.5em; width: auto }
/* classes para debug: borderchilds, borderdivs e bordercols */
.borderchilds * { border: 1px dashed #CCC;}
.borderchilds span, .borderchilds a, .borderchilds b, .borderchilds strong, .borderchilds i, .borderchilds em,
.borderchilds legend, .borderchilds br { border: none;}
.borderchilds p { border-color: blue; }
.borderchilds div { border-color: red; }
.borderchilds table { border-color: green; }
.borderchilds ul, .borderchilds ol { border-color: cyan; }
.borderchilds .fullcol { border: 1px solid black;}
.borderdivs div, .bordercols .fullcol, .bordercols .paifullcols { border: 1px dashed red;}
/*
Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis
by Micox - elmicox.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License
*/
.menu-hv, .menu-vv { position: relative; margin: 0; padding: 0; display: block; zoom: 1;}
.menu-hv * , .menu-vv * { margin: 0; padding: 0; list-style: none}
.menu-hv li , .menu-vv li { position: relative; line-height: 1.2em; vertical-align: top }
.menu-hv a , .menu-vv a { display: block; zoom: 1; line-height: 1.2em }
.menu-hv li ul, .menu-vv li ul { position: absolute; visibility: hidden }
.menu-hv li:hover ul, .menu-vv li:hover ul,
.menu-hv li.hover ul, .menu-vv li.hover ul { visibility: visible }
.menu-hv li:hover ul ul, .menu-vv li:hover ul ul,
.menu-hv li.hover ul ul, .menu-vv li.hover ul ul { visibility: hidden }
.menu-hv li li:hover ul, .menu-vv li li:hover ul,
.menu-hv li li.hover ul, .menu-vv li li.hover ul { visibility: visible }
.menu-hv li li:hover ul ul, .menu-vv li li:hover ul ul,
.menu-hv li li.hover ul ul, .menu-vv li li.hover ul ul { visibility: hidden }
.menu-hv li li li:hover ul, .menu-vv li li li:hover ul,
.menu-hv li li li.hover ul, .menu-vv li li li.hover ul { visibility: visible }
/* características horizontal-vertical */
.menu-hv:after, .menu-hv.after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden}
.menu-hv li { float: left; }
.menu-hv li ul li { float: none; }
.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
/* características vertical-vertical */
.menu-vv { float: left; }
.menu-vv li ul { left: 100%; top: 0; }
/* ****************************************
ALTERE ABAIXO. defina a largura dos itens do seu menu abaixo
ou apague as linhas se for definir em outro lugar */
.menu-hv li { width: 100px; background-color: cyan }
.menu-vv li { width: 100px; background-color: cyan }
.menu-hv li a:hover { background-color: gray }
.menu-vv li a:hover { background-color: gray }
/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 */
* html * { color: expression( (function(who){ if(!who.MXPC && who.nodeName != 'A'){
who.MXPC = '1';
who.onmouseenter=function(){ who.className += ' hover'};
who.onmouseleave=function(){ who.className = who.className.replace(' hover','')};
(who==who.parentNode.firstChild) ? who.className += ' first-child' : '';
} } )(this) , 'auto') }
A leitura dos comentários é obrigatória para o entendimento */
/* padronizando propriedades pros navegadores ficarem parecidos e corrigindo alguns bugs */
* { margin: 0; padding: 0; outline: 0;
font-weight: inherit; font-style: inherit;
font-size: 100%; font-family: inherit;
line-height: 1.1em; vertical-align: baseline }
p { margin-bottom: 0.5em; }
hr { clear: both; float: none; width: 100%; }
* html body hr { margin: -7px; display: block;} /* os hr tem uma altura extra misteriosa no IE */
a, img { border: none; }
img { vertical-align: middle;}
fieldset { display: block; border: 2px ridge #FFF; padding: 10px; } /* fieldset não é block em todos */
ul, ol { margin-left: 1.5em; list-style-position: outside; }
li { vertical-align: top; line-height: 1.2em;} /* IE: posição vertical do marcador no IE e espaço extra fantasma em lis*/
li a { zoom: 1; line-height: 1.2em; } /* complemento do anterior */
input[type=hidden]{ display: none !important; visibility: hidden !important;} /* input hidden no FF */
button { border: 1px outset #AAA; }
legend { margin-bottom: 1.4em; } /* Fixes incorrect styling of legend in IE6 fieldsets. */
label { display: block;}
table { border-collapse: separate; border-spacing: 0; }
caption, th, thead, tfoot { text-align: center; font-weight: bold; }
blockquote:before, blockquote:after,q:before, q:after { content: “”; }
blockquote, q { quotes: "" ""; }
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap !important; /* FF 1999 */
white-space: -pre-wrap; /* OP 4-6 */ white-space: -o-pre-wrap; /* OP 7 */ word-wrap: break-word; /* IE 5.5+ */
}
h1 { font-size: 250%; font-weight: normal;}
h2 { font-size: 200%; font-weight: normal;}
h3 { font-size: 150%; font-weight: normal;}
h4 { font-size: 120%; font-weight: normal;}
h5 { font-size: 110%; font-weight: normal;}
h6 { font-size: 100%; font-weight: bold;}
/* centralizando o container (que tem todo o conteúdo da página) */
#container { margin: auto; vertical-align: middle; }
/* classes úteis de posicionamento.
Ex.: Tenho uma lista de caixas separadas por margin. Pra última caixa se alinhar com a borda,
é bom colocar a classe last nela */
.top { margin-top: 0; vertical-align: top; vertical-align: top;}
.bottom { margin-bottom: 0; vertical-align: baseline; vertical-align: bottom;}
.left { margin-left: 0; float: left; }
.right { margin-right: 0; float: right; }
.center { margin: auto; vertical-align: middle; }
.first { margin-top: 0; margin-left: 0; vertical-align: top;}
.last { margin-bottom: 0; margin-right: 0; vertical-align: bottom;}
/* classes úteis na formatação */
.screenreader { display: none; }
.ak { text-decoration: underline; /* access keys */ }
.u { text-decoration: underline; /* textos underline */}
.notice { background-color: #F9FF9A; /*yellow*/}
.error { background-color: #FF8E8E; /*red*/}
.highlight { background:#ff0; }
/* para não precisar do famoso div wrapper [http://www.positioniseverything.net/easyclearing.html] */
.clear { display: inline-block; }
.clear:after, .container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear { display: block; zoom: 1; }
/* fazendo colunas com alturas iguais [http://www.positioniseverything.net/articles/onetruelayout/equalheight] */
.paifullcols { overflow: hidden; width: 99.8%; display: inline-block; }
.paifullcols:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.paifullcols { display: block; zoom: 1; }
.paifullcols .fullcol { float: left; padding-bottom: 1000em; margin-bottom: -999.5em; width: auto }
/* classes para debug: borderchilds, borderdivs e bordercols */
.borderchilds * { border: 1px dashed #CCC;}
.borderchilds span, .borderchilds a, .borderchilds b, .borderchilds strong, .borderchilds i, .borderchilds em,
.borderchilds legend, .borderchilds br { border: none;}
.borderchilds p { border-color: blue; }
.borderchilds div { border-color: red; }
.borderchilds table { border-color: green; }
.borderchilds ul, .borderchilds ol { border-color: cyan; }
.borderchilds .fullcol { border: 1px solid black;}
.borderdivs div, .bordercols .fullcol, .bordercols .paifullcols { border: 1px dashed red;}
/*
Menus drop-down horizontal-vertical (hv) e vertical-vertical (vv) até 4 níveis
by Micox - elmicox.blogspot.com - Ver. 2.0 - 20/02/08 - Creative Commons License
*/
.menu-hv, .menu-vv { position: relative; margin: 0; padding: 0; display: block; zoom: 1;}
.menu-hv * , .menu-vv * { margin: 0; padding: 0; list-style: none}
.menu-hv li , .menu-vv li { position: relative; line-height: 1.2em; vertical-align: top }
.menu-hv a , .menu-vv a { display: block; zoom: 1; line-height: 1.2em }
.menu-hv li ul, .menu-vv li ul { position: absolute; visibility: hidden }
.menu-hv li:hover ul, .menu-vv li:hover ul,
.menu-hv li.hover ul, .menu-vv li.hover ul { visibility: visible }
.menu-hv li:hover ul ul, .menu-vv li:hover ul ul,
.menu-hv li.hover ul ul, .menu-vv li.hover ul ul { visibility: hidden }
.menu-hv li li:hover ul, .menu-vv li li:hover ul,
.menu-hv li li.hover ul, .menu-vv li li.hover ul { visibility: visible }
.menu-hv li li:hover ul ul, .menu-vv li li:hover ul ul,
.menu-hv li li.hover ul ul, .menu-vv li li.hover ul ul { visibility: hidden }
.menu-hv li li li:hover ul, .menu-vv li li li:hover ul,
.menu-hv li li li.hover ul, .menu-vv li li li.hover ul { visibility: visible }
/* características horizontal-vertical */
.menu-hv:after, .menu-hv.after { content: "."; line-height: 0px; clear: both; display: block; visibility: hidden}
.menu-hv li { float: left; }
.menu-hv li ul li { float: none; }
.menu-hv li ul li ul { position: absolute; left: 100%; top: 0; }
/* características vertical-vertical */
.menu-vv { float: left; }
.menu-vv li ul { left: 100%; top: 0; }
/* ****************************************
ALTERE ABAIXO. defina a largura dos itens do seu menu abaixo
ou apague as linhas se for definir em outro lugar */
.menu-hv li { width: 100px; background-color: cyan }
.menu-vv li { width: 100px; background-color: cyan }
.menu-hv li a:hover { background-color: gray }
.menu-vv li a:hover { background-color: gray }
/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 */
* html * { color: expression( (function(who){ if(!who.MXPC && who.nodeName != 'A'){
who.MXPC = '1';
who.onmouseenter=function(){ who.className += ' hover'};
who.onmouseleave=function(){ who.className = who.className.replace(' hover','')};
(who==who.parentNode.firstChild) ? who.className += ' first-child' : '';
} } )(this) , 'auto') }
Mais recentes em WebStandards e CSS
- Mini-lib css reset do micox
- Por Micox - Abaixo mostrarei tipo uma mini-lib css com o qual eu...
- Mapear regiao
- Por faro - Substituindo a tag map pelo css....
- Layout diferente.
- Por faro - Boa noite pessoal como vão todos... esse é meu primeiro...
- Rollover via css
- Por NightSpy - Achei este efeito na net, como não achei novamente,...
- Menu drop-down só com css - até 4 níveis
- Por Micox - Código pronto - só copiar, colar e usar...
Ver mais Artigos de WebStandards e CSS.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com
Comentários:
faro disse:
parabens pelo artigo. só uma coisa me explica o que esse negocinho diabolico e interessante ai em cima é. por que chama-lo de minilib.
valew.
Micox disse:
A parte do reset (primeiras declarações de * até h6) serve para padronizar algumas coisas nos diferentes navegadores. É só ler nos comments heheh.
Exemplo:
- a tag h1 é de um tamanho no Firefox e de outro tamanho no IE6.
- A tag fieldset é inline no IE e block no FF (ou o contrário, não me lembro haeheah)
A parte que eu digo sobre mini-lib é pra facilitar o desenvolvimento e você não ter que ficar criando as mesmas declarações de sempre e meeesmas classes de sempre.
Exemplo:
- O container que engloba todo o site, agente costuma sempre deixá-lo centralizado, certo? Então, já deixei isto pronto.
- Se você costuma exibir avisos quando um cara preencher um formulário errado, que tal colocar a classe 'notice' neste aviso?
- Se você quer fazer colunas com alturas iguais, vocÊ pode procurar na net várias técnicas para isto OU apenas colocar a classe 'fullcol' em cada coluna e a 'paifullcols' na div pai destas colunas. Simples.
- Se quer debugar sua página inteira ou só uma parte dela, coloque a classe 'borderchilds' no elemento a ser debugado ou no body.
etc etc. É só ler os comments
faro disse:
Brigado pela explicacao. na verdade eu li sim os comentarios, minha paranoia foi a expressão mini-lib pensei que fosse algo reservado. entendi perfeitamente.
A parte do reset (primeiras declarações de * até h6) serve para padronizar algumas coisas nos diferentes navegadores. É só ler nos comments heheh.
Exemplo:
- a tag h1 é de um tamanho no Firefox e de outro tamanho no IE6.
- A tag fieldset é inline no IE e block no FF (ou o contrário, não me lembro haeheah)
A parte que eu digo sobre mini-lib é pra facilitar o desenvolvimento e você não ter que ficar criando as mesmas declarações de sempre e meeesmas classes de sempre.
Exemplo:
- O container que engloba todo o site, agente costuma sempre deixá-lo centralizado, certo? Então, já deixei isto pronto.
- Se você costuma exibir avisos quando um cara preencher um formulário errado, que tal colocar a classe 'notice' neste aviso?
- Se você quer fazer colunas com alturas iguais, vocÊ pode procurar na net várias técnicas para isto OU apenas colocar a classe 'fullcol' em cada coluna e a 'paifullcols' na div pai destas colunas. Simples.
- Se quer debugar sua página inteira ou só uma parte dela, coloque a classe 'borderchilds' no elemento a ser debugado ou no body.
etc etc. É só ler os comments
elbrinner disse:
abs
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).