[ H T M L i n f o v2.0 ] - online agytáp webmestereknek és műkedvelőknek

CSS, 1. fejezet - Alapok
Az 1. fejezet tartalma:

Bevezetés
1. BEVEZETÉS

A leírás a CSS1 ismertetését tartalmazza. A CSS (Cascading Style Sheet) egy olyan stíluslap megvalósítás, amely lehetővé teszi, hogy a HTML oldalak szerzői oldalaikhoz egyedi stílust rendeljenek hozzá. A CSS egyik alapvető tulajdonsága a folyamatos stíluslap - HTML lap kapcsolat. A lapok szerzői az általuk kedvelt stílust egyszer rögzítik, és hozzákapcsolhatják minden általuk készített HTML laphoz. Ez a leírás tartalmazza ennek megoldási lehetőségeit.
Stíluslappal (style sheet) tervezni nem nehéz, de szükséges hozzá némi alapvető HTML ismeret. Ezt szemlélteti az alábbi példa:
H1 {color: blue} 
      Fenti példa tartalmazza a CSS használatának alapszabályait - egy css 
      utasítás két részből áll: 
      

        a szelektor tartalmazza a formázandó HTML tag megnevezését 
        (H1); 
        
a deklaráció végzi el a szelektorban meghatározott tag 
        formázását. 
      
      Maga a deklaráció is két részre bontható: egy tulajdonságra és a hozzá 
      tartozó értékre (szín: kék). A szelektor a tulajdonképpeni kapocs a HTML, 
      mint leírónyelv és a stíluslap között; szinte minden HTML tag betöltheti a 
      szelektor szerepét. A teljes HTML referenciát lásd itt 
Az 
      előbb említett szín (color) tulajdonság csak egy a több, mint 50 
      közül, amelyek segítségével alakíthatjuk egy HTML oldal kinézetét. (A 
      továbbiakban ahol oldal, dokumentum olvasható, értelemszerűen 
      HTML oldalra, dokumentumra vonatkozik.) 
      Vissza a 
      hivatkozó oldalra 
      1.1 A STÍLUSLAP CSATOLÁSA
      A W3C HTML4 specifikációja 
      határozza meg a stíluslap és a dokumentum kapcsolódási felületeit. A 
      következő példa mutatja be a kapcsolódás négy lehetséges módját: 
      
       <HTML>
	<HEAD> 
	<TITLE>Stíluslapok - 1.1</TITLE>
	<LINK REL=STYLESHEET TYPE="text/css" HREF="pelda/stilus1.css" TITLE="sajat">
	<STYLE TYPE="text/css">
	@import url("pelda/stilus2.css");	
	<!--
	H1 {color: blue}
	-->
	</STYLE>
	</HEAD>

	<BODY>
	<H1>A címsor1 kék</H1>
	<H2>A címsor2 piros</H2>
	<P STYLE="color: green">Az egész bekezdés zöld</P>
	</BODY>
</HTML>

      
         
 
      
      A fenti példában látható első lehetőség a csatolásra a 
      <LINK> tag használata; külső stíluslap behívására. 
      Második lehetőségként a dokumentum HEAD szekciójában elhelyezett 
      <STYLE> tag, ahol közvetlenül definiálhatók a használni 
      kívánt stílusok, vagy az '@import' kulcsszóval külső stíluslap 
      importálható. Az utolsóként bemutatott lehetőség pedig valamely HTML elem 
      STYLE attribútumának használata, a dokumentum BODY szekciójában. 
      A fenti (egyszerű) példában használt stílus1.css 
      állomány felel azért, hogy az oldal háttérszíne szürke legyen, a 
      stílus2.css pedig a címsor szövegét állítja pirosra.
      A böngészők általában figyelmen kívül hagyják az általuk ismeretlen 
      elemeket. Ezért a régebbi böngészők jó esetben egyszerűen 'elsiklanak' a 
      <STYLE> elem felett. Kellemetlenebb eredménnyel jár, ha 
      belezavarodnak tartalmába. Ez megelőzhető, ha egy standard SGML 
      utasítással elrejtjük előlük (A megjegyzés kezdete: <!-- , a vége pedig 
      a -->) Például: 
<STYLE TYPE="text/css">
	<!--
	H1 {color: blue} 
	-->
</STYLE>

      Vissza a 
      hivatkozó oldalra 
      1.2 CSOPORTOSÍTÁS
      A stíluslapok méretének csökkentése érdekében a szelektorok 
      csoportosíthatók; vesszővel elválasztott listába szedve. Nézzük az alábbi 
      példát: 
 
H1 {font-family: verdana}
H2 {font-family: verdana}
H3 {font-family: verdana}

      A csoportosítás után írhatjuk a következőt:
 
H1, H2, H3 {font-family: verdana}

      Hasonló módon a deklarációk is csoportosíthatók. Az alábbi 
      stílusmegadást szintén egyszerűsíthetjük: 
H1 {font-family: helvetica}
H1 {font-size: 12pt}
H1 {font-style: normal}

      Most a tulajdonságokat csoportosítjuk:
H1 
{
font-family: helvetica;
font-size: 12pt;
font-style: normal;
}

      Néhány tulajdonság eltérő csoportosítási szintaktikát is megenged: 
H1 {font: bold 12pt helvetica}

      Példa a csoportosításra:
      
           
<HTML>
	<HEAD> 
	<TITLE>Stíluslapok</TITLE>
	<STYLE TYPE="text/css">
	<!--
	H1, H2, H3 {color: blue}
	H1 {font: italic 22pt helvetica}
	-->
	</STYLE>
	</HEAD>

	<BODY>
	<H1>Ez egy 1-es címsor</H1>
	<H2>Ez egy 2-es címsor</H2>
	<H3>Ez egy 3-as címsor</H3>
	</BODY>
</HTML>

      
         
 
      
      A fenti példában látható, hogy a csoportosítás 
      segítségével beállítottuk, hogy a H1,H2,H3 címsor is kék legyen. A H1 
      címsor esetén a betűtípusra vonatkozó tulajdonságokat csoportosítottuk. A 
      CSS-ben használt különböző mértékegységet a 6. fejezetben 
      tárgyaljuk. 
      Vissza a 
      hivatkozó oldalra 
      1.3 ÖRÖKLŐDÉS
      Az első 
      példában a H1 elem színbeállítását mutattuk be. A következőkben 
      tartalmaz egy <EM> (emphasized, vagyis 
      kiemelt) elemet is: 
<H1>A címsor 
      <EM>mindig</EM> fontos.</H1> 
      Ha az <EM> elemhez nincs külön szín rendelve, a 
      kiemelt (emphasized) "mindig" szó mindig örökli a tartalmazó 
      (container) elem színét, jelen esetben a kéket. Hasonlóképpen más 
      stílus-tulajdonságok is öröklődnek (pl.:font-family, font-size). 
      
Alapértelmezett stílustulajdonság beállításához az alkalmazni kívánt 
      stílust olyan elemhez kell kötni, amely tartalmazza mindazokat az 
      elemeket, amelyekre a stílust vonatkoztatni akarjuk. A HTML 
      dokumentumokban erre a célra megfelelhet a <BODY> elem: 
      
      
           
<HTML>
	<HEAD> 
	<STYLE TYPE="text/css">
	<!--
	BODY
	{
	 color: blue;
	 background: url(pelda/hatter.gif) lightgreen;
	}
	-->
	</STYLE>
	</HEAD>
	<BODY>
	<H1>Öröklődés példa</H1>
	<UL>	
	<LI>listaelem</LI>	
	</UL>	
	</BODY>
</HTML>

      
         
 
      
      Ez a stíluspélda a BODY szövegszínét kékre állítja be, 
      háttérként képet rendel hozzá. Amennyiben a kép nem érhető el, a 
      háttérszín világoszöld lesz. Látható, hogy a felsorolás lista szövegszínét 
      nem állítottuk be kékre, ezt a tulajdonságát örökölte.
      Van azonban néhány stílustulajdonság, amely nem öröklődik (Ezek közé 
      tartozik pl. a background), de a szülő elem háttértulajdonságát néhány 
      tartalmazott (contained) elem láthatóan hagyja. (Ha egy 
      táblázatnak nem adunk meg 'background' /háttér/ tulajdonságot, átlátszik 
      rajta a BODY háttere.) 
      Egy más fajta öröklődést mutat be a következő példa. Gyakran előfordul, 
      hogy egy tulajdonság értéke egy százalékos érték, amely egy másik 
      tulajdonság értékére vonatkozik.  
P {font-size: 10pt}
P {line-height: 120%}

      Itt a 'line-height' (sortávolág) tulajdonság értéke a 'font-size' 
      tulajdonság értékének 120% -a lesz, vagyis -jelen esetben - 12 pont. 
      

      

      <HTML>
	<HEAD> 
	<STYLE TYPE="text/css">
	<!--
	P {font-size: 10pt}
	P {line-height: 120%}	
	-->
	</STYLE>
	</HEAD>
	<BODY>
	<P>Ez egy bekezdés</P>
	<P>Ez egy újabb</P>
	</BODY>
</HTML>
      
         
 
      
      Vissza a 
      hivatkozó oldalra 
      1.4 A CLASS SZELEKTOR
      A HTML elemek stílusbeállítási rugalmasságának növelése érdekében a W3C új attribútumot vett fel a 
      HTML-be: ez a CLASS (osztály). A 'BODY' minden eleme osztályba 
      sorolható, az egyes osztályok pedig stíluslapból megcímezhetőek. 
      
           
<HEAD>
<TITLE>Stíluslap példa</TITLE>
<STYLE TYPE="text/css">
<!--
H1.mezei {color: #00ff00}
-->
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=mezei>Zöld, mint a rét</H1>
</BODY>
</HTML> 

      
         
 
      
      A fenti példában láthatjuk, hogy definiáltunk egy 
      stílust (mezei névvel), amely a  H1 szelektorra vonatkozik, majd 
      pedig a H1-es tag beillesztésénél megadtuk, hogy tartozzon a "mezei" 
      osztályba. (CLASS=mezei)
      Az osztályba sorolt elemekre az öröklődés általános szabályai 
      vonatkoznak. Öröklik a stílusértékeket a dokumentum struktúrájában 
      felettük álló ún. szülő elemeiktől. 
Minden azonos osztályba 
      tartozó elem megcímezhető egyszerre is, elhagyva a hozzájuk tartozó tag 
      nevét: 
.mezei {color: green}
/*minden mezei osztályba tartozó elem (CLASS=mezei)*/

      Megjegyzendő, hogy szelektoronként (HTML elemenként) csak egy osztály 
      definiálható! 
      
      <HEAD>
<TITLE>Stíluslap példa</TITLE>
<STYLE TYPE="text/css">
<!--
.mezei {color: green}
SPAN.piros {color: red}
-->
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=mezei>Zöld, mint a rét</H1>
<H1>Ez nem zöld, mert nem abba az osztályba tartozik</H1>
<P CLASS=mezei>Zöld, mint a rét, <SPAN class="piros">néhány karakter </SPAN > kivételével. </P>
<P>Ez nem zöld, mert nem abba az osztályba tartozik</P>
</BODY>
</HTML> 

      
         
 
      
      A fenti példában látható, hogy a .mezei stílust több 
      szelektor esetén is felhasználhatjuk (H1, P), hiszen a deklarálásnál nem 
      kötöttük ki, hogy mely szelektorokra legyen érvényes. Azt is láthatjuk, 
      hogy a SPAN tag segítségével karakterszintű formázásokat is 
      használhatunk. 
      Vissza a 
      hivatkozó oldalra 
      1.5 AZ ID SZELEKTOR
      A HTML -be felvételre került az 'ID' attribútum is, amely lehetővé 
      teszi az egyedi azonosítók felvételét a dokumentumba. Ennek a lehetőségnek 
      különleges jelentőséget ad, hogy felhasználható stíluslap szelektorként, 
      és megcímezhető a '#' előtaggal. 
      
      <HTML>
	<HEAD> 
	<TITLE>Stíluslapok</TITLE>
	<STYLE TYPE="text/css">
	<!--
	#z98y {letter-spacing: 3,3px}
	H1#z98y {letter-spacing: 6,5px}
	-->
	</STYLE>
	</HEAD>
	<BODY>
	<P ID=z98y>Széles szöveg</P>
	<H1 ID=z98y>Széles címsor</H1>
	<H1>Normál címsor</H1>
	</BODY>
</HTML>

      
         
 
      
      Az fenti példa első esetében (#z98y) a kiválasztott 
      formázást a 'P' elemhez feleltettük meg, az 'ID' attribútumérték 
      segítségével. (A letter-spacing a betűk közti távolságot határozza meg) A 
      második esetben kettős feltételt támasztottunk: a formázás akkor lép 
      érvénybe, ha a H1 elemet a '#z98y' azonosítóval (ID) látjuk el. Ezért ez 
      már nem vonatkozik a 'P' elemre. 
      Az ID attribútum szelektorként való használatával HTML elemekre 
      alapozott stílustulajdonságok állíthatóak be. 
      Vissza a 
      hivatkozó oldalra 
      1.6 ÖSSZEKAPCSOLT SZELEKTOROK
      Az öröklődés szabályai mentesítik a stíluslap tervezőjét egy csomó 
      fölösleges gépelés alól. A tulajdonságok beállítása során elég egyszer 
      elkészíteni az alapértelmezettet, utána felsorolni a kivételeket. Tegyük 
      fel, hogy az 'EM' elem színét pirosra szeretnénk változtatni. 
H1 {color: blue}
EM {color: red}

      Mikor a stíluslap aktív, minden kiemelt (<EM>) 
      szövegrész, akár a H1 elemen belül, akár azon kívül található, vörösre 
      változik. 
Abban az esetben, ha csak  a H1 -en belüli  EM 
      elemeket akarjuk vörösre színezni, a CSS kódot az alábbiak szerint kell 
      megváltoztatni: 
H1 EM {color: red}

      Összekapcsolt szelektorok használata esetén azok az elemek lesznek 
      megcímezve, amelyek a felsorolásban utoljára állnak. Tehát akár kettőnél 
      több elem is 'egymásba ágyazható' ilyen módon. 
      
      <HTML>
	<HEAD> 
	<TITLE>Stíluslapok</TITLE>
	<STYLE TYPE="text/css">
	<!--
	UL LI { font-size: small; color: green }
	UL UL LI { font-size: x-small; color: blue }	
	-->
	</STYLE>
	</HEAD>
	<BODY>
	<ul>
	<li>listaelem1</li>
	<li>listaelem2</li>
	<li>Al lista<ul>
	<li>listaelem3</li>
	<li>listaelem4</li>
	</ul></li>
	</ul>
	</BODY>
</HTML>

      
         
 
      
      A fenti példában látható, hogy a definíciót úgy 
      készítettük el, hogy azon listaelemek, amelyek előtt (legalább) egy UL tag 
      szerepel, legyenek zöld színűek és kis méretűek, míg azok, amelyek elött 
      (legalább) két UL tag szerepel (vagyis egymásbaegyázott elemekről van szó) 
      legyenek kék színűek és extra kicsi méretűek.
      Természetesen ezen szelektorokat is csoportosíthatjuk, tehát érvényes a 
      következő stílusmegadás:
H1 EM, H1 B, H2 B, H2 EM {color: red} 

      Vissza a 
      hivatkozó oldalra 
      1.7 MEGJEGYZÉSEK
      A CSS kódban elhelyezett megjegyzések hasonlóak a C programnyelvben 
      elhelyezett megjegyzésekhez, vagyis a kívánt részt /* és 
      */ karakterek közé kell zárni: 
EM {color: red} /* A kiemelt szövegrész vörös!*/

      A megjegyzések nem ágyazhatók egymásba, illetve más CSS utasításba. 

      előző  
      tetejére  
      következő