Hálózatok‎ > ‎

Weblapok formázása CSS segítségével

A CSS (kaszkádolt stíluslap, Cascading Style Sheet) segítségével úgy formázhatunk egy weboldalt, hogy a formázási információk jól elkülöníthetők, általában egy külön állományban adhatók meg.

A CSS használatának előnyei:
  • letisztultabb HTML kód
  • rövidebb HTML kód
  • a "dizájn" egyszerűbben módosítható
  • ugyanaz az oldal több stílusban is megjeleníthető
  • a CSS több formázási lehetőséget ad, mint a HTML

Helló CSS példa

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="stilus.css" /> 
</head>

<body>
   <h1>CSS példa</h1>
   <p>
   Helló CSS!!!
   Ez egy minimális CSS példa.
   </p>
</body>
</html>

CSS

H1 {
  color:blue;
  border-bottom: solid 2px;
  font-size: 18pt;
}

P {
  font-size: 12pt;
  background-color: silver;
  margin: 20px;
  padding: 15px;
}

Böngészőben


A CSS utasítások szerkezete

A CSS utasítások egy szelektorból és egy deklarációs blokkból állnak.

H1 {color:blue}

CSS csatolása a HTML kódhoz

Inline

Fejlesztésnél nem javasolt, de tanuláshoz hasznos lehetőség. Lényegében az összes HTML tag-nek van egy "style" attribútuma, amivel ahhoz a konkrét elemhez rendelhetünk információkat. A grafikus szerkesztők sokáig ezt az attribútumot használták formázásra, de így pont a CSS lényege vész el: a tartalom és a forma szétválasztása.

<H1 align="center" style="color:red">Piros címsor</H1>

Fejlécben

A HTML dokumentum fejlécében ("HEAD") egy külön tag ("STYLE") használható a CSS utasítások felsorolására. Ez már egy picit jobb, mint az inline megoldás, de még mindig baj, hogy a CSS-információ nem különül el a HTML állománytól, így egy mások oldalon nem használható.

<html>
<head>
 <style type="text/css">
   h1 {color:red}
   p {color:blue}
 </style>
</head>

<body>
   <h1>Fejléc</h1>
   <p>A bekezdés.</p>
</body>
</html>

Importált fájlban

A fejléc "STYLE" tag-jének tartalmát külső fájlból is importálhatjuk.

<head>
 <style type="text/css">
   @import url("stilus.css");
 </style>
</head>

Hivatkozott CSS állományban

Szintén a fejlécben használható a "LINK" tag a stíluslapok csatolására.

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

CSS parancsok csoportosítása

Eredeti Csoportosított
H1 {color:blue}
H2 {color:blue}
H3 {color:blue}
H1, H2, H3 {color:blue}
P {color:red}
P {font-size: 12pt}
P {
   color: red;
   font-size: 12pt;
}
H2 {font-size: 12pt}
H2 {font-weight: bold}
H2 {font-family: verdana}
H2 {font: 12pt bold verdana}

CSS parancsok hatásköre

Öröklődés

Ha egy tag be van ágyazva egy másikba (a HTML kódban), akkor általában örökli a külső tag stílusát. Például:

<H1 style="color:blue">A címsor <EM>minden</EM> eleme kék.</H1>

A fenti példában az <EM> tag tartalma is kék lesz. Az eddigirkből következik, hogy a teljes lapra vonatkozó beállításokat a <BODY> tag-be érdemes tenni.

Megtehetjük azt is, hogy a <H1>-be zárt <EM> tag-hez rendelünk stílust:

H1 {color:blue}
EM {color:blue}
H1 EM {color:red}

Ekkor csak a <H1>-be zárt <EM> lesz piros, a többi kék:



Osztályok

Rendelhetünk egy adott tag egy osztályához (class) külön formátumot, vagy azt is megtehetjük, hogy különböző tag-ek egy csoportját formázzuk azonosan. A CSS állományban ez így néz ki:

H1.kiemelt { font-size: 36pt }
.fontos {color:red}

Ezeket a kódokat a HTML állományban így aktivizálhatjuk:

<h1 class="kiemelt">Nagyon fontos főcím</h1>
<h1>Egyszerű főcím</h1>
<p class="fontos">Lényeges információ...</p>

Egyedi azonosítók

Lehetőségünk van arra is, hogy egy oldal egyetlen konkrét eleméhez rendeljünk stílust:

CSS:
DIV#fejlec {margin:12px}

HTML:
<div id="fejlec">...</div>


Pszeudo-osztályok

a:link {}
a:visited {}
a:active {}
a:hover {}

Az oldalon található hivatkozások különböző állapotait formázhatjuk így. A sorrend fontos! A hover azt adja meg, hogyan változzon a link kinézete, ha az egér fölé kerül. Például:

a:link {text-decoration:none}
a:hover {text-decoration: underline}

Formázás

Doboz modell

A CSS kétféle tartalmat különböztet meg elrendezés szempontjából:
  • blokk-szintű elemek
  • sorközi (inline) elemek
A blokk-szintű elemek mindig téglalap alakúak, a téglalap 4 rétegből tevődik össze. Belülről kifelé: tartalom (content), kitöltés/ bélés (padding), szegély (border), margó (margin). A külső három réteg méreteit külön-külön szabályozhatjuk: felül (top), jobbra (right), alul (bottom), balra (left).


DIV {
   margin: 20px;
   border-bottom: solid 2px;
   padding-left: 10px;
   padding-right: 10px;
}

Középre zárás CSS-sel

#centeredBox {
   margin-left: auto;
   margin-right: auto;
}

Ezt a módszert akkor használjuk, ha a középre igazítandó elemnek (például DIV) fix szélessége van. Ellenkező esetben ugyanis az az alapértelmezett viselkedés, hogy az elem (például H1) kitölti a rendelkezésre álló helyet, ezért nem lenne látható hatása a fenti kódnak.

Szöveget így igazíthatunk középre a teljes szélességet kitöltő "dobozokban":

H1.kozepre {
    text-align: center;
}

Pozicionálás

Háttérképek

DIV.szep {
   background: no-repeat left;
   background-image: url(hatter.gif);
   height: 200px;
}


<div>Szöveg</div>
<div class="szep"> </div>
<div>Ez is szöveg.</div>

Karakterek formázása

 font-family serif, sans-serif, cursive, monospace
 font-style normal, italic
 font-variant normal, small-caps
 font-weight normal, bold, bolder, lighter, 100, 200, 300, ..., 900
 font-size abszolút méret, relatív méret, hossz, százalék

 xx-small, x-small, small, medium, large, x-large, xx-large
 larger, smaller
 1,5em
 120%
 font P { font: bold italic large Palatino, serif }

Szöveg

Szövegek beállítási lehetőségei.
  • text-align
  • text-decoration
  • text-transform
  • text-indent
  • text-shadow
  • letter-spacing
  • word-spacing
  • line-height
  • direction

Listák

A felsorolások szimbólumának megadása:

ul {list-style-type: square;}

ol {list-style-type: lower-alpha;}

További beállítások: http://www.w3schools.com/cssref/pr_list-style-type.asp

Weblap elrendezések CSS-sel

Menü és tartalom


HTML:

<div id="wrapper">
<div id="content">
  ...
</div>
<div id="mainNav">
  ...
</div>
<div id="footer">
  ...
</div>
</div>

CSS:

#wrapper {
  width: 640px;
}
#content {
  width: 520px;
  float: right;
}
#mainNav {
  width: 180px;
  float: left;
}
#footer {
  clear: both;
}


Tartalom két hasábban


Források

  1. Abonyi-Tóth Andor: Stíluslapok használata
  2. Budd, Andy: CSS Mastery