A CSS ereje

Avagy mit tud a CSS?

Bártházi András

Wish Internet Consulting

Oktatási üzletág

Mi az a CSS?

• Célja az (X)HTML oldal megjelenésének meghatározása
• Maga a megjelenítési réteg, vagy a megjelenítési réteg egy eleme
• Mi az a megjelenés?
• Miért használjunk CSS-t?

Miről lesz ma szó?

• CSS img/zen Garden
• Egy két hasábos oldal kialakítása

CSS img/zen Garden

Feladat

• két hasábos layout kialakítása
• fejléccel, lábléccel
• fix szélesen

HTML kód

<h1 id="header"> Fejléc </h1>
<div id="content"> Tartalom </div>
<div id="sidebar"> Oldalsáv </div>
<div id="footer"> Lábléc </div>
		

Megjelenése

CSS

#header { background: red; margin: 0; padding: 0; }
#content { background: blue; color: #fff }
#sidebar { background: green; color: #fff }
#footer { background: brown; }
		

• A # az id kiválasztója
• Az id egyedi, a kiválasztandó elemet (h1 és a div-ek) nem kell odaírni
• A színezés segít látni a láthatatlant, border viszont nem mindig jó
• background-color helyett background

Megjelenése

Plusz egy elem

<div id="container">
  <h1 id="header"> Fejléc </h1>
  <div id="content"> Tartalom </div>
  <div id="sidebar"> Oldalsáv </div>
  <div id="footer"> Lábléc </div>
</div>
		

• Bevezettünk egy befoglaló elemet
• Egyelőre nem látszik semmi változás

CSS

body { text-align: center; }
#container { width: 500px; margin: 0 auto;
             text-align: left; }
#header { background: red; margin: 0; padding: 0; }
#content { background: blue; color: #fff }
#sidebar { background: green; color: #fff }
#footer { background: brown; }
		

• IE miatt: text-align: center
• Többi böngészőnek: margin: 0 auto
• Változás: a tartalom középre lett illesztve

Megjelenése

• Középre lett illesztve

body { text-align: center; }
#container { width: 500px; margin: 0 auto;
             text-align: left; }
#header { background: red; margin: 0; padding: 0; }
#content { background: blue; color: #fff; width: 350px; float:left; }
#sidebar { background: green; color: #fff; width: 150px; float:left; }
#footer { background: brown; clear: left;}
		

• Következő feladat: az oldalsáv és tartalom elrendezése

Megjelenése

• A tartalom és az oldalsáv egymás mellé került.

Plusz egy elem

<div id="container">
  <h1 id="header"> Fejléc </h1>
  <div id="content"> <h2>Tartalom</h2>
    <p> Ez lesz weblapunk szövege... </p> </div>
  <div id="sidebar"> Oldalsáv </div>
  <div id="footer"> Lábléc </div>
</div>
		

• Töltsük fel tartalommal!

Megjelenése

• A tartalom magasabb, mint az oldalsáv.
• Nincs megoldás?

Megoldás

• A megoldás egy háttér, melyet a containernek állítunk be.

body { text-align: center; }
#container { width: 500px; margin: 0 auto;
             text-align: left;
             background: url(bg.gif) repeat-y; }
#header { background: red; margin: 0; padding: 0; }
#content { background: blue; color: #fff;
           width: 350px; float:left; }
#sidebar { background: green; color: #fff;
           width: 150px; float:left; }
#footer { background: brown; clear: left;}
		

• Következő feladat: az oldalsáv és tartalom elrendezése

Megjelenése

• Probléma megoldva.

Feladat

• egyszerű cikk layout

Start

  <div id="content"> <h2>Tartalom</h2>
    <p> <img src="loverss.jpg" class="right"/>Ez lesz weblapunk szövege... </p>
    <p> Egy másik bekezdés </p>
  </div>
		

• Egyszerű cikk

CSS

#content h2 { font-size: 1.2em; }
#content p { font-size: 1em; }
		

• Fontméret beállítása

Megjelenése

• Problémás kép, margók.

CSS

#content h2, #content p { margin: 5px; }
#content h2 { font-size: 1.2em; }
#content p { font-size: 1em; }
		

• Margók beállítása (margó vs. padding)

Megjelenése

• Alakul, kép még rossz.

CSS

#content h2, #content p { margin: 5px; }
#content h2 { font-size: 1.2em; }
#content p { font-size: 1em; }
#content img.right { float: right; border: 1px solid #000;
               padding: 1px; background: #f00; }
		

• Kép formázása

Megjelenése

• Alakul, kép még rossz.

Mára ennyi.

• Mára ennyi, de foglaljuk össze, hogy miről volt szó!

Kiválasztók

• Elem: elem neve
• Osztály: pont, majd osztály neve
• Azonosító: duplakereszt, majd azonosító neve

CLASS vagy ID?

• ID, ha egyszer fordul_hat_ elő az elem.
• CLASS, ha többször is előfordul_hat_.

ÖRÖKLŐDÉS

• Nem láttuk, de használtuk!
• Paragrafus betűszíne
• Paragrafus betűmérete!
• Van, ami öröklődik, van, ami nem.

Vízszintesen középre illesztés

• IE nem szabványosan kezeli
• Többi igen: margin 0 auto

Float

• Sokmindenre jó, arra is, amire nem gondolnánk
• A bal oldal is lehet jobb oldalon!

Egyenlő magas elemek

• CSS-ben "nem lehetséges"
• De a látszata megoldható

VÉGE

Köszönöm! Kérdések?

Folytatás: Wish Oktatás