Kaskadno Style Sheets

CSS. Kaskadno Style Sheets. Zašto su se zove to?

Ovo je tutorial o tome kako je kaskadno dio CSS djela, te kako raditi s više klase.

Glavno što trebate zapamtiti je osnovni adut vladavine. Svako novo definirana svojstva prebrisati bilo koje prethodno definiranih svojstava. Primjer:

  (p Boja: crvena;) 
  (p Boja: plava;) 

Nakon ove dvije izjave u stilova će u konačnici rezultirati u <p> oznaku sa plavi tekst. Sjećanje na ovo osnovno načelo "Prijepis" će vas zadržati na dobrom putu. Here'sa stvarnom svijetu primjer ovaj:

 CSS: 

  . class1 (font-size: 12px; color: # 00ccff; font-weight: bold) 

  . class2 (color: # 800080; tekst-dekoracija: underline) 

 HTML: 
   <span klasa = "class1"> nešto poput ovoga bi bilo dobro da <span "class2"> naglasiti klasa = </ span> 
  važnost u rečenici </ span> 

I Heresu kako to izgleda: nešto poput ovoga bi bilo dobro da se naglasi važnost u rečenici

Nije izgleda stvar je najljepši u svijetu, ali se dobiva po bod. Fonta i veličine fonta težina ostaje stalna. U boju je prebrisana kada je "class2" oznaku provodi, i novi underline imovine je dodao kako je dobro.

Sada primjer pomoću više klase u jednu oznaku. Za jednostavnosti ću koristiti iste oznake.

 HTML: 

  <p> Ovaj put smo se koristi standardni font, i umjesto toga žele istaknuti 
  <span style = "class1 class2"> ovom trenutku </ span> i <span stilu = "class2 class1"> 
  ovom trenutku </ span> kao dobro. </ p> 

Evo kako to izgleda: Ovaj put smo se koristi standardni font, i umjesto toga želite naglasiti ovom trenutku i ovom trenutku kao dobro.

Uočite razliku, i zapamtite glavno pravilo osnovne. Jedini slične imovine u obje klase je boje, pa ovisno o tome koji je zadnji na popisu je ona koja će biti prikazana.

Postoje neke napredne oznake i pravila koja mogu modificirati osnovno pravilo adut, a ja ću post one sutra.

Spotaknuti se!

Post Info

Ovaj unos je objavljena u subotu, 22. prosinca 2007 i podneseno je pod CSS, dizajn. Ima 75 pregleda

Tags: CSS, izgleda, savjete

Komentari Feed. | Ostavi Komentar | Trackback Ostavite.

Previous Post: Google's android Telefon Live! »
Next Post: Blog Rush »

Najgledanije komentara