Ima mnogo CSS tutoriali su dostupni na internetu, ali malo tutoriali su korisne. In this tutorial ćete naći 5 koraka za napisati bolji css kod za Vašu web sljedeći projekt. Nadam se da ćete uživati ovaj udžbenik.

1. ResetCss

Trebali biste uvijek koristiti za poništavanje Da li to može biti Eric Meyer Reset, YUI Reset, ili svoje vlastite prilagođene reset, samo koristiti nešto.

Cilj reset stylesheet je smanjiti preglednik nedosljednosti u stvari kao što je propust linija visine, margina i veličine fonta za naslove, i tako dalje - Eric Meyer

  html, body, div, span, aplet, objekt, H1, H2, H3, h4, h5, h6, iframe, 
  blockquote, unaprijed, abbr, acronym, adresa, velika, citirati, kod, del, DFN, em, 
  font, img, ins, kbd, q, s, samp, mala, štrajk, jaki, sub, sup, tt, var, 
  dd, dl, dt, fieldset, oblik, oznaka, legenda, stol, uhićenje, tbody, tfoot, 
  thead, tr, th, div, input, odaberite, textarea 

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


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

2. CSS Shorthand

Jedan od najboljih i CSS važna osobina je sposobnost da pisati kod u minimiziranom način.

Neispravan kod

  ( 
  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; 
  ) 

Correct code

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

3. Ne koristite toliko klase i ID's

Primjetio sam da većina početnika dodati klase i ID-u gotovo svaki element na stranici, koji nije required.There su neki od primjera niže od onoga što sam se odnosi na.

Neispravan kod

 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 "subheading" class => Dobro došli </ strong> </ p> <p class = "linka"> <href = "#" class = "link"> Početna stranica </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> O </ a> </ p> <p class = "linkc"> <a href = "#" class = "link"> Usluge </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Kontakt </ a> </ p> </ div> 

Ovdje je točan broj

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> Dobro došli </ h1> <ul> <li> <a href = "#"> Početna stranica </ a> </ li> <li> <a href = "#"> O programu </ a> </ li> <li> <a href = "#"> Usluge </ a> </ li> <li> <a href = "#"> Kontakt </ a> </ li> < / ul> </ div> 

4. Organizacija vas Stylesheet

Trebali bi organizirati sa stilovima tako da je vrlo lako za pronaći stvari i srodne stavke su blizu. Koristite komentare učinkovito. Na primjer, postoji primjer će vam reći kako organizirati sa stilovima

  / * Reset * / 
   elements Ukloni margine i padding elemenata 

  / * Osnovne elemente * / 
  Odredite stil za osnovnih elemenata: tijela, H1, H2, H3, h4, h6, ol, ul., dl, p, itd. 

  / * Generičke klase * / 
  Odredite stil za generičke klase: jednostavne stvari kao što uklonite dno,  
  plutajući na strane itd.  
  / * Osnovna Izgled * / 

  / * Osnovna Izgled * / 
  Odredite stil za osnovni izgled: zaglavlje.  podnožja, itd. sidebar 

  / * Header * / 
  Odredite stil za zaglavlje 

  / * Sadržaj * / 
  Odredite stil za sadržaj područje 

  / * Footer * / 
  Odredite stil za podnožje 

  / * Itd * / 
  Nastavi 

5. Koristite Uvjetno Stilska oblikovanja

Internet Explorer je najviše buggy u svim preglednicima. Srećom, možete koristiti uvjetno komentare za upravljanje CSS koji je služio za IE. Ako mi treba imam stylesheet zove ie6.css koja cilja starije verzije IE. To mi omogućuje da upravljaju CSS za starije preglednike brzo i jednostavno.

Ovdje je primjer

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

Zaključak

To su samo neki od savjeta koji mi pomažu da bolje napisati kod. Nadam se da udžbenik također će vam pomoći da bolje pisati i čist kod. Primijeni ove savjete za Vaše trenutne i slijedeće projekte, a sigurno ćete cijeniti napore.

Ako mislite da udžbenik može biti još bolje, Molimo Vas da podijelite s nama. Komentar nas

ako želite dobiti više inspiracije od nas, molimo vas da razmislite o Prijavom na naš feed RSS ili putem e-pošte.

Varalica pod: Css, Tutoriali by admin