CSS
Última modificação: 31 maio 2011
Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.
Já que estamos entrando no mundo “obscuro” dos hacks, iremos comentar sobre o caso específico do IE6, o qual temos que passar tantas vezes!
Ao adicionar esta linha em seu CSS, ela será interpretada somente pelo IE6:
* html { propriedade: valor; }
Particularmente preferimos adotar essa prática ao invés de um conditional comment para o IE6, para evitar de termos diversos CSS específicos para cada navegador. Portanto só usamos o CSS para IE7 caso seja extremamente necessário.
Além do mais, este hack é válido ao contrário de outras opções que encontramos em outros exemplos.
* Update: Classe no html. Como usamos html5, colocamos na tag html por conditional comments uma classe relativa ao navegador Internet Explorer.
Uma das diversas limitações apresentadas pelo IE6 está relacionada ao uso de pseudo-classes. Uma delas é a “:hover” que só pode ser usada em links.
Porém, em alguns casos, precisamos dela para fazer determinados efeitos ou funcionalidades do site, como menus dropdown.
Para poder aplicar a pseudo-classe “:hover”, “:active” ou “:focus” em qualquer elemento no IE6, você deve:
– Baixar o arquivo .htc neste link;
– Inserir o código abaixo em seu CSS, utilizando o caminho do arquivo .htc relativo ao HTML:
body { behavior: url(css/csshover2.htc); } /* inclui efeito :hover, :active e :focus para Internet Explorer 6 */
Última modificação: 31 maio 2011
Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.
Há uma forma de conseguirmos fazer um elemento “englobar” os elementos que nele estão inseridos, mesmo usando “float”.
Por exemplo, em uma galeria de imagens, onde cada <li> usa “float: left”, a lista, teoricamente, não conseguiria agregar todos os itens, pois estes usam “float”.
Para reverter este caso, basta usar a classe “contemfloat”, bastante utilizada em nossos projetos:
/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */
Caso você precise se algo mais rápido e prático, pode usar a propriedade overflow no CSS dessa forma:
overflow: hidden;
* Update: Reformulação do CSS padrão. Procuramos evitar o uso desse método, preferimos optar pelo uso do overflow e caso exista problema com o IE6 incluímos “height: 1%;” apenas para esse navegador.
Última modificação: 31 maio 2011
Quando o layout necessita utilizar alguma fonte customizada para títulos ou textos específicos, temos que utilizar imagens ao invés do texto puro.
A técnica image replacement serve justamente para exibir uma imagem (com a fonte customizada), ao mesmo tempo que no HTML há um texto limpo, para que este seja acessível aos sistemas de busca e leitores de tela, por exemplo.
Supondo que nosso HTML seja o seguinte:
<h1>Título do site</h1>
Faremos nosso CSS para que substitua este texto por uma imagem (de 200px por 50px por exemplo):
h1 { width: 200px; height: 50px; background: url(../imagens/titulo.png) no-repeat; text-indent: -999em; overflow: hidden; }
Obviamente que a largura, altura e caminho da imagem deverão ser ajustados, de acordo com a necessidade.
Última modificação: 31 maio 2011
Há diversas maneiras de definir determinadas propriedades do CSS como background, font, margin, padding, etc.
Background
Como o próprio nome diz, a propriedade background define o fundo do elemento, com uma cor sólida ou uma imagem. Neste último caso, pode-se dizer se esta será repetida, seu posicionamento e comportamento.
seletor {
background-color: #fff;
background-image: url(imagem.jpg);
background-position: bottom;
background-repeat: no-repeat;
}
Como pode-se perceber, esta maneira deixa seu código muito extenso, então vamos abreviar estas propriedades em uma única linha. Neste caso, não há importância na ordem pela qual você dispõe os valores, mas é interessante manter um padrão de escrita:
seletor { #fff background: url(imagem.jpg) bottom no-repeat; }
Color
Como nem todos ainda sabem, é importante comentarmos sobre a abreviação na declaração da escrita das cores. Quando utilizamos os valores hexadecimais, há casos nos quais podemos escrever apenas 3 caracteres, ao invés dos 6 que estamos acostumados.
seletor { color: #aaff00; }
Podemos abreviar desta forma:
seletor { color: #af0; }
A lógica da abreviação é simples: cada caractere representa um par de caracteres da escrita não abreviada.
Margin e padding
A lógica para abreviação das propriedades margin e padding é a mesma. Vejamos o exemplo da escrita sem abreviação:
seletor {
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
margin-left: 1px;
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
}
Para abreviar existem algumas maneiras:
Neste caso, os valores são aplicados para todos os lados do elemento:
seletor { margin: 1px; padding: 1px; }
Se as unidades do topo e rodapé forem as mesmas (1px), esquerda e direita forem iguais entre si (5px), podemos escrever de outra forma:
seletor { margin: 1px 5px; padding: 1px 5px; }
Mas há situações nas quais precisa-se utilizar uma unidade para o topo (1px), outra (igual) para os lados (5px) e mais uma para o rodapé (6px):
seletor { margin: 1px 5px 6px; padding: 1px 5px 6px; }
E, por fim, uma maneira simplificada de escrever as dimensões para todos os lados, mas deve-se seguir o sentido horário, ou seja: top (1px), right (2px), bottom (3px) e left (4px):
seletor { margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px; }
Border
Para abreviar a propriedade border é tão fácil quanto a background, pois não exige uma ordem padrão. Segue abaixo exemplo da escrita sem abreviações:
seletor {
border-width: 1px;
border-style: solid;
border-color: #000;
}
Para abreviar esta propriedade é simples:
seletor { border: 1px solid #000; }
Caso queira estilizar somente a borda do topo, por exemplo, é só acrescentar “-top” após o “border”:
seletor { border-top: 1px solid #000; }
Font
Esta propriedade tem a função de estilizar o tamanho da fonte, sua linha, família, peso, etc. A forma mais complexa de escrita é a seguinte:
seletor {
font-style: normal;
font-variant: small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.3em;
font-family: "Trebuchet MS", Arial, sans-serif;
}
Muitos não sabem que a propriedade line-height se inclui nesta abreviação, por não ter o prefixo “font”. Veja agora a maneira simplificada de escrever a propriedade font:
seletor { font: normal small-caps bold 1em/1.3em "Trebuchet MS", Arial, sans-serif; }
Fique atento para a ordem de escrita e, caso o nome da fonte tenha espaço, escreva utilizando aspas duplas, como no exemplo acima.
List-style
A propriedade list-style é utilizada para estilizar a marcação de itens de lista. A escrita não abreviada é a seguinte:
seletor {
list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);
}
Para escrevê-la de forma simplificada não é necessária uma ordem certa das propriedades. Veja o exemplo da abreviação:
seletor { list-style: circle inside url(bullet.gif); }
Há outras propriedades que podem ser simplificadas, como a outline mas, devido sua falta de suporte, não é necessário exemplificá-la aqui.
Última modificação: 18 fevereiro 2009
Sabemos que o Internet Explorer 6 tem limitações em diversas propriedades do CSS 2.
Supondo que a largura mínima seja 333px, use a regra abaixo:
* html elemento { width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); } /* seta a min-width para o IE */
Agora, se a largura máxima seja 777px, use:
* html elemento { width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); }/* seta a max-width para o IE */
23 2009 janeiro
Autor: g3 em CSS
Última modificação: 22 março 2012
Nosso padrão de organização para estilização é separado entre os seguintes arquivos:
Estilos gerais
- geral.css – para todo o site, versões e dispositivos
- mobile.css – para todo site versão mobile
- tablet.css – para todo site versão tablet
- desktop.css – para todo site versão desktop
- impressao.css – estilos para impressão
Estilos específicos
- templates.css – estilos específicos de todas as páginas. É usado em projetos grandes (várias páginas). Em projetos pequenos os estilos referente a esse arquivo devem ir no geral.css
- mobile_templates.css – estilos específicos de todas as páginas para versão mobile.
- tablet_templates.css – estilos específicos de todas as páginas para versão tablet.
- desktop_templates.css – estilos específicos de todas as páginas para versão desktop.
Os arquivos com estilos gerais incluem os arquivos de estilos específicos via @import, portanto nos arquivos HTML são adicionados apenas os arquivos gerais.
Incluímos no HTML nesse formato:
<link href="css/geral.css?v=1" rel="stylesheet" />
<link href="css/mobile.css?v=1" rel="stylesheet" media="only screen and (min-width: 320px) and (max-width: 479px)" />
<link href="css/tablet.css?v=1" rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 768px)" />
<link href="css/desktop.css?v=1" rel="stylesheet" media="only screen and (min-width: 769px)" />
<link href="css/impressao.css?v=1" rel="stylesheet" media="print" />
<!--[if lt IE 9]>
<link href="css/desktop.css?v=1" rel="stylesheet" />
<script src="js/selectivizr-min.js"></script>
<![endif]-->
*Selectivizr é um script que interpreta pseudo-classes e seletor por atributo no Internet Explorer 6-8.
Caso o projeto seja pequeno, não usamos nenhum arquivo específico, incluímos os estilos nos arquivos: “geral.css”, “mobile.css”, “tablet.css” e “desktop.css”.
No documento de estilos gerais incluímos nosso padrão de estilização para formulários. Que incluí estilos prontos para determinados códigos HTML pré-definidos.
geral.css
/*
Cliente:
Projeto:
--------------
PADROES DE CODIGO - Frameworks FED v3.0
--------------
Nossos projetos sao desenvolvidos de acordo com um padrao de escrita.
Mais informacoes sobre ele em: http://www.webstandards.blog.br/checklist-para-desenvolvimento-css/
Qualquer duvida, mande um e-mail para: contato[at]webstandards.blog.br
--------------
PALETA DE CORES
--------------
#000000 - Textos
*/
/*
--------------
ELEMENTOS e CLASSES
--------------
*/
/* ------- ELEMENTOS ------- */
/* reset */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, menu, form, fieldset, legend, button, figure, section, summary { margin: 0; padding: 0; }
article, aside, details, summary, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
button, fieldset, iframe, img { border: 0; }
input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; }
details summary::-webkit-details-marker { display: none; }
html { font: 100% Arial, Helvetica, sans-serif; color: #000; }
body { font-size: .75em; } /* tamanho da fonte: 12px */
/* formulario */
form ol, form ul { list-style: none; }
form ol li { margin-bottom: .41em; padding: .41em 0; }
.ie6 form ol li { height: 1%; overflow: hidden; }
form #instrucoes_formulario { padding: 1.66em 0; }
form #instrucoes_formulario p { margin-bottom: .83em; }
form #instrucoes_formulario p:last-child { margin-bottom: 0; }
/* label */
form ol label, form ol p, form ol ol li:first-child label { float: left; width: 80px; padding-right: 10px; line-height: 2em; text-align: right; }
/* listas internas */
form ol ol, form ol ul, form ol li li { display: inline-block; vertical-align: top; }
.ie7 form ol ol, .ie7 form ol ul, .ie7 form ol li li, .ie6 form ol ol, .ie6 form ol ul, .ie6 form ol li li { display: inline; }
form ol li li { margin: 0 10px 0 0; padding: 0; }
/* label interno */
form ol li li label, form ol p.erro, form ol li.confirmacao label { float: none; width: auto; padding-right: 0; text-align: left; }
form ol ul li label { margin-right: 0; }
/* mensagem de erro */
form ol p.erro { display: block; }
.ie6 form ol p.erro { display: inline; float: left; }
form p.erro, form ol li.erro { color: #e33; }
form li.erro { border-radius: 3px; }
form li.erro, form input.erro, form textarea.erro { background-color: #f7cac9; }
form ol li li p.erro { margin-left: 0; }
form #instrucoes_formulario, form ol li p.erro, form ol ol li:first-child p.erro, form ol li.confirmacao label, form button { margin-left: 90px; }
/* ------- CLASSES ------- */
/* alinhamentos */
.direita { float: right; }
.esquerda { float: left; }
p.direita, p.esquerda { float: none; }
p.direita { text-align: right; }
p.esquerda { text-align: left; }
.centro { text-align: center; }
/* paginacao */
.paginacao li { display: inline-block; }
.paginacao li a[rel="prev"], .paginacao li a[rel="next"] { }
.paginacao li a[rel="prev"]:hover, .paginacao li a[rel="next"]:hover { }
/* popup */
.popup { display: none; position: absolute; z-index: 10; }
.popup a.fechar { }
.pelicula { position: absolute; z-index: 9; }
/* botoes */
a.botao, a.botao strong { display: inline-block; background: url(../images/botao.png) no-repeat; line-height: 25px; text-decoration: none; }
a.botao { padding-left: 10px; }
a.botao strong { padding-right: 10px; background-position: right 0; font-weight: normal; }
a.botao:hover { background-position: 0 0; }
a.botao:hover strong { background-position: right 0; }
/*
--------------
ESTRUTURA
--------------
*/
/* ------- TOPO ------- */
#topo { }
/* ------- CONTEUDO ------- */
#conteudo { }
/* coluna1 */
#conteudo #coluna1 { }
/* coluna2 */
#conteudo #coluna2 { }
/* ------- RODAPE ------- */
#rodape { }
mobile.css
/*
--------------
MOBILE - Dispositivos com largura de 320px ate 479px
--------------
*/
@import url("mobile_templates.css"); /* estilos especificos dos templates */
/*
--------------
ELEMENTOS e CLASSES
--------------
*/
/* ------- ELEMENTOS ------- */
/* formulario */
/* label */
form ol label, form ol p, form ol ol li:first-child label { display: block; float: none; width: auto; padding-right: 0; text-align: left; }
form #instrucoes_formulario, form ol li p.erro, form ol ol li:first-child p.erro, form ol li.confirmacao label, form button { margin-left: 0; }
/* ------- CLASSES ------- */
.limites { padding: 10px; }
/*
--------------
ESTRUTURA
--------------
*/
/* ------- TOPO ------- */
#topo { }
/* ------- CONTEUDO ------- */
#conteudo { }
/* coluna1 */
#conteudo #coluna1 { }
/* coluna2 */
#conteudo #coluna2 { }
/* ------- RODAPE ------- */
#rodape { }
tablet.css
/*
--------------
TABLET - Dispositivos com largura de 480px ate 768px
--------------
*/
@import url("tablet_templates.css"); /* estilos especificos dos templates */
/*
--------------
ELEMENTOS e CLASSES
--------------
*/
/* ------- ELEMENTOS ------- */
/* ------- CLASSES ------- */
/*
--------------
ESTRUTURA
--------------
*/
/* ------- TOPO ------- */
#topo { }
/* ------- CONTEUDO ------- */
#conteudo { }
/* coluna1 */
#conteudo #coluna1 { }
/* coluna2 */
#conteudo #coluna2 { }
/* ------- RODAPE ------- */
#rodape { }
desktop.css
/*
--------------
DESKTOP - Dispositivos com largura a partir de 769px
--------------
*/
@import url("desktop_templates.css"); /* estilos especificos dos templates */
/*
--------------
ELEMENTOS e CLASSES
--------------
*/
/* ------- CLASSES ------- */
.limites { width: 980px; margin: 0 auto; }
/* chrome frame */
.chrome_frame { position: relative; display: none; height: 116px; padding-top: 25px; background: url(../imagens/chrome-frame-bg.jpg) center 0 repeat-x; font-size: 12px; color: #545454; }
.chrome_frame .limites { position: relative; width: 845px; margin: 0 auto; padding: 0 20px 0 135px; background: url(../imagens/chrome-frame-logo.png) 20px 0 no-repeat; }
.chrome_frame h3 { margin-bottom: 1em; font-size: 1.33em; }
.chrome_frame p { margin: 0 240px 12px 0; }
.chrome_frame a { text-decoration: none; color: #0000ff; }
.chrome_frame .instalar { position: absolute; top: -5px; right: 20px; width: 190px; height: 70px; padding: 15px 10px; border: 1px solid #dadada; background: #fff; font-size: .9em; }
.chrome_frame .instalar p { margin: 0; text-align: center; }
.chrome_frame .instalar a.botao_instalar { display: block; width: 118px; height: 30px; margin: 0 auto 15px; background: url(../imagens/chrome-frame-botao.png) no-repeat; line-height: 30px; font-weight: bold; font-size: 1.3em; text-align: center; text-decoration: none; color: #fff; }
.chrome_frame a.fechar { position: absolute; top: -15px; right: -15px; width: 14px; height: 14px; background: url(../imagens/chrome-frame-fechar.png) no-repeat; text-indent: -9999em; overflow: hidden; }
/*
--------------
ESTRUTURA
--------------
*/
/* ------- TOPO ------- */
#topo { }
/* ------- CONTEUDO ------- */
#conteudo { }
/* coluna1 */
#conteudo #coluna1 { }
/* coluna2 */
#conteudo #coluna2 { }
/* ------- RODAPE ------- */
#rodape { }
impressao.css
/*
--------------
VERSAO PARA IMPRESSAO
--------------
*/
/*
--------------
ELEMENTOS, ESTRUTURA e CLASSES
--------------
*/
/* ------- ELEMENTOS ------- */
* { background: transparent !important; text-shadow: none !important; color: black !important; }
body { font-size: 11pt; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
form { display: none; }
iframe, img { border: 0; }
img { max-width: 100% !important; }
table { border: 1px solid #000; border-collapse: collapse; }
a { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
/* ------- ESTRUTURA ------- */
#topo, #coluna1, #rodape { display: none; }
/* ------- CLASSES ------- */
.paginacao, .popup { display: none; }
“templates.css”, “mobile_templates.css”, “tablet_templates.css” e “desktop_templates.css”
/*
--------------
PAGINAS ESPECIFICAS
--------------
*/
/* ------- PAGINA INICIAL ------- */
#inicial { }
Faça download do Framework padrão e veja os arquivos, organização das pastas e ajuste conforme sua necessidade.
