A sorozat során többször is említésre kerültek a stíluslapok. Ezek a stíluslapok lehetővé teszik a elrendezés és a design szigorú elkülönítését. Az HTML elemek kizárólag a webdokumentum logikai vagy szemantikus leírásáért felelősek a CSS-nek köszönhetően.
Általában hasznos tudni, hogy egy stíluslap hogyan néz ki. Nézzünk erre egy első példát.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>A böngészőben a dokumentum így jelenik meg:
Az HTML fájl body részében meghatározásra kerültek két elem:
• egy cím
• egy szövegrész
Ezeket a két elemet CSS-sel formázzuk. Ehhez a head részén belül egy stíluslap rész kerül definiálásra a style segítségével. Ezen belül formázzuk az elemeket.
Itt van újra a definíció a címhez h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
A megjelenített szintaxissal két dolog kerül meghatározásra:
• Meghatározódik a betűtípus családja.
• Meghatározódik a betűméret.
Ebben a pontban általánosságban fel szeretnénk hívni a figyelmet a használt szintaxishoz. Minden CSS utasítás alapvetően két részből áll - egy szelektorból és a CSS deklarációból. A szelektorral azonosítjuk az elemet, amelyet formázni szeretnénk. Ahogyan néz ki ez a formázás, azt a CSS deklaráció határozza meg. A szelektor mindig balra kerül, a CSS deklaráció pedig jobbra kapcsos zárójelek között helyezkedik el.
A tényleges CSS deklaráció ismét két elemből áll, mégpedig a tulajdonságból és az értékből. A tulajdonságot és az értéket kettőspont választja el. Az érték mögött pontosvessző következik.
Szelektor {
Tulajdonság: Érték;
}Stíluslapok beillesztése
Számos lehetőség van stíluslapok beillesztésére weboldalakba. Először is stílusutasításokat közvetlenül hozzárendelhetjük egy HTML-tagehez. Egy példa:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
Ebben a példában a cím kéken jelenik meg.
Több stílusutasítást is hozzá lehet adni egy HTML-tagehez.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
Ezeket egymás után egyszerűen csak jegyezni kell, pontosvesszővel elválasztva.
Alapvetően ezeket az úgynevezett Inline stílusokat csak akkor érdemes használni, ha az oldalak egyes részeit egyedileg szeretnénk formázni. Általában érdemes ezt a közvetlen formázási módot kivédeni, mivel ezáltal az HTML-kód átláthatatlanná válik.
CSS utasítások kiszervezése
A CSS-definíció legpraktikusabb módszere a stílusok kiszervezése egy külső fájlba. Ennek eredményeként bármely HTML-fájl hozzáférhet egy közös CSS-fájlhoz. Így az összes webprojekthez tartozó fájl egységes formázása egyszerűen megvalósítható. Azok a későbbi változtatások, amelyek minden oldalra kiterjednek, könnyedén elvégezhetők.
<link rel="stylesheet" type="text/css" href="css/styles.css">
Az HTML-fájl fejlécében a link elemet definiáljuk. A link -ban először az rel="stylesheet" attribútum-érték párost és azt követően a type="text/css" -t adjuk meg. A href attribútumhoz a megfelelő CSS-fájlt rendeljük. Itt – hasonlóan a képek beillesztéséhez – ügyeljünk a megfelelő elérési útra. Az aktuális példában feltételezzük, hogy a CSS fájl styles.css a css mappában található, amely a tényleges HTML fájlhoz képest ugyanazon a szinten helyezkedik el.
A hivatkozott CSS fájl egy normál szövegfájl, amelynek a css kiterjesztése van. Az külső CSS fájlban meghatározásra kerülnek a megfelelő CSS utasítások.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
Alternatív a látható link-variánstól a stíluslapokat is importálhatjuk. Itt is a CSS utasítások egy külső fájlban találhatók. Ehhez a következő szintaxist használjuk:
<style type="text/css">
@import url("css/styles.css");
</style>
A zárójelek között megadjuk a betöltendő CSS fájl elérési útvonalát. Egyébként a @import CSS-szintaxis. Ezért a @import utasítást használhatjuk CSS fájlokon belül is. Ez lehetővé teszi, hogy egy stíluslapból más stíuslapokat hívjunk meg, ami jobb rendszerezést tesz lehetővé a stíluslapok számára.
Természetesen felmerül a kérdés, hogy a link vagy az @import használata jobb-e. Elvileg én a link használatát részesítem előnyben, mivel ez a módszer gyorsabb, az oldal teljesítménye tehát jobb.
Médiaspecifikus stíluslapok
Stíluslapokat lehet definiálni teljesen különböző médiákhoz, például nyomtatókhoz vagy képernyőkhöz. Ehhez a media attribútumot használjuk. Egy stíluslapot több, vesszővel elválasztott médiumhoz is hozzárendelhetünk.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print " href="css/druck.css">
Ebben az esetben két stíluslapot hívtak meg, az egyiket a képernyőhöz, a másikat pedig abban az esetben, ha az oldalt kinyomtatják. A druck.css CSS fájl tehát akkor töltődik be, ha a böngésző nyomtatás funkcióját használják. Összességében az alábbi media értékek érhetőek el:
• all – Minden kimeneti médiára vonatkozik.
• aural – A CSS fájl beszédfelismerő rendszerekhez használatos.
• braille – A CSS fájl vakírányú nyomtatók számára készült, amelyek tudják a "vakírányt".
• embossed – Ezzel a vakírás nyomtatók vannak kezelve.
• handheld – Hordozható eszközökhöz.
• print – A CSS fájl a papírra való nyomtatásra vonatkozik. A böngészők automatikusan erre a fájlra fognak hivatkozni, amikor a nyomtatás funkció aktiválódik.
• projection – Ez a változat vetített prezentációkhoz szolgál.
• screen – A képernyőre való megjelenítésre szolgál.
• tty – A CSS fájl ki van fejezve olyan médiumoknak, amelyek szilárd karakterrácsot használnak. Ezek lehetnek például távírók és terminálok.
• tv – Televízióhoz hasonló eszközöket céloz meg. Feltételezve, hogy az eszközök alacsony felbontásúak és korlátozott görgetéssel rendelkeznek.
A link-elem segítségével bemutatott HTML-szintaxis mellett vannak speciális CSS változatok is. Itt a @import vagy @media használandó.
<style type="text/css">
@media screen, projection {
/* Formátumok képernyőhöz */
}
@media print {
/* Formátumok nyomtatáshoz */
}
</style>
A style-elemen belül a @media-on keresztül határozzuk meg az adott kimeneti médiumra szánt formátmeghatározások területét. A @media mögött, szóközzel elválasztva, az előzőleg leírt média típusok egyike kell szerepeljen. Több média típust vesszővel kell elválasztani egymástól.
