Warning: session_set_cookie_params(): Cannot change session cookie parameters when headers already sent in /www/html/info/auth.php on line 92

Warning: session_start(): Cannot start session when headers already sent in /www/html/info/auth.php on line 93

Warning: Use of undefined constant MY_NONE - assumed 'MY_NONE' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 2

Warning: Use of undefined constant MY_STR - assumed 'MY_STR' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 4

Warning: Use of undefined constant MY_VAR - assumed 'MY_VAR' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 5

Warning: Use of undefined constant MY_ARR - assumed 'MY_ARR' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 6

Warning: Use of undefined constant MY_FN - assumed 'MY_FN' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 8

Warning: Use of undefined constant MY_FNH - assumed 'MY_FNH' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 9

Warning: Use of undefined constant MY_TMPL - assumed 'MY_TMPL' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 10

Warning: Use of undefined constant MY_TMPLH - assumed 'MY_TMPLH' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 11

Warning: Use of undefined constant MY_DROP - assumed 'MY_DROP' (this will throw an Error in a future version of PHP) in /www/html/info/template.php on line 13
CSS

Notice: Undefined index: main in /www/html/info/template.php on line 221

CSS bevezető

Ha ezt a bevezetőt már elolvastad, akkor itt egy bővebb leírást találsz. Vigyázz! Abban a leírásban a HTML tag nevek és az attribútumok neveit a régi szokás szerint nagy betűkkel írják. Kompatibilitási okok miatt te azért már kis betűket használj!

A HTML formázás modern módszere a CSS. Ez egy külön nyelv, amivel a HTML tag-jeink kinézetét adhatjuk meg.

Szerintem a legkényelmesebb, ha a CSS leírásunkat külön fájlban tartjuk. Ekkor a HTML fájlunk <head> </head> részébe be kell tennünk egy új sort, amiből a böngésző tudni fogja, hogy CSS-sel szeretnénk formázni, és hogy merre találja a CSS fájlt magát.

<link href="stilus.css" rel="stylesheet" type="text/css" media="screen" />

A paraméterek értelme

Itt következik egy példa HTML fájl:

<html>
<head>
  <title>CSS próba</title>
  <link href="stilus.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

<h1>CSS próba</h1>

<h2>Táblázat</h2>

<table>
  <tr>
    <td class='valami'>Egy</td>
    <td>Kettő</td>
  </tr>
  <tr>
    <td>Megérett a meggy</td>
    <td>Csipkebokor vessző</td>
  </tr>
</table>

<h2>Szöveg</h2>

<p class='valami'>Lorem ipsum dolor sit amet, 
consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non 
proident, sunt in culpa qui officia deserunt mollit 
anim id est laborum.</p>
</body>
</html>

Mentsd el a fenti példát! (Ne feledd a "html" kiterjesztést!)

Félkövérrel ki is emeltem benne, hogy a hivatkozás szerint a "stilus.css" nevű fájlban fogja a böngésző a stílus utasításokat keresni. Ám ilyen fájlunk még nincs. Hozz tehát létre egy új üres fájlt a szövegszerkesztőben, és mentsd el "stilus.css" néven abba a mappába, ahol a HTML fájlod is van! (Még mindig csak az angol abc kisbetűit, számokat és az aláhúzás karaktert használjuk fájl- és mappa nevekben.)

A "stilus.css"-ben csak CSS utasítások lesznek, melyek általános alakja ilyen:

szelektor {
  attribútum név 1 : érték 1;
  attribútum név 2 : érték 2;
  ...
}

A szelektor határozza meg, hogy a HTML oldalon mely tag-ekre vonatkozik az utasítás. Utána kapcsos zárójelek közt jön a deklaráció. A deklaráció attribútum név — attribútum érték párosokból áll. A név és az érték között kettőspont van, az érték után pontosvessző.

Mondjuk változtassuk meg az egész oldal háttérszínét! (background-color) és a szöveg színét (color)! Írd be az alábbi példát a "stilus.css"-be (használhatsz más színeket is), mentsd el, és nyisd meg böngészőben a HTML fájlt!

body {
  background-color: #880000;
  color: white;
}

Most a szelektor rész body, ezért a kapcsos-zárójelek közt megadott formázás az összes <body> tag-re érvényes — persze ilyenből csak egy van. Vedd észre, hogy a CSS-ben nem kell (sőt, nem szabad) < > közé tenni a tag neveket!

Hasonlóképp bármilyen másik tag-re is írhatunk szabályokat. Például adjunk szegélyt az összes táblázat cellának (<td>)! A szegélyezéshez használandó attribútumok:

td {
	border-width: 1px;
	border-style: solid;
	border-color: red;
}

A szélességnél meg kell adni a mértékegységet is. Kétféle mértékegységet szokás általában használni:

Egyébként a fent említett attribútumok helyett használható a border is: ennek egy sorban megadható a szélesség, a stílus és a szín — ám jól kell figyelni, hogy ebben a sorrendben adjuk meg ezeket. A fenti példával tehát egyenértékű a következő:

td {
	border: 1px solid red;
}

Lehetséges több féle tag-nek ugyanazokat a formázási szabályokat megadni: ehhez a tag-ek nevét a szelektor részben vesszővel elválasztva kell megadni. Színezzük át a címsorokat (<h1>) és az al-címsorokat(<h2>)!

h1, h2{
	color: #FFC000;
}

Ám gyakran nem akarunk minden azonos típusú tag-et átformázni. Ilyenkor a HTML fájlban adjunk class attribútumot a formázni kívánt tag-eknek. Eme attribútum értékét mi választhatjuk meg, de a fájl nevekhez hasonlóan itt is csak ékezet nélküli kisbetűket használjunk! A fenti HTML példában ki is emeltem a két class="valami" attribútumot. Ezekre a tag-ekre a CSS fájlban úgy hivatkozhatunk, hogy a class nevét (a példában "valami") egy pont után írjuk.

.valami {
	background-color: black;
}

A fenti két módszert (kiválasztás tag neve szerint / kiválasztás class attribútum szerint) kombinálhatjuk is. Ha csak a "valami" osztályú bekezdéseket (p) akarjuk formázni, akkor ilyet írhatunk:

p.valami {
	width: 50%;
}

Gyakorlásképp a HTML fájlban adjál új class attribútumot a jobb alsó cellának és a második bekezdésnek! Készíts a CSS fájlban utasítást, mely ezeknek a háttérszínét sárágra, szöveg színét feketére állítja!

Újra puska, ha nem menne egyedül: Változás a HTML-ben.

Új szabály a CSS-ben.