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
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.
- As IDs indentificam um elemento específico e devem ser únicas, podem apenas ser usadas uma vez na página.
- Consideramos que uma ID esteja em um nível mais alto que a class, já que é mais específica.
CLASS.
- 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.
- Sempre inicia em uma nova linha.
- Height, line-height, top e bottom margins podem ser manipuladas.
- Width fica como padrão 100% do elemento a qual pertence.
Inline.
- Sempre inicia na mesma linha.
- Height, line-height, top e bottom margins podem ser manipuladas.
- 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.
