Programozás | Webdizájn » Fodor Orsolya - Amit a CSS-ről feltétlenül tudni kell

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 tulajdonságnév2:érték2 [stb.]} formája:

CSS-kiválasztó {tulajdonságnév1:érték1, 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. codehtml {color: yellow}, codejs {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. codehtmltulajdonsag) 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 pszeudoelemeket 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 ér ték és a mér tékegység neve közé (pl. 13em helyes, 1.3 em hibás)Használható relatív jelentésű egységek: em (az adott elem (nagy)betűjének magassága), „x” magassága), px (betűmagasság pixel ben). Használható abszolút jelentésű ex (a kisbetűk, pl. 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 ér

ték mindig r elatí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%) (pl. rgb(0%,80%,0%)) ahol y egy 0.0 és 100.0 közötti százalékérték Elérési utak, url-ek: használatuk: url (teljes url). Pl BODY BODY BODY BODY { { { { background: background: background: background: url(kep.gif) } url(http://www.valaholhu/kepgif)} url(kep.gif) } 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ér té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 P LI STRONG { { { { font-size: font-size: font-size: font-size: small } 12pt } 70% } larger } Font: ez a tulajdonság rövidítésként, ill. összevonásként használható a többi fenti tulajdonság (fontstyle, 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/kepgif) } P { background-image: url(http://www.valaholhu/kepjpg) } 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), norepeat (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.valaholhu/kepgif) } BLOCKQUOTE { background: #ff00ff } P { background: url(./hatter/kepjpg) #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: -02em } 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: -01em } 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-bottomwidth, 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-topwidth, border-style, color. Right Border: a border-right tulajdonsággal egyszerre lehet beállítani az alábbiakat: border-rightwidth, border-style, color. Bottom Border: a border-bottom tulajdonsággal egyszerre lehet beállítani az alábbiakat: borderbottom-width, border-style, color. Left Border: a border-left tulajdonsággal egyszerre lehet beállítani az alábbiakat: border-leftwidth, 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. IMGkicsi { width: 40px; height: 40px } Float: a float segítségével az objektumokat„kör ül lehet folyatni” a szöveggel. Lehetséges ér té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/kiskepgif) } UL LI.x { list-style-image: url(kepjpg) } 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-styleposition, list-style-image url-je. Pl LI.negyszog { list-style: square inside } UL.sima { list-style: none } UL.check { list-style: url(/kepek/kiskepgif) 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 dokumentumokban, pl.: (.css) a LINK tag-gel lehet hivatkozni a HTML <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ájlfor má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 (ér telem - 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 “kozos” a 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 szer etné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.valaholhu/stiluscss); @import url(./stilusok/ujstiluscss); 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övető szöveg zöld színű lesz egészen a </SPAN> tag-ig. kódot 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 </DIV> </P> 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íluslapok 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 CSSkivá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ó hivatkozá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 található Edit paranccsal, illetőleg az Edit ikonnal (a har madikkal) 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