Ir daudz CSS konsultācijas ir pieejamas internetā, bet dažas pamācības ir noderīga. Šajā mācību atradīsiet 5 soļi, lai rakstītu labāk css kods savu nākamo mājas projekts. Ceru, ka jums patiks šī apmācība.

1. ResetCss

Jums vienmēr vajadzētu izmantot reset vai to var Eric Meyer Atiestat YUI Reset, vai jūsu pasūtījuma reset, tikai izmantot kaut ko.

No reset stylesheet mērķis ir samazināt pārlūku pretrunas lietām, piemēram, noklusējuma līnijas augstumā, peļņu un fonta izmēru pozīcijas un tā tālāk - Eric Meyer

  html, body, div, span, sīklietotnes, objektu, H1, H2, H3, H4 H5, H6, iframe, 
  blockquote, pre, abbr, akronīms, adrese, liels, Cité, kods, del, DFN, em, 
  fontu, img, ins, kbd, q, s, Samp, mazo, streiks, stiprs, sub, sup, tt, var, 
  dd, dl, dt, fieldset, veidlapas, etiķetes, leģenda, galds, paraksts, tbody, tfoot, 
  thead, tr, th, td, input, atlasīt, Textarea 

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


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

2. CSS stenogrāfija

Viens no labākajiem un svarīga iezīme CSS ir spēja rakstīt kodu minimizētā veidā.

Nepareiza Code

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

Pareizo kodu

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

3. To neizmanto tik daudzas klases un identifikācijas

Es esmu ievērojis, ka lielākā daļa iesācēji pievienot klases un ID ir gandrīz katra elementa lappusē, kurā nav required.There ir daži zemāk, ko es runāju piemērus.

Nepareizs kods

 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"> Welcome </ strong> </ p> <p class = "linka"> <a href = "#" class = "link"> Sākums </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> Par </ a> </ p> <p class = "linkc"> <a href = "#" class = "link"> Pakalpojumi </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Kontaktinformācija </> </ p> </ div> 

Šeit ir pareizs kods

Pareizo kodu

 > <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> Laipni </ h1> <ul> <li> <a href = "#"> Sākums </ a> </ li> <li> <a href = "#"> Par </ a> </ li> <li> <a href = "#"> Pakalpojumi </ a> </ li> <li> <a href = "#"> Kontakti </ a> </ li> < / ul> </ div> 

4. Organizācija jūs Stilu

Jums vajadzētu organizēt savu stilu, lai tā ir viegli atrast lietas un ar to saistītiem jautājumiem ir cieši kopā. Izmantojiet komentārus efektīvi. Piemēram, te ir piemērs jums pateiks, kā organizēt savu stilu

  / * Reset * / 
   elements Noņemt margin un padding elementi 

  / * Pamatelementi * / 
  Definējiet stilu pamatelementi: virsbūve, H1, H2, H3, H4, H6, ol, ul, dl, p uc 

  / * Generic klases * / 
  Definējiet stilu generic klases: vienkāršas lietas, piemēram, noņemt no apakšas,  
  peldošu uz sāniem utt  
  / * Basic Layout * / 

  / * Basic Layout * / 
  Definējiet stilu pamata izkārtojums: galvenes.  kājenes, sānjoslas uc 

  / * Header * / 
  Definējiet stilu header 

  / * Saturs * / 
  Definējiet stilu content area 

  / * Footer * / 
  Definējiet stilu footer 

  / * Etc * / 
  Turpināt 

5. Izmantojiet Nosacījuma Stilu

Internet Explorer ir visvairāk buggy visas pārlūkprogrammas. Par laimi, var izmantot ar nosacījumu komentārus pārvaldīt CSS, kas ir izsniegts uz IE. Ja man vajag es stilu sauc ie6.css ka mērķi vecākas versijas IE. Tas man ļauj pārvaldīt CSS vecākām pārlūkprogrammām ātri un viegli.

Šeit ir piemērs

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

Secinājums

Šie ir tikai daži padomi, kas palīdzēs man rakstīt labāk kods. Es ceru, ka apmācība palīdzēs arī jums rakstīt labāk un tīrs kods. Piemēro šos padomus, lai jūsu pašreizējo un nākamo projektu, un jūs noteikti novērtēs pūles.

Ja domājat, ka apmācība var būt labāk, lūdzu, dalīties ar mums. Komentēt mums

Ja jūs vēlētos saņemt vairāk iedvesmu no mums, lūdzu, apsveriet abonēšanas mūsu barības pa RSS vai pa e-pastu.

Iesniegts saskaņā ar: Css, konsultācijas by admin