Yra daug CSS Pamokos galima rasti internete, bet mažai tutoriale yra naudinga. Šiame pavyzdyje rasite 5 žingsnių siekiant geriau parašyti CSS kodą kitą tinklapį. Tikiuosi, jums patiks ši pamoka.

1. ResetCss

Visada naudokite iš naujo, ar ji gali būti Eric Meyer, Reset, Yui naujo, ar savo individualizuotos Reset, tiesiog naudokite kažką.

Iš reset stilių tikslas yra sumažinti naršyklės neatitikimų dalykų kaip numatytasis linijos aukštyje, pelną ir šriftų dydžiai pozicijose, ir tt - Eric Meyer

  html, body, div, span, Applet, objektas, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pasirengimo, abbr, acronym, adresas, didelis, Cite, kodas, del, DFN, em, 
  šrifto, img, Plugin, kbd, Q, S, samp, maža, streikas, stiprus, sub, sup, tt, var, 
  dd, dl, dt, fieldset, formos, etiketės, legenda, lentelė, užrašas, tbody, tFoot, 
  thead, tr, th, td, input, select, textarea 

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


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

2. CSS shorthand

Vienas iš geriausių ir svarbių ypatybių CSS gebėjimas rašyti kodą mažinimą būdu.

Neteisingas kodas

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

Teisingas kodas

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

3. Ar nenaudojate tiek daug klasių ir prietaiso Id's

Aš pastebėjau, kad dauguma pradedančiųjų Pridėti klasės ir ID beveik kiekvienas puslapio elementą, kuris nėra required.There yra keletas žemiau, ką aš kalbu su pavyzdžiais.

Neteisingas kodas

 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"> Sveiki </ strong> </ p> <p class = "linka"> <a href = "#" class = "Nuoroda"> Home </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> Apie mus </ a> </ p> <p "class =" linkc "> <a href = "#" class = "link"> Paslaugos </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Kontaktai </ a> </ p> </ div> 

Čia yra teisingas kodas

Teisingas kodas

 > <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> Sveiki </ h1> <ul> <li> <a href = "#"> Pradžia </ a> </ li> <li> <a href = "#"> Apie </ a> </ li> <li> <a href = "#"> Paslaugos </ a> </ li> <li> <a href = "#"> Kontaktai </ a> </ li> < / ul> </ div> 

4. Organizacijos jums stilių

Jums turėtų organizuoti savo stilių taip, kad būtų lengva rasti ir dalykų, susijusių dalykų yra netoli vienas kito. Naudoti komentarus efektyviai. Pavyzdžiui, yra pavyzdys jums pasakys, kaip organizuoti savo stilių

  / * Reset * / 
   elements Pašalinti skirtumas ir padding elementai 

  / * Pagrindiniai elementai * / 
  Nustatykite stilius pagrindiniai elementai: kūno, H1, H2, H3, H4, H6, ol, ul, DL, P ir tt 

  / * Generic klasės * / 
  Nustatykite stilius generic klases: paprastų dalykų, kaip pašalinti iš apačios,  
  plaukiojantieji į šonus ir tt  
  / * Pagrindinio Maketas * / 

  / * Pagrindinio Maketas * / 
  Apibrėžkite pagrindinius išdėstymo stilius: antraštė.  apačią, šoninės ir tt 

  / * Header * / 
  Apibrėžti antraštėje stilius 

  / * Turinys * / 
  Nustatykite turinio plotas stilius 

  / * Footer * / 
  Apibrėžti poraštės stilius 

  / * Ir tt * / 
  Tęsti 

5. Naudoti sąlyginį Stiliųlentelės

Internet Explorer yra labiausiai Buggy visų naršyklių. Laimei, galite naudoti sąlyginį komentarus valdyti CSS, kuri buvo prie IE. Jeigu man reikia turiu stilių vadinamas ie6.css kad tikslai senesnės versijos IE. Tai leidžia man tvarkyti CSS przeglądarkom greitai ir lengvai.

Štai pavyzdys

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

Išvada

Tai tik keletas patarimų, kurie padės man rašyti geresnį kodą. Tikiuosi, kad pamoka padės jums parašyti geriau ir švaraus kodo. Taikyti šiuos Patarimai jūsų dabartinius ir šalia projektus, ir jums bus tikrai dėkingi už pastangas.

Jei manote, kad pamoka gali būti dar geriau, prašome pasidalinti su mumis. Komentaras mus

Jei norite gauti daugiau įkvėpimo iš mums, prašom, galite užsiprenumeruoti mūsų kanalo RSS arba el.

Filed under: Css, Pamokos admin