mai162009

[CSS] 5 dicas úteis para seu CSS

Sempre é bom ter um CSS bem estruturado em seu website, por isso estarei postando a baixo 5 dicas úteis para você implementar em seu CSS e entre elas uma dica para o IEca.

FONT

Você pode por várias propriedades de fontes em uma única linha de código.

h3.texto {
font-size: 28px;
font-weight: bold;
font-family: “Arial”, Helvetica, sans-serif;
color: #333333;
line-height: 24px;
}

Você pode resumir esse código em apenas duas linha:


h3.texto {
font: 28px “Arial”, Helvetica, sans-serif;
color: #333;
}

MARGIN/PADDING


Image illustrating the relationship between content, padding, borders, and margins.


A imagem acima mostra a diferença entre margin e padding, nem preciso dizer que o IEca tem um problema com padding, então citarei também uma dica para o IEca ignorar uma propriedade.

São propriedades de margin:
.caixa {
margin-top: 10px;
margin-bottom: 20px;
margin-left: 5px;
margin-right: 5px;
}
Você pode resumir este código em apenas uma linha:
.caixa { margin: 10px 5px 20px 5px }
para a propriedade magin você deve por os seguintes valores: margin: top right bottom left;

CLASS E ID

O símbolo para o seletor class é (.) e o da id é (#), tudo bem mas qual a diferença entre eles?

ID.

  1. As IDs indentificam um elemento específico e devem ser únicas, podem apenas ser usadas uma vez na página.
  2. Consideramos que uma ID esteja em um nível mais alto que a class, já que é mais específica.

CLASS.

  1. Uma class marca um elemento como um membro do grupo e pode ser usada várias vezes.

IGNORADO PELO IE - !important

Essa é uma dica que fará com que um valor seja ignorado pelo IE mas será interpretado por todos os outros browsers.
!important será ignorado pelo IE.

caixa.margin: 20px !important; margin: 10px;
Botamos 20px para margin que será ignorado pelo IE, portanto no IE o margin será 10px.

Block vs Inline

A maioria dos elementos html estão como block ou inline, mas qual a diferença entre eles?

Block.

  1. Sempre inicia em uma nova linha.
  2. Height, line-height,  top e bottom margins podem ser manipuladas.
  3. Width fica como padrão 100% do elemento a qual pertence.

Inline.

  1. Sempre inicia na mesma linha.
  2. Height, line-height, top e bottom margins podem ser manipuladas.
  3. Width fica do tamanho que está o texto/imagem e não pode ser manipulado.
Bom são estas as 5 dicas para css, eu as concidero importantes para o desenvolvimento da sua folha de estilos.
Obrigado. ;)
  • Share/Save/Bookmark

Seja o primeiro a comentar

Comentários RSS Trackback URL

Deixe uma resposta