Hai unha abundancia de tutoriais CSS están dispoñibles na Internet, pero poucos son os tutoriais útiles. Neste tutorial, vai atopar 5 pasos para escribir mellor código CSS para o seu próximo proxecto do sitio web. Eu espero que apreciar este tutorial.

1. ResetCss

Debes usar axustar se pode ser Eric Meyer Reset, Reset do YUI, ou axustar o seu propio personalizado, simplemente usar algo.

O obxectivo de redefinir o seu estilo é o de reducir inconsistencia navegador en cousas como alturas de liña por defecto, as marxes e tamaños de letra de títulos, e así 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, en, 
  font, img, ins, kbd, q, s, samp, small, sub folga, 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

Un dos mellores e máis importante característica de CSS é a capacidade de escribir o código de forma minimizado.

Código incorrecto

  ( 
  margin-top: 10px; 
  margin-right: 7px; 
  font-size: 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

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

3. Non usar clases tantos e Id's

Teño notado que a maioría dos principiantes engadir clases e ID's para case todos os elementos na páxina, o que non é required.There son algúns exemplos por baixo do que eu estou a referir.

Código incorrecto

 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 = clase "wrapper" = "wrapper" clase font> = "heading" clase> <div "subheading" => Benvidos </ strong> </ p clase font> = "link"> <a href = "#" class = "link"> Inicio </ a> </ p clase font> = "linkb" href <a> class = "#" = "link"> Quen </ a> </ p> </ p clase href <a = "linkc"> class = "#" = "link"> Servizos </ a> </ p clase font> = "linkd" href <a> class = "#" = "link"> Contacto </ a> </ p> </ div> 

Aquí está o código correcto

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> Benvido </ h1> <ul> href <a <li> "#" => Home </ a> </ li> <li> href <a "#" => sobre </ a> </ li> <li> href <a "#" => Servizos </ a> </ li> <li> href <a "#" => Contacto </ a> </ li> < / strong> </ div> 

4. Organización vostede stylesheet

Ten que organizar o seu estilo de xeito que é fácil atopar cousas e elementos relacionados están xuntos. Use comentarios de forma eficaz. Por exemplo, hai o exemplo lle vai dicir como organizar o seu estilo

  / * Reset * / 
   elements Eliminar marxe e elementos de recheo 

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

  / * Clases xenérico * / 
  Definen o estilo de clases xenéricas: as cousas sinxelas como eliminar o fondo,  
  flotante para os lados, etc  
  / * Layout Basic * / 

  / * Layout Basic * / 
  Definir o estilo do esquema básico: cabeceira.  rodapé, barra lateral, etc 

  / * Header * / 
  Definir o estilo de cabeceira 

  / * Content * / 
  Definir o estilo para a área de contido 

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

  / * Etc * / 
  Continúe 

5. Use Stylesheets Condicional

Internet Explorer é o buggy máis de todos os navegadores. Feliz pode usar comentarios condicionais para xestionar o CSS que está servindo para IE. Se eu ter eu teño un estilo chamado ie6.css que atinxe as versións máis antigas do IE. El me permite xestionar CSS para navegadores máis rápida e fácil.

Aquí 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] -> 

Conclusión

Estas son só algunhas das suxestións que me axudan a escribir mellor código. Espero que o tutorial tamén pode axudar a escribir mellor e máis limpo o código. Aplicar estas suxestións para os seus proxectos actuais e no seguinte, e certamente pode apreciar os esforzos.

Se pensas que titorial pode ser máis mellor, por compartir connosco. Comentario nós

Se desexa recibir máis inspiración de nós, por favor, consideren asinar a nosa feed de RSS ou por e-mail.

Arquivo en: Css, Tutoriais por admin