Dicas de CSS para iniciantes – Parte 1

0

Nos dias atuais, mesmo com tantas ferramentas como Html5 CSS3 e outras ferramentas que nos ajudam a desenvolver para Web, sempre tem alguém iniciando no mundo da programação, seja por hobby ou por crescimento profissional. Aqui no blog temos como base um único sentido : Distribuir conhecimento, mesmo que pouco a todos de forma SIMPLES.

Levando a esse lado, vou levantar algumas dicas de Css para quem está começando ou até mesmo para quem já sabe e talvez sirva de ajuda na hora de desenvolver seu html e Css. Para isto pretendo dividir o artigo em partes que vai facilitar ainda mais a vida de quem está aprendendo.

Vamos lá?

css

css

  1. Use reset.css
    Quando se trata de renderização de estilos CSS, navegadores como o Firefox e o Internet Explorer ( Bendito seja )  têm maneiras diferentes de lidar com eles. Cada motor de renderização de navegador trata o Css de uma maneira como padrão.Por exemplo: Um parágrafo <p></p> tem uma margem diferente por padrão para o mozilla e para o IE, ou seja, caso você não declarar nada anteriormente o seu site inteiro poderá ficar desigual justamente por isto.Utilizando reset.css  você redefine estilos todos fundamentais, de modo que você começa com o mesmo padrão de Css para todos os navegadores. Para aprender a utilizar reset basta acessar este link do nosso Blog que fala justamente sobre isto : Reset CSS
  2. Use Taquigrafia CSS
    A Taquigrafia CSS permite um modo mais curto de escrever seus códigos CSS, e o mais importante de tudo- você deixa o seu código mais fácil de entender.Veja um exemplo :
      
      /* Antes */
      .header {
              background-color: #fff; 
              background-image: url(imagem.gif);  
              background-repeat: no-repeat;
              background-position: top left; 
            }  
       /* Depois */
                .header {  
              background: #fff url(imagem.gif) no-repeat top left;  
            }  
            
            
    Viu só a diferença?
  3. Compreender classe e ID
    Estes dois seletores muitas vezes confundem os iniciantes. Em CSS, classe é representado por um ponto “.” enquanto ID é um hash “#”.  Resumidamente ID é usado em estilo que é único de uma tag html e não se repete no documento, já a classe por outro lado, pode ser reutilizada sempre que necessária.
  4. Conhecendo o atributo  !important
    Qualquer estilo marcado com !importante será levado em uso independentemente se há uma regra de substituição abaixo do atributo Css utilizado. Para aprender mais sobre a utilização de !important veja esse artigo aqui no Blog : !important css
  5. Tabela de compatibilidade de CSS entre Navegadores
    Todos nós sabemos que cada navegador tem diferentes formas de renderização de estilos CSS. É bom ter uma referência, um gráfico ou uma lista que mostra toda a compatibilidade CSS para cada browser. Para acessá-la veja por este link

 

Bom pessoal, por hoje é só! Logo mais tratei a segunda parte desta lista, e quem sabe uma terceira! 😉

Espero que tenham gostado.

Siga-nos no Facebook e acompanhe todas as postagens do blog!

Compartilhe.