Amit a CSS-ről feltétlenül tudni kell

Bevezetés

A CSS a Cascading Style Sheets, magyarul stíluslapok kifejezés rövidítése, amely szabványos, az oldalak formázásához használható leíró nyelv, és amely a HTML nyelv kibővítését szolgálja. A CSS segítségével oldalainknak professzionális megjelenést adhatunk, mindezt úgy, hogy pl. egy stíluslapot (.css fájlt) rendelünk hozzá az összes oldalunkhoz, így egy esetleges változást, stílusbeli módosítást az összes szükséges helyen, egy mozdulattal végrehajthatunk, anélkül, hogy hosszú órákat töltenénk el a forráskódok kézi szerkesztésével. A stíluslapok alkalmazásával tehát nemcsak megszépíthetjük oldalainkat, hanem munkánkat is jelentősen megkönnyíthetjük Természetesen a CSS-t is használhatjuk egy-egy elemre, bekezdésre, netán az adott oldalra vonatkozólag. A CSS stílusokat elmenthetjük külső stíluslapfájlba (.css), de elhelyezhetjük a stílusmegadásokat az oldalakban a <style> ..</style> tag segítségével lokálisan, illetve lehetőség van használatukra az egyes tag-ek szintjén is.

CSS stílusok megadása

A stíluslapokon stílusmegadásokkal (stílusdefiníciókkal) formázhatjuk meg a kívánt oldalelemeket: a böngésző az itt megadott definíciók alapján fogja megjeleníteni az oldalt. A böngészők nem teljesen kompatibilisek egymással a stíluslapok használatát illetően, ezért teszteljük oldalainkat a több böngészőben, ha lehetséges, illetve a 4-esnél kisebb verziójú böngészőkben is.

A stílusmegadások helye: lehet az oldalhoz hozzárendelt önálló stíluslapfájl, amely csak css kódot tartalmaz, globális stílusmegadás, a <STYLE> .. </STYLE> tag segítségével, illetve az egyes tag-ek szintjén, beágyazott formában. Erről bővebben a Stíluslapok elhelyezése c. részben lesz szó.

Egy stílusmegadás általános formája: CSS-kiválasztó {tulajdonságnév1:érték1, tulajdonságnév2:érték2 [stb.]}

A stílusmegadások két részből állnak: a CSS-kiválasztóból (css selector) és a stílusdefiníciós részből (description), pl. a H1 {color:blue} kód a Heading1 címsorstílust mindig (esetleges felüldefiniálásig) kék színnel fogja megjeleníteni. A CSS-kiválasztó a stílusosztály vagy a módosítandó tag nevét jelenti (példánkban ez utóbbi a H1), amelyet egy pont és az alosztály nevének megadásával lehet szűkíteni. A kapcsos zárójelbe írandó stílusdefiníciós részben szerepelnek a stílus tulajdonságai {tulajdonságnév: érték} formában (a fenti példában a {color:blue} a stílusdefíníció). A stílusmegadásoknál lehetőség van egyszerre több stílusdefiníció (vagyis tulajdonság) összevonására, felsorolására, melyeket egymást követően írva, pontosvesszővel kell elválasztani.

Lehetőség van a kiválasztók összevonására is, pl. P EM {background:blue}. Ez azt jelenti, hogy az összes olyan kiemelt szöveg, amely bekezdésben van, kék hátteret kap, de pl. a címsorokban szereplő kiemelt szövegekre ez a formázás nincs hatással.

Stílusosztályok

Egy tag-hez készíthetünk több különböző, ún. stílusosztályt is: a tag neve után egy ponttal elválasztva adjuk meg az osztály nevét (módosítót), pl. code.html {color: yellow}, code.js {color:blue}. Az osztályneveket meg lehet adni konkrét tag nélkül is, pl. .js {color: blue}. Ez esetben a .js nevű osztályt bármelyik tag-gel használhatjuk. Az osztályoknak pl. a funkciójuk szerint adhatunk nevet. Az osztályokra a tag-ekben a CLASS attribútummal lehet hivatkozni, pl. <P CLASS=code.html> sárgával írt kód</P>. Egyszerre csak egy módosítót használhatunk kiválasztó elemenként, alosztályok megadása (pl. code.html.tulajdonsag) nem lehetséges.

Léteznek ún. ID-kiválasztók (ID-selectors) is: ezek megadásánál a kettőskereszt (#) karaktert használjuk, és elnevezésük arra utal, hogy a HTML tag-ekben az ID attribútummal lehet rájuk hivatkozni. Pl. #ind30 {text-indent: 30} stílusmegadásra hivatkozunk: <P ID=ind30>ez egy 30 pixellel beljebb kezdett bekezdés</P>

Pszeudo-osztályok és pszeudo-elemek

A CSS-t támogató böngészők automatikusan felismerik az ún. pszeudo-osztályokat és pszeudo-elemeket is. A pszeudo-osztályok megkülönböztetik az elemek típusait (pl. a linkeket és a látogatott linkeket, mint hivatkozástípusokat). A pszeudo-elemekkel a tag-ek által meghatározott elemek bizonyos részeire hivatkozhatunk, pl. egy bekezdés első betűjére. Használatuk:

kiválasztó:pszeudo-osztály {tulajdonságnév: érték}

kiválasztó:pszeudo-elem {tulajdonságnév:érték}

A pszeudo-osztályok és pszeudo-elemek nem adhatók meg a CLASS attribútummal, de a hagyományos stílusosztályokkal igen, pl.

Kiválasztó.osztály:pszudo-osztály {tulajdonságnév: érték}

Kiválasztó.osztály:pszudo-elem {tulajdonságnév: érték}

Hivatkozások pszeudo-osztályai

Az <A> tag-hez használhatjuk a link, visited és active pszeudo-osztályokat, pl.

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

Ezzel a hivatkozások, az aktuális és a már bejárt hivatkozások megjelenését változtathatjuk meg.

Első sor pszeudo-elem

Az első sor (first-line) peszeudo-elem segítségével a szövegblokkok első sorának adhatunk a többi sortól eltérő kinézetet, pl.

P:first-line {
  font-variant: small-caps;
  font-weight: bold }
 

Első betű pszeudo-elem

Az első betű (first-letter) pszeudo-elemmel lehet iniciálékat készíteni, pl.

P:first-letter { font-size: 300%; float: left }
 

Öröklődési szabályok

A stílusok öröklődhetnek, és a tagen belüli stílusdefiníciókkal felülírhatjuk a globális stílusmegadásokat. Ez azt is jelenti, hogyha egy tag-hez tartozik globális és lokális stílusmegadás is egy adott tulajdonságra, akkor a lokálisan megadott érték felülírja a globálisan megadottat az adott helyen. (Általában a később megadott, tehát a dokumentumban lejjebb található stílusmegadás érvényesül.) De ha a stílusmegadás végén az !important kulcsszót is elhelyezzük, biztos, hogy az ott megadott stílus fog megjelenni, nem lehet lokálisan felüldefiniálni azt. Használata:

BODY { background: url(bar.gif) white;
       background-repeat: repeat-x ! important }

A stíluslapok megjelenését a szerzők és az olvasók is módosíthatják. A szerzők beállításai mindig felülírják az olvasók beállításait (hiszen tőlük ered a dokumentum), az !important kulcsszóval jelölt beállítások pedig magasabb rendűek a normál beállításoknál. Néhány látogatónak szüksége lehet, hogy a szövegek nagyobb betűmérettel és markáns színekkel jelenjenek meg, de nem valószínű, hogy az !important használatát is ismerik. Ezért nem célszerű minden esetben az !important „erőszakos“ alkalmazása.

A stíluslapokon megjegyzéseket helyezhetünk el, a C programnyelv szintaktikája szerint: /* ez egy megjegyzés*/

A stílusdefiníciókban megadható tulajdonságok

Használható mértékegységek, egységek

Hosszúságmértékek (Length Units): meg lehet adni abszolút és relatív formában. Használhatjuk a + és – előjeleket, és nem szabad szóközt tenni az érték és a mértékegység neve közé (pl. 1.3em helyes, 1.3 em hibás).Használható relatív jelentésű egységek: em (az adott elem (nagy)betűjének magassága), ex (a kisbetűk, pl. „x” magassága), px (betűmagasság pixelben). Használható abszolút jelentésű egységek: in (inch, 1 inch=2.54 cm), cm (centiméter), mm (milliméter), pt (point, 1 point=1/72 inch), pc (pica, 1 pica=12 point).

Százalékos értékek (Percentage Units): százalékos formában megadott értékek, melyek után ki kell írni a százalékjelet (%). Használhatjuk a + és – előjeleket is. A megadott érték mindig relatív a többi elemnél definiált értékekhez képest.

Színértékek (Color Units): lehet a szín angol neve, vagy hexadecimális RGB-értéke (hasonlóan a HTML-hez). Formátuma:

#rrggbb (pl. #00cc00)

#rgb (e.g., #0c0)

rgb(x,x,x) ahol x egy 0 és 255 közötti egész szám (pl. rgb(0,204,0))

rgb(y%,y%,y%) ahol y egy 0.0 és 100.0 közötti százalékérték
(pl. rgb(0%,80%,0%))

Elérési utak, url-ek: használatuk: url (teljes_url). Pl.

BODY { background: url(kep.gif) }
BODY { background: url(http://www.valahol.hu/kep.gif)}
BODY { background: url('kep.gif') }
BODY { background: url("kep.gif") }
 
 

Betűtulajdonságok

Font Family: betűcsalád (típus) megadása. Több betűtípus is megadható egymás után, melyeket vesszővel kell elválasztani. Pl.

P { font-family: "Times New Roman", Times, serif }
 

Font Style: betűstílus megadása, amely lehet: normal (normál), italic (dőlt) vagy oblique (ferde). Pl.

H1 { font-style: oblique }
H2 { font-style: normal }
 

Font Variant: a font-változat megadásával a normál illetve a kiskapitális írásmód között lehet váltani, tehát értéke normal, vagy smallcaps lehet. Pl.

P { font-variant: small-caps }
 

Font Weight: betűvastagság, amelynek értéke lehet: normal, bold (félkövér), bolder (kövér), light (vékonyabb), lighter (egészen vékony), illetve számmal: 100, 200. 300, 400, 500, 600, 700, 800, 900 (egyre vastagabbak lesznek, a normálnak a 400-as érték felel meg). Pl.

H1 { font-weight: 800 }
H2  { font-weight: normal }

Font Size: betűméret megadása, mely lehet abszolút vagy relatív. Az abszolút betűméretek lehetséges értékei, növekvő sorrendben: xx-small, x-small, small, medium, large, x-large, xx-large. A relatív méretek: larger (nagyobb), smaller (kisebb), illetve az előjeles értékkel megadható mértékegységek: em (a betű magasságértéke), ex (a kisbetű, „x” magasságértéke), px (betűmagasság megadása pixelben). Lehetséges az értékek előjeles megadása százalékos formában is, a % kiírásával. Pl.

H3     { font-size: small }
P      { font-size: 12pt }
LI     { font-size: 70% }
STRONG { font-size: larger }

Font: ez a tulajdonság rövidítésként, ill. összevonásként használható a többi fenti tulajdonság (font-style, font-variant, font-weight, font-size, line-height, font-family) megadásához. Pl.

P { font: italic bold 12pt/14pt Times, serif }

Szín- és háttértulajdonságok

Color: az adott elem színét adhatjuk meg vele. Pl.

H1 { color: blue }
H2 { color: #0000ff }
H3 { color: #0c0 }
 

Background Color: az adott elem háttérszínét lehet vele beállítani. Pl.

BODY { background-color: blue }
H5   { background-color: #0000ff }
 

Background Image: az adott elemhez háttérképet rendelhetünk vele. Pl.

BODY { background-image: url(../kepek/kep.gif) }
P    { background-image: url(http://www.valahol.hu/kep.jpg) }
 

Background Repeat: megadhatjuk, hogy a background-image-nél definiált háttérképet hogyan ismételje meg a böngésző. A lehetséges értékek: repeat (ismétlés folyamatosa, amennyiszer elfér, mindkét irányban), repeat-x (ismétlés csak vízszintesen), repeat-y (ismétlés csak függőlegesen), no-repeat (nem ismétlődik). Pl.

BODY { background: blue url(kep.gif);
       background-repeat: repeat-x }
 

Background Attachment: megadhatjuk, hogy a háttérkép együtt gördüljön-e a felette levő oldal tartalmával, vagy sem. Lehetséges értékei: scroll (gördül), fixed (nem gördül). Pl.

BODY { background: blue url(kep.gif);
       background-attachment: fixed }
 

Background Position: megadhatjuk vele a háttérkép pozícióját, százalékos vagy hosszúság értékekben, illetve az elhelyezését vízszintesen balra (left), jobbra (right), illetve középre (center), függőlegesen pedig felülre (top), középre (center), illetve alulra (bottom) igazítva. Csak blokkszintű elemeknél használható.

Background: ez a tulajdonság rövidítésként, ill. összevonásként használható a többi fenti tulajdonság (background-color, background-image, background-repeat, background-attachment, background-position) megadásához. Pl.

BODY{ background: blue url(http://www.valahol.hu/kep.gif) }
BLOCKQUOTE { background: #ff00ff }
P { background: url(../hatter/kep.jpg) #00ff00 fixed }

TABLE { background: #0c0 url(masikkep.jpg) no-repeat bottom right}
 

Szövegek tulajdonságai

Word Spacing: a szavak közötti távolságot lehet vele megadni, csak a hosszúság mértékegységek használhatóak, a negatív előjelet is figyelembe veszi. Pl.

P EM   { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }
 

Letter Spacing: a betűk közötti távolságot lehet vele megadni, csak a hosszúság mértékegységek használhatóak, a negatív előjelet is figyelembe veszi. Pl.

H1     { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }
 

Text Decoration: a szövegek alá-, fölé-, áthúzását, illetve villogtatását állíthatjuk vele. Lehetséges értékei: none (egyik sem), underline (aláhúzott), overline (föléhúzott), line-through (áthúzott), blink (villogó). Pl.

A:link, A:visited, A:active { text-decoration: none }
 

Vertical Alignment: függőleges igazítást tesz lehetővé. Lehetséges értékei: baseline (alapvonalhoz), sub (alsóindex), sup (felsőindex), top (legmagasabb elem tetejéhez), text-top (szöveg tetejéhez), middle (középre), bottom (legalacsonyabb elemhez), text-bottom (szöveg aljához), illetve százalékos értékmegadással. Pl.

IMG.kozep { vertical-align: middle }
IMG        { vertical-align: 50% }
.kitevo  { vertical-align: super }
 

Text Transformation: a csupa nagybetűs illetve, nagybetűvel kezdődő írás megadásához. Lehetséges értékei: none (egyik sem), Capitalize (minden szó nagybetűvel kezdődik), UPPERCASE (minden csupa nagybetűvel), lowercase (minden csupa kisbetűvel). Pl.

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }
 

Text Alignment: szövegek igazítását teszi lehetővé balra (left), jobbra (right), középre (center), ill. sorkizárt formában (justify). Csak blokkszintű elemekre használható. Pl.

H1          { text-align: center }
P.foszoveg { text-align: justify }
 

Text Indentation: szövegek első sorának behúzását lehet vele megadni, hosszúság vagy százalékos értékekben. Csak blokkszintű elemekre használható. Pl.

P { text-indent: 5em }
 

Line Height: ez a tulajdonság a szövegsorok közötti távolságot definiálja, hosszúság, vagy százalékos formában. Lehetőség van egy számmal megadni, ekkor a sortávolság a betűméret és a szám hányadosa, illetve használhatjuk a normal értéket is. Pl.

P { line-height: 200% }
 

Margó- és szegélytulajdonságok

Top Margin: a felső margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla érték letiltja a margót, és negatív értékeket is lehet használni. A százalékos érték mindig a külső elemre vonatkozik. Pl.

BODY { margin-top: 0 } 
 

Right Margin: a jobboldali margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla érték letiltja a margót, és negatív értékeket is lehet használni. A százalékos érték mindig a külső elemre vonatkozik. Pl.

P.keskeny { margin-right: 50% }
 

Bottom Margin: az alsó margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla érték letiltja a margót, és negatív értékeket is lehet használni. A százalékos érték mindig a külső elemre vonatkozik. Pl.

DT { margin-bottom: 3em }
 

Left Margin: a jobboldali margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla érték letiltja a margót, és negatív értékeket is lehet használni. A százalékos érték mindig a külső elemre vonatkozik. Pl.

ADDRESS { margin-left: 50% } 
 

Margin: segítségével a margókat lehet beállítani hosszúságértékükkel vagy százalékosan, illetve az auto érték is használható. Lehetőség van az értékek összevonta megadására, pl.

BODY { margin: 5em } /* mindegyik 5em */
P    { margin: 2em 4em } /* felső és alsó margók 2em,
                              bal és jobb margók 4em */
DIV  { margin: 1em 2em 3em 4em } /* felső margó 1em,
                                     jobb margó 2em,
                                     alsó margó 3em,
                                     bal margó 4em */ 
 

Top Padding: a padding-top megadja a felső keret (szegély) és a tartalom közötti távolságot, hosszúságértékkel vagy százalékosan. A százalékos érték mindig a külső elemre vonatkozik negatív értékek nem megengedettek.

Right Padding: a padding-right megadja a jobb keret (szegély) és a tartalom közötti távolságot, hosszúságértékkel vagy százalékosan. A százalékos érték mindig a külső elemre vonatkozik negatív értékek nem megengedettek.

Bottom Padding: a padding-bottom megadja az alsó keret (szegély) és a tartalom közötti távolságot, hosszúságértékkel vagy százalékosan. A százalékos érték mindig a külső elemre vonatkozik negatív értékek nem megengedettek.

Left Padding: a padding-left megadja a bal keret (szegély) és a tartalom közötti távolságot, hosszúságértékkel vagy százalékosan. A százalékos érték mindig a külső elemre vonatkozik negatív értékek nem megengedettek.

Padding: az előző tulajdonságok (top-padding, right-padding, bottom-padding, left-padding) összevont megadására használható, pl.

BLOCKQUOTE { padding: 2em 4em 5em } 
 

Top Border Width: a border-top-width segítségével az elem felső szegélyének szélességét lehet beállítani. Lehetséges értékei: thick (vastag), medium (közepes), thin (vékony), vagy szélességértékkel. A negatív értékek nem megengedettek

Right Border Width: a border-right-width segítségével az elem jobboldali szegélyének szélességét lehet beállítani. Lehetséges értékei: thick (vastag), medium (közepes), thin (vékony), vagy szélességértékkel. A negatív értékek nem megengedettek

Bottom Border Width: a border-bottom-width segítségével az elem alsó szegélyének szélességét lehet beállítani. Lehetséges értékei: thick (vastag), medium (közepes), thin (vékony), vagy szélességértékkel. A negatív értékek nem megengedettek

Left Border Width: a border-left-width segítségével az elem baloldali szegélyének szélességét lehet beállítani. Lehetséges értékei: thick (vastag), medium (közepes), thin (vékony), vagy szélességértékkel. A negatív értékek nem megengedettek

Border Width: az előző tulajdonságok (border-top-width, border-right-width, border-bottom-width, border-left-width) összevont megadására használható.

Border Color: a szegély színét lehet vele megadni, border-color:szín formátumban.

Border Style: a szegély stílusa itt állítható be, értéke lehet: none (nincs), dotted (pontozott), dashed (vonalkázott), solid (vékony vonalas), double (dupla vonalas), groove (vastagabb vonalas), ridge (térhatású), inset (betüremkedő), outset (kitüremkedő).

Top Border: a border-top tulajdonsággal egyszerre lehet beállítani az alábbiakat: border-top-width, border-style, color.

Right Border: a border-right tulajdonsággal egyszerre lehet beállítani az alábbiakat: border-right-width, border-style, color.

Bottom Border: a border-bottom tulajdonsággal egyszerre lehet beállítani az alábbiakat: border-bottom-width, border-style, color.

Left Border: a border-left tulajdonsággal egyszerre lehet beállítani az alábbiakat: border-left-width, border-style, color.

Border: ezzel a tulajdonsággal egyszerre lehet beállítani az alábbiakat: border-width, border-style, color. Pl.

H2        { border: solid 2em }
A:active  { border: thick dashed red }
A:link    { border: groove yellow }
A:visited { border: thin double #ff00ff }
 

Width: mindegyik blokkszintű, vagy annak megfelelő (pl. IMG, TEXTAREA, OBJECT, INPUT, SELECT) elemnek megadhatunk szélességértéket, százalékos, mértékegységgel megadott vagy automatikus (auto) formátumban. Pl.

INPUT.gomb { width: 10em }
 

Height: mindegyik blokkszintű, vagy annak megfelelő (pl. IMG, TEXTAREA, OBJECT, INPUT, SELECT) elemnek megadhatunk magasságértéket, százalékos, mértékegységgel megadott vagy automatikus (auto) formátumban.

Pl. IMG.kicsi { width: 40px; height: 40px }
 

Float: a float segítségével az objektumokat „körül lehet folyatni” a szöveggel. Lehetséges értékei: left (bal oldalon), right (jobb oldalon), none (nincs körülfolyatva).

Clear: szabályozhatjuk vele, hogy az adott  elem mellett lehet-e float tulajdonságú elem. Lehetséges értékei: left (a clear-rel megadott elemet a float tulajdonságú elem alá igazítja, balra), right (a clear-rel megadott elemet a float tulajdonságú elem alá igazítja, jobbra), both (a clear-rel megadott elemet a float tulajdonságú elem alá igazítja), none (engedi, hogy mellette float tulajdonságú elem legyen).

Listák, felsorolások tulajdonságai

Display: ezzel a tulajdonsággal az adott elem előtti és utáni sortörések megjelenését szabályozhatjuk. Lehetséges értékei: block (sortörést helyez el az elem előtt és után), inline (nem helyez el sortörést az elem előtt ill. után), list-item (sortörést helyez el az elem előtt és után, illetve a felsorolásjeleket is kiteszi), none (egyiket sem, de a beágyazott elemeket is kikapcsolja!!!).

Whitespace: a szóközök számának szabályozására használható. Lehetséges értékei: normal (több szóközt egynek vesz), pre (annyi szóközt ír ki, amennyi a forrsban van), nowrap (nem engedélyez  sortörést a <br> tag használata nélkül).

List Style Type: a listaelemek (felsorolások) stílusát  lehet vele beállítani Lehetséges értékei: disc (pötty), circle (karika), square (négyszög), decimal (sorszámok), lower-roman (kisbetűs római számok), upper-roman (nagybetűs római számok), lower-alpha (kisbetűk), upper-alpha (nagybetűk), none (egyik sem). Pl.

LI.negyszog {list-style-type: square}
UL.sima {list-style-type: none}
OL {list-style-type: upper-alpha} /* A B C D E stb. */
OL OL {list-style-type: decimal} /* 1 2 3 4 5 stb. */
OL OL OL {list-style-type: lower-roman} /* i ii iii iv stb.*/
 

List Style Image: a felsoroláselemek kis képek is lehetnek, amelyek elérési útját itt kell megadni. Pl.

UL.check { list-style-image: url(../kepek/kiskep.gif) }
UL LI.x  { list-style-image: url(kep.jpg) } 
 

List Style Position: megadhatjuk, hogy a felsoroláselemek az alattuk levő sor behúzásához képest hogyan helyezkedjenek el, lehetséges értékei: inside, outside és példák a megjelenésre:

Outside esetén:
 * Listaelem 1
   listaelem második sora
Inside esetén:
   * Listaelem1
    listaelem második sora
 

List Style: ezzel a tulajdonsággal egyszerre lehet beállítani az alábbiakat: list-style-type, list-style-position, list-style-image url-je. Pl.

LI.negyszog { list-style: square inside }
UL.sima  { list-style: none }
UL.check  { list-style: url(../kepek/kiskep.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }
 

Stíluslapok elhelyezése

Külső stíluslapfájlok használata

A külső stíluslapfájlok HTML dokumentumainkhoz csatolásának legnagyobb előnye, hogy számos oldal kinézetét megváltoztathatjuk egyetlen fájl, a stíluslap módosításával.

Külső stíluslapfájlokra (.css) a LINK tag-gel lehet hivatkozni a HTML dokumentumokban, pl.:

<LINK REL=StyleSheet HREF="stiluslap.css" TYPE="text/css" MEDIA=screen>

Ezt a tag-et a HTML dokumentum fejrészében (head-ben) kell elhelyezni. A külső stíluslapfájlok nem tartalmazhatnak HTML elemeket, csak CSS szabályokat. A LINK tag HREF attribútuma adja meg a hivatkozott stíluslapfájl nevét, elérési útját, a TYPE=”text/css” pedig a fájlformátumot. A REL=”StyleSheet” az elsődleges stíluslapot jelenti, míg további, opcionális stíluslapokat a REL=”Alternate StyleSheet” beírásával adhatunk meg (értelem- szerűen egy újabb LINK-ben). Több stíluslap együttes alapértelmezetté tételét a TITLE attribútummal lehet megoldani, pl.

<LINK REL=StyleSheet HREF="elso.css" TITLE="kozos">
<LINK REL=StyleSheet HREF="masodik.css" TITLE="kozos">
<LINK REL=StyleSheet HREF="harmadik.css" TITLE="kozos">
 

Ha mindhárom stíluslaphivatkozásnak a “kozos” címet adjuk, összekapcsoljuk őket, így mindhárom stíluslap elsődleges lesz. (Egyébként csak egy stílust lehet megadni elsődlegesnek, a Rel=”StyleSheet” segítségével.)

Az opcionális MEDIA attribútum segítségével megadhatjuk, hogy az adott stíluslappal formázott oldalt milyen hordozón kívánjuk megjeleníteni: pl. optimalizálhatjuk nyomtatásra (print), képernyőre (screen), prezentációkhoz (projection), beszédszintetizátorokhoz (aural), vakok számára készült berendezésekhez (braille), karakteres terminálokra (tty), televízióképernyőre (tv), illetve az all megadása az összes eszközt jelenti. Ha egyszerre több eszközt szeretnénk megadni, válasszuk el neveiket vesszővel, vagy használjuk az all kulcsszót. (Ezt a megadást azonban a 4-es Netscape Navigator általában figyelmen kívül hagyja.)

Stíluslapok beágyazása a HTML dokumentum forrásába

Ha egy –egy oldalnak egyedi stílust szeretnénk adni, használjuk a beágyazott stílusokat!

A stíluslapinformációk beágyzása (elhelyezése) az oldal forrásába(n) a <STYLE> .. </STYLE> tag segítségével, az oldal fejrészében történik. Pl.

<STYLE TYPE="text/css" MEDIA=screen>
<!--
  BODY  { background: url(kep.gif) red; color: black }
  P EM  { background: yellow; color: blue }
  .note { margin-left: 3em; margin-right: 3em }
-->
</STYLE>
 

Természetesen az előző részben megismert attribútumok itt is használhatók. A STYLE tag-et a régi böngészők nem ismerik, ezért a stílusinformációk megadását célszerű megjegyzések közé írni, hogy ezek a régi programok ne értelmezzék kiírandó szövegként a stílusmegadásokat.

Stíluslapok importálása

A stíluslapok importálására is lehetőség van a CSS-benaz @import kulcsszó segítségével. Ezt az önálló stíluslapfájlokban és a STYLE tag-en belül hasznűlhatjuk (a beágyazott stílusoknál). Pl.

<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
  @import url(http://www.valahol.hu/stilus.css);
  @import url(../stilusok/ujstilus.css);
  DT { background: yellow; color: black }
-->
</STYLE>
 

Megjegyzendő, hogy az importált stílusoknak a lista elején, tehát a többi lokális stílusmegadás előtt kell szerepelniük. A stílusok hierarchiájára, illetve öröklődésére vonatkozó szabályok érvényesülnek itt is, a lokális beállítások felülírják az importáltakat. A stílusok importálása a modularitást segíti.

STYLE attribútum

A STYLE attribútum segítségével az egyes HTML tag-ek szintjén adhatunk meg stílusdefiníciókat. Használhatjuk minden <BODY>-ba illeszthető tag-ben, kivéve pl. a <SCRIPT>-et. Pl.

<P STYLE="color: blue; font-family: 'Albertus Extra Bold', serif"> Ez a szöveg kék színnel és 
Albertus Extra Bold betűtípussal fog megjelenni,
 ha az a látogató gépén telepítve van.</P>
 

Használatához az alábbi sornak is szerepelnie kell az oldal fejrészében:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
 

VIGYÁZAT!!! A STYLE attribútum használatával elveszthetjük oldalaink egységességét, pedig a stíluslapok alkalmazásának egyik célja pl. az egységes oldalkialakítás megvalósítása.

CLASS attribútum

A CLASS attriibútummal lehet megadni egy tag-nek, hogy melyik (stíluslapon definiált) osztályba tartozik. Pl. az oldal kódjába beágyaztuk az alábbi stílust:

P.figyelmeztetes { font-weight: bolder; color: red; background: white }
 

Ezt az adott bekezdésben így használhatjuk:

<P CLASS=figyelmeztetes> Ez a figyelmeztetés fehér alapon, vastagabb piros
betűkkel jelenik meg!</P>

ID attribútum

Az ID attribútum egyedi stílust adhat egy elemenek. Pl. az oldal kódjába beágyaztuk az alábbi stílust (minden ID-azonosítónak egyedi nevűnek kell lennie a dokumentumban):

#larger1 { font-size: larger }
 

Ezt az adott elemnél így használhatjuk:

<P ID=larger1>Ezt most nagyobb betűkkel írtuk!</P>

SPAN tag

Ezt a tag-et azért találták ki, hogy stílust olyan elemeknek, szövegrészeknek is lehessen adni, amelyek beállítására hagyományosan más mód nincsen. Használhatjuk kiválasztóként a stílusok definiálásakor, és ismeri a STYLE CLASS és ID attribútumokat is. Pl. Ha a stílusmegadásban szerepel az, hogy :

.zoldbetus {color: #00ff00}

akkor egy tetszőleges szövegészben a <SPAN CLASS=”zoldbetus”> kódot követő szöveg zöld színű lesz egészen a </SPAN> tag-ig.

DIV tag

Ez a tag egy logikai egységet jelöl a HTML dokumentumban. Hasonlóan működik, mint a SPAN, de ez egy blokkszintű elem (neve a division szóból ered). Tartalmazhat bekezdéseket,táblázatokat, címsorelemeket, és további DIV-eket is. Akkor lehet jól használni, ha a különböző egységeknek eltérő stílust szeretnénk adni, pl. dokumentumainkat nagyobb részekre szeretnénk felosztani, tagolni. Pl a stílusmegadás legyen:

.jegyzet {color: #0000ff, font-weight: lighter}

és használata:

<DIV CLASS=”jegyzet”>

<H3>Jegyzet címe</H3>

<P>Ez itt a jegyzet szövege…   </P>

</DIV>


Stíluslapok használata a Dreamweaverben

A Dreamweaverben a Window®CSS Styles menüpont vagy a SHIFT F11 billentyűkombináció segítségével jeleníthetjük meg a stílusla­pok kezelésére szolgáló CSS Styles palettát. Használata sok tekintetben hasonlít a már megismert HTML Styles paletta használatára:

Új stílust a paletta jobb alsó sarkán található új stílus ikonnal (a második ikonnal), vagy a helyi menü New pontjával hozhatunk létre. Ezután a megjelenő dialógusablakban meg kell határozni a stílus helyét (New Style Sheet File, új stíluslap fájlban) vagy This Document Only (csak ebben a dokumentumban), és létrehozásának típusát:

·        Make Custom Style (class), vagyis egyéni stílusosztály definiálás segítségével. A stílusosztályra az itt megadott (mindig egy ponttal (.) kezdődő) névvel lehet hivatkozni, egy html-taghez (az ún. CSS-kiválasztóhoz, CSS selector-hoz) lehet hozzárendelni. A hozzárendelés az adott tag class attribútumá­ban a stílusosztály nevének megadásával történik. Beállításait az OK gomb megnyomása után lehet megadni.

·        Redefine HTML Tag, vagyis az adott HTML elem alapértelmezett tulajdonságainak felülírásával. Ezzel egy tag-et választhatunk ki, amelynek tulajdonságait szeretnénk módosí­tani. A tag későbbi előfordulásaiban ezt a tulajdonságot még felülírhatjuk.

·        Use CSS Selector, vagyis css választó segítségével a megadott (begépelt) tagek csoportját vagy a listából kiválasztható hivat­kozások (a:active: aktív, a: visited: látogatott, a: link: normál és a: hover: az egér éppen a link felett van) megjelenését lehet befolyásolni.

Eztán meg kell adni a stílus tulajdonságait, a megjelenő dialógusablakban, az alábbi kategóriák szerint:

·        Type: a betű tulajdonságait lehet itt beállítani.

·        Background: a háttérbeállítások megadására.

·        Block: szövegblokkok, bekezdések tulajdonságainak beállítására használható.

·        Box: képek, és szövegdobozok tulajdonságait lehet vele beállítani.

·        Border: keretek, szegélyek tulajdonságainak megadására használható.

·        List: listák, felsorolások, számozások tulajdonságainak megadásához lehet használni.

·        Positioning: az elemek pontos elhelyezésére, pozícionálására használható.

·        Extensions: az itt található bővítményekkel és a filterekkel a képek elhelyezését, illetve a használt színek megjelenítését változtathatjuk meg, pl. szürkeskálás effektet, vagy árnyékhatásokat érhetünk el.

A már létező CSS stílusokat a CSS Styles paletta helyi menüjében ta­lálható Edit… paranccsal, illetőleg az Edit… ikonnal (a harmadikkal) tudjuk megnézni, illetve módosítani. A már nem szükséges CSS stílusokat a CSS Styles palettán a kuka ikonra vonszolással törölhetjük. Egy már alkalmazott sílust a stílus nevére kattintva lehet a kijelölt oldalelemen érvényesíteni. Egy létező stíluslapfájlt (.css-t) a paletta jobb alsó sarkában levő Attach StyleSheet ikonnal rendelhetünk hozzá az oldalhoz.


Az utolsó frissítés időpontja: 2001-07-18
© Fodor Orsolya, 2001