Há uma abundância de tutoriais CSS estão disponíveis na internet, mas poucos são os tutoriais úteis. Neste tutorial, você vai encontrar 5 passos para escrever melhor código CSS para o seu próximo projeto do Web site. Eu espero que você aprecie este tutorial.

1. ResetCss

Você deve sempre usar redefinir se ele pode ser Eric Meyer Reset, Reset do YUI, ou redefinir seu próprio personalizado, basta usar algo.

O objetivo de redefinir um estilo é o de reduzir inconsistências navegador em coisas como alturas de linha padrão, as margens e tamanhos de letra de títulos, e assim por diante - Eric Meyer

  html body, div, span, applet, object, H1, H2, H3, H4, H5, H6, iframe 
  blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, 
  font, img, ins, kbd, q, s, samp, small, sub greve, forte, sup, tt, var, 
  fieldset dd, dl, dt, form, label, legend, table, caption, tbody, TFOOT 
  thead, tr, th, td, input, select, textarea 

  ; padding : 0 ; } (Margin: 0; padding: 0;) 


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 

2. CSS Taquigrafia

Um dos melhores e mais importante característica da CSS é a capacidade de escrever o código de forma minimizada.

Código incorreto

  ( 
  margin-top: 10px; 
  margin-right: 7px; 
  margin-bottom: 10px; 
  margin-left: 7px; 

  padding-top: 10px; 
  padding-left: 7px; 
  padding-bottom: 10px; 
  padding-left: 7px; 

  font-Size: 12px; 
  font-weight: bold; 
  ; font-family: Arial, Tahoma, sans-serif; 
  ) 

Correct Code

  ( 
  ; margin: 10px 7px 10px 7px; 
  ; padding: 10px 7px 10px 7px; 
   Arial, Verdana, Tahoma, sans-serif ; font: bold 12px Arial, Tahoma, sans-serif;  
  ) 

3. Não usando classes tantos e Id's

Tenho notado que a maioria dos iniciantes adicionar classes e ID's para quase todos os elementos na página, o que não é required.There são alguns exemplos abaixo do que eu estou a referir.

Código incorreto

 class = "wrapper" > <p class = "heading" > <strong class = "subheading" > Welcome </strong> </p> <p class = "linka" > <a href = "#" class = "link" > Home </a> </p> <p class = "linkb" > <a href = "#" class = "link" > About </a> </p> <p class = "linkc" > <a href = "#" class = "link" > Services </a> </p> <p class = "linkd" > <a href = "#" class = "link" > Contact </a> </p> </div> <div id = classe "wrapper" = "wrapper" classe font> = "heading" classe> <strong "subheading" => Bem-vindo </ strong> </ p classe font> = "linka"> <a href = "#" class = "link"> Início </ a> </ p classe font> = "linkb" href <a> class = "#" = "link"> Sobre </ a> </ p> </ p classe href <a = "linkc"> class = "#" = "link"> Serviços </ a> </ p classe font> = "linkd" href <a> class = "#" = "link"> Contacto </ a> </ p> </ div> 

Aqui está o código correto

Correct Code

 > <h1> Welcome </h1> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Contact </a> </li> </ul> </div> <div id = "wrapper"> <h1> Bem-vindo </ h1> <ul> href <a <li> "#" => Home </ a> </ li> <li> href <a "#" => Sobre </ a> </ li> <li> href <a "#" => Serviços </ a> </ li> <li> href <a "#" => Contato </ a> </ li> < / ul> </ div> 

4. Organização você Stylesheet

Você deve organizar o seu estilo de modo que é fácil encontrar coisas e itens relacionados estão juntos. Use comentários de forma eficaz. Por exemplo, há o exemplo vai lhe dizer como organizar o seu estilo

  / * Reset * / 
   elements Remover margem e elementos de enchimento 

  / * Elementos básicos * / 
  Definem o estilo de elementos básicos: corpo, H1, H2, H3, H4, H6, ol, ul, dl, p, etc 

  / * Classes genérico * / 
  Definem o estilo de classes genéricas: as coisas simples como remover o fundo,  
  flutuante para os lados, etc  
  / * Layout Basic * / 

  / * Layout Basic * / 
  Definir o estilo de layout básico: cabeçalho.  rodapé, barra lateral, etc 

  / * Header * / 
  Definir o estilo de cabeçalho 

  / * Content * / 
  Definir o estilo para a área de conteúdo 

  / * Footer * / 
  Definir o estilo para o rodapé 

  / * Etc * / 
  Continue 

5. Use Stylesheets Condicional

Internet Explorer é o buggy mais de todos os navegadores. Felizmente você pode usar comentários condicionais para gerenciar o CSS que é servido para o IE. Se eu precisar eu tenho um estilo chamado ie6.css que atinge as versões mais antigas do IE. Ele me permite gerenciar CSS para browsers mais rápida e fácil.

Aqui está o exemplo

  <!--[ if lte IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > rel <link "stylesheet" href = = = "text/css" tipo "ie6.css" media = "screen" /> 
 
  -- > <! [Endif] -> 

Conclusão

Estas são apenas algumas das dicas que me ajudam a escrever melhor código. Espero que o tutorial também irá ajudá-lo a escrever melhor e mais limpo o código. Aplicar estas dicas para seus projetos atuais e no próximo, e você certamente irá apreciar os esforços.

Se você acha que tutorial pode ser mais melhor, por compartilhar conosco. Comentário nós

Se você gostaria de receber mais inspiração de nós, por favor, considerem assinar a nossa feed de RSS ou por e-mail.

Filed under: Css , Tutorials by admin