Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

15 2009 outubro

Ordem dos atributos HTML

Autor: g3 em HTML

Incrementamos o conteúdo do Checklist para HTML.

Assim como temos definido a ordem das propriedades CSS, também documentamos uma ordem para os atributos de HTML.

Agora o Checklist para HTML possui a seção sobre Ordem dos atributos HTML.

Tags: , ,

2 comentários

23 2009 janeiro

Documento base para CSS

Autor: g3 em CSS

Documento base para desenvolvimento CSS de projetos PEQUENOS:

estilo.css

/*
Cliente: Nome do Cliente
Projeto: Nome do Projeto
*/

/*
--------------
PALETA DE CORES
--------------

#000    - Titulos principais / texto icones principais
#6b6b6b - Links / textos
#cf191a - Mouse over links / destaques
#ff7621 - Telefone Central de Vendas
#474646 - Fontes botoes
#f63 - Laranja para destaque

*/

/*
--------------
ORDEM DOS ATRIBUTOS
--------------

{ position:; top:; left:; float:; clear:; display:; width:; height:; margin:; padding:; border:; background:; font:; text:; color:; }

*/

/*
--------------
ELEMENTOS e CLASSES
--------------
*/

/* ------- GERAL ------- */
* { margin: 0; padding: 0; z-index: 1; } /* reseta todas as margens, paddings e define o nivel das camadas do site */

.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; }

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

Documento base para desenvolvimento CSS de projetos GRANDES:

estilo.css

/*
Cliente: Nome do Cliente
Projeto: Nome do Projeto
*/

@import url(estilo_geral.css); /* Elementos utilizados em todo o site, incluindo classes gerais */
@import url(estilo_paginas.css); /* Estilos referentes as paginas especificas do site */

body { behavior: url(css/csshover2.htc); } /* Inclui efeito :hover, :active e :focus para Internet Explorer 6 */

Tags:

1 comentário

23 2009 janeiro

Documento base para HTML

Autor: Carlitos em HTML

Gostaria de padronizar seus documentos HTML? Uma boa forma de começar seu código é com o nosso exemplo utilizado pela equipe, ao início de todos os projetos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="Carlos Eduardo de Souza" />
  <title></title>
  <link href="css/estilo.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
</body>
</html>

Se o site precisar de uma versão específica para impressão, é só adicionar esta linha logo abaixo do CSS normal:

  <link href="css/estilo_print.css" rel="stylesheet" type="text/css" media="print" />

* Não usamos mais conditional comments para o Internet Explorer 7, salvo os casos em que seja realmente necessário.

Tags:

7 comentários