Mi is az a CSS?

A CSS jelentése Cascading Style Sheets, magyarul egymásba ágyazott stíluslapok.
Egy olyan egyszerű lehetőséggel bővíthetjük a weblap fejlesztésünket, amely az alábbi előnyöket nyújtja a készítőnek:

Nézzük meg egy egyszerű példán keresztül. Készítünk egy olyan oldalt, amin található főcímből, alcímből és bekezdésből is egy-két darab.
Az oldal háttere legyen világosszürke.
A főcím legyen középre igazítva, 6-os magasságú (a magasságot csak 1-7 között lehet megadni a HTML-ben, a CSS-nél ilyen megkötés nincs)Verdana betűtípusú.
Az alcím legyen szintén középre igazítva, 4-es magasságú, bíbor színű Arial betűtípusú.
A bekezdések betűszíne legyen zöld, sorkizárással igazítva.

A forráskód előállítása két módszerrel

A tisztán csak HTML kód a következő:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mi is az a CSS minta oldal CSS stílus megadással</title>
</head>
<body  bgcolor="lightgray">
 	

  	
    	Mi is az a CSS?
    
  

	

  	
    	CSS zsebkönyv
    
  

	

  	
      Ajánljuk ezt a zsebkönyvet mindazoknak, aki .... a szabványoknak pontosan megfelelő 
      webanyagokat szeretnének kialakítani úgy, hogy azok bármely böngészőben azonos módon 
      jelenjenek meg.

      (Idézve a Kiskapu Könyvesbolt Eric A. Meyer: CSS zsebkönyv ismertetése)
    
  

	

  	
    	HTML és CSS - Webszerkesztés stílusosan
    
  

	

  	
      Ajánljuk mindenkinek, aki ... szeretné elmélyíteni, illetve rendszerezni a tudását, de 
      annak is, aki soha, egyetlen weblapot sem ... 

      (Idézve a Kiskapu Könyvesbolt Virginia DeBolt: HTML és CSS - Webszerkesztés stílusosan 
      kötet ismertetése)
    
  

	

  	
    	Szakkönyvek
    
  

	

  	
    	Néha erre is kell áldozni
    
  

</body>
Megtekintés

A CSS formázással a kód a következő:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mi is az a CSS minta oldal CSS stílus megadással</title>

</head>

<body>
  
Mi is az a CSS?

  
CSS zsebkönyv

  

    Ajánljuk ezt a zsebkönyvet mindazoknak, aki .... a szabványoknak pontosan megfelelő 
    webanyagokat szeretnének kialakítani úgy, hogy azok bármely böngészőben azonos módon 
    jelenjenek meg.

    (Idézve a Kiskapu Könyvesbolt Eric A. Meyer: CSS zsebkönyv ismertetése)
  

  
HTML és CSS - Webszerkesztés stílusosan

  

		Ajánljuk mindenkinek, aki ... szeretné elmélyíteni, illetve rendszerezni a tudását, de 
    annak is, aki soha, egyetlen weblapot sem ... 

    (Idézve a Kiskapu Könyvesbolt Virginia DeBolt: HTML és CSS - Webszerkesztés stílusosan 
    kötet ismertetése)
  

  
Szakkönyvek

  
Néha erre is kell áldozni

</body>
Megtekintés

Mit látunk a két forrásablakban?
Könnyen észrevehető, hogy a CSS-es megoldásnál bővült a HEAD rész, de ennek hatására a BODY része pedig rövidült, áttekinthetőbb lett.
A sorok számában úgy tűnik nincs különbség. De gondoljunk bele, hogy mondjuk csak egy új bekezdés esetén a két FONT sor már nem kerül bele, nem felejtjük el lezárni a FONT-ot, nem kell keresni, hogy honnan változik meg a betűméret, ... .
Például rájövünk arra, hogy nem tetszik az alcímnél használt betűtípus, akkor a tisztán HTML-es megoldásnál mindkét felhasználási helyen le kell cserélni (mi van akkor, ha sok van a lapon, esetleg több lapon is úgyanazt az eredményt szeretnénk?) a betűtípust. A CSS-t alkalmazva egyetlen egy helyen kell csak megadni az új típust.

Remélem sikerült felkeltenem az érdeklődésedet és nem ijesztettelek el a CSS-től. Ha szeretnél vele megismerkedni, akkor nézegesd meg az ide vonatkozó menüpontokat.
Ajánlom, hogy kezd a tanulást a lkiválasztók (selector) megismerésével, amit a Bevezetés menü Kiválasztók menüpont alatt találhatsz meg.

ugrás a lap tetejére