Seal on palju CSS tutorials on Internetis kättesaadavad, kuid mõned õpetused on kasulik. Sel juhendaja leiad 5 astet kirjutama paremaid CSS koodi oma järgmisel veebilehel projektiga. Loodan, et meeldib see tutorial.

1. ResetCss

Te peate alati kasutama reset, kas seda saab Eric Meyer Taasta YUI Nulli või omatehtud nullitud, lihtsalt kasutage midagi.

Eesmärk nullitud stiil on vähendada brauseri vastuolusid asjad vaikimisi rea kõrgust, marginaale ja fondisuuruse rubriikide, ja nii edasi - Eric Meyer

  html, body, div, span, applet, objekti, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote eelnevalt, abbr, akronüüm, aadress, suured, cite, koodi, del, DFN, em, 
  font, img, pluginad, kbd, Q, S, templiks, väike, streik, tugev, sub, sup, tt, var, 
  dd, dl, dt, fieldset, vorm, etikett, legend tabeli seletus, tbody, tfoot, 
  thead, tr, th, td, aktiveerimiseks valige, Textarea 

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


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

2. CSS stenografisti

Üks parimaid ja oluline tunnusjoon CSS on oskus kirjutada koodi minimeeritud moel.

Vale Kood

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

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

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

Õige koodi

 : 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. Kas ei kasuta nii palju klasse ja Id's

Olen märganud, et enamik algajatele lisada klassid ja ID-peaaegu iga osa lehel, mis ei ole required.There on mõned näited allpool, mida mõtlen.

Vale Kood

 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"> <p class = "heading"> <strong class = "subheading"> Tere </ strong> </ p> <p class = "linka"> <a href = "#" class = "link"> Avaleht </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> About </ a> </ p> <p class = "linkc"> <a href = "#" class = "link"> Teenused </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Kontakt </ a> </ p> </ div> 

Siin on õige kood

Õige koodi

 > <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> Tere </ h1> <ul> <li> <a href = "#"> Avaleht </ a> </ li> <li> <a href = "#"> Andmeid </ a> </ li> <li> <a href = "#"> Teenused </ a> </ li> <li> <a href = "#"> Kontakt </ a> </ li> < / ul> </ div> 

4. Organisatsioon te stiil

Sa peaksid korraldama oma stiil, nii et see on lihtne leida asju ja seonduvad tooted on lähestikku. Kasutage kommentaarid tõhusalt. Näiteks on näide ütlen teile, kuidas korraldada oma stiil

  / * Nulli * / 
   elements Eemalda varu ja polster elemendid 

  / * Põhielemendid * / 
  Define stiili põhielementi: keha, H1, H2, H3, H4, H6, ol, ul, dl, p jne 

  / * Generic klassides * / 
  Define stiilis geneeriliste klassi: lihtsad asjad eemaldatakse alumine,  
  ujuva külgede jne  
  / * Basic paigutus * / 

  / * Basic paigutus * / 
  Define stiili põhi paigutus: päis.  jalus, vasaku jne 

  / * Header * / 
  Define stiili päis 

  / * Sisu * / 
  Define stiili sisu ala 

  / * Footer * / 
  Define stiili jalus 

  / * Jne * / 
  Jätka 

5. Kasutage Tingimuslik Laaditabelid

Internet Explorer on kõige lollakas kõigi brauseritega. Õnneks saab kasutada tingimisi kommentaarid juhtida CSS, mis on aidanud IE. Kui mul on vaja seda olen stiil nimega ie6.css et eesmärgid vanemad versioonid IE. See võimaldab mul juhtida CSS vanemate brauseritega lihtsalt ja kiiresti.

Siin on näide

  <!--[ kui PTK IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > <link rel = "stylesheet" href = "ie6.css" type = "text/css" meedia = "screen" /> 
 
  -- > <! [Endif] -> 

Järeldus

Need on vaid mõned nõuanded, mis aitavad mind kirjutama paremaid koodi. Loodan, et õpetamisel aitab ka kirjutada paremini ja puhas kood. Rakenda neid nõuandeid oma praeguse ja järgmise projekte ja te kindlasti hindame jõupingutusi.

Kui te arvate, et juhendaja saab olla parem, palun meiega jagada. Kommentaar meile

Kui soovite saada rohkem inspiratsiooni, palun kaaluda tellides meie sööda RSS või e-posti.

Filed under: Css, Tutorials admin