Hi ha un munt de tutorials de CSS estan disponibles a Internet, però pocs són els tutorials útils. En aquest tutorial es troba 5 passos per escriure millor codi CSS per al seu projecte de pàgina web següent. Espero que gaudeixin d'aquest tutorial.

1. ResetCss

Sempre ha d'usar restablir Si podeu Eric Meyer He perdut, la reposició YUI, o restablir la seva costum, només ha d'utilitzar alguna cosa.

L'objectiu de restablir un full d'estils és reduir navegador inconsistències en coses com l'altura de línia per defecte, els marges i mides de font de les partides, i així successivament - Eric Meyer

  el cos de l'HTML, div, span, applet, objecte, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, sigla, adreça, big, cite, code, del, dfn, em, 
  font, img, ins, kbd, q, s, samp, petites, vaga, fort, sub, sup, tt, var, 
  fieldset dd, DL, DT, la forma, l'etiqueta, la llegenda, el quadre, el títol, tbody, TFOOT, 
  thead, tr, th, td, input, select, textarea 

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


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

2. CSS Taquigrafía

Un dels millors i més important característica de la CSS és la capacitat d'escriure codi d'una manera minimitzada.

Codi Incorrecte

  ( 
  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, Verdana, Tahoma, sans-serif; 
  ) 

Corregir Codi

 : 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, Verdana, Tahoma, sans-serif;) 

3. No utilitzar tantes classes i les ID's

He notat que la majoria dels principiants afegir classes i la identificació de gairebé tots els elements de la pàgina, que no és required.There són alguns exemples a continuació del que em refereixo.

Codi Incorrecte

 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 = "wrapper" class = "wrapper"> classe <p "heading" => classe <strong "subheading" => Benvinguts </ strong> </> classe p <p "linka" => <a href = "#" class = "link"> Inici </ a> </> classe p <p "linkb" => href <a = "#" class = "link"> Quant a </ a> </ p> <p = "linkc"> href classe <a = "#" class = "link"> Serveis </ a> </> classe p <p "linkd" => href <a = "#" class = "link"> Contacte </ a> </ p> </ div> 

Aquí està el codi correcte

Corregir Codi

 > <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> Benvingut </ h1> <ul> <li> href <a "#" => Inici </ a> </ li> <li> href <a "#" => Quant a </ a> </ li> <li> href <a "#" => Serveis </ a> </ li> <li> href <a "#" => Contacte </ a> </ li> < / ul> </ div> 

4. Organització a la qual d'estils

Vostè ha d'organitzar el seu full d'estils per tal que sigui fàcil trobar les coses i elements relacionats són junts. Utilitza comentaris de manera eficaç. Per exemple, està l'exemple li dirà com organitzar el seu full d'estil

  / * Reset * / 
   elements Marge de treure i elements de farciment 

  / Elements bàsics * * / 
  Definir l'estil dels elements bàsics: cos, H1, H2, H3, H4, H6, ol, ul, dl, p, etc 

  / * Classes genèriques * / 
  Definir l'estil de les classes genèriques: les coses simples, com eliminar el fons,  
  flotant als costats, etc  
  / * Disseny de base * / 

  / * Disseny de base * / 
  Definir l'estil de disseny bàsic: capçalera.  peu de pàgina, barra lateral, etc 

  / * Capçalera * / 
  Definir l'estil de capçalera 

  / * Contingut * / 
  Definir l'estil per a l'àrea de contingut 

  / * Footer * / 
  Definir l'estil de peu de pàgina 

  / * Etc * / 
  Continuar 

5. Utilitza Fulls d'estil condicional

Internet Explorer és el més buggy de tots els navegadors. Afortunadament, vostè pot fer servir comentaris condicionals per a administrar la CSS que es serveix a IE. Si ho necessito tinc un full d'estil anomenat ie6.css que els objectius de les versions anteriors de l'IE. Em permet gestionar CSS per als navegadors més antics de forma ràpida i fàcilment.

Aquest és l'exemple

  <!--[ If lte IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > rel <link "stylesheet" href = = "ie6.css" type = "text/css" mitjans de comunicació = "screen" /> 
 
  -- > <! [Endif] -> 

Conclusió

Aquests són només alguns dels consells que em ajuden a escriure millor codi. Espero que el tutorial també l'ajudarà a escriure millor i netejar el codi. Apliqueu aquests consells per als seus projectes en curs i el proper, i segurament apreciaran l'esforç.

Si vostè pensa que tutorial pot ser més millor, si us plau comparteixi amb nosaltres. Comenta'ns

Si vol rebre més inspiració de nosaltres, si us plau considera subscriure't al nostre feed de RSS o per correu electrònic.

Filed under: Css, Tutorials per admin