Amit a CSS-rl felttlenl tudni kell

8/9/2019 Amit a CSS-r l felt tlen l tudni kell

1/17

Amit a CSS-rl felttlenl tudni kell

BevezetsA CSS a Cascading Style Sheets, magyarul stluslapok kifejezs rvidtse, amely szabvnyos, az

oldalak formzshoz hasznlhat ler nyelv, s amely a HTML nyelv kibvtst szolglja. A CSSsegtsgvel oldalainknak professzionlis megjelenst adhatunk, mindezt gy, hogy pl. egy stluslapot(.css fjlt) rendelnk hozz az sszes oldalunkhoz, gy egy esetleges vltozst, stlusbeli mdostst azsszes szksges helyen, egy mozdulattal vgrehajthatunk, anlkl, hogy hossz rkat tltennk el aforrskdok kzi szerkesztsvel. A stluslapok alkalmazsval teht nemcsak megszpthetjkoldalainkat, hanem munknkat is jelentsen megknnythetjk Termszetesen a CSS-t ishasznlhatjuk egy-egy elemre, bekezdsre, netn az adott oldalra vonatkozlag. A CSS stlusokatelmenthetjk kls stluslapfjlba (.css), de elhelyezhetjk a stlusmegadsokat az oldalakban a ..tag segtsgvel loklisan, illetve lehetsg van hasznlatukra az egyes tag-ek

szintjn is.

CSS stlusok megadsaA stluslapokon stlusmegadsokkal (stlusdefincikkal) formzhatjuk meg a kvnt oldalelemeket:

a bngsz az itt megadott defincik alapjn fogja megjelenteni az oldalt. A bngszk nem teljesenkompatibilisek egymssal a stluslapok hasznlatt illeten, ezrt teszteljk oldalainkat a tbbbngszben, ha lehetsges, illetve a 4-esnl kisebb verzij bngszkben is.

A stlusmegadsok helye: lehet az oldalhoz hozzrendelt nll stluslapfjl, amely csak css kdottartalmaz, globlis stlusmegads, a .. tag segtsgvel, illetve az egyes tag-ekszintjn, begyazott formban. Errl bvebben aStluslapok elhelyezse c. rszben lesz sz.

Egy stlusmegads ltalnos formja: CSS-kivlaszt {tulajdonsgnv1:rtk1,tulajdonsgnv2:rtk2 [stb.]}

A stlusmegadsok kt rszbl llnak: a CSS-kivlasztbl(css selector) s astlusdefincis rszbl(description), pl. a H1 {color:blue} kd a Heading1 cmsorstlust mindig (esetlegesfelldefinilsig) kk sznnel fogja megjelenteni. A CSS-kivlaszt a stlusosztly vagy a mdostandtag nevt jelenti (pldnkban ez utbbi a H1), amelyet egy pont s az alosztly nevnek megadsvallehet szkteni. A kapcsos zrjelbe rand stlusdefincis rszben szerepelnek a stlus tulajdonsgai{tulajdonsgnv: rtk}formban (a fenti pldban a {color:blue} a stlusdefnci). Astlusmegadsoknl lehetsg van egyszerre tbb stlusdefinci (vagyis tulajdonsg) sszevonsra,felsorolsra, melyeket egymst kveten rva, pontosvesszvel kell elvlasztani.

Lehetsg van a kivlasztk sszevonsra is, pl. P EM {background:blue}. Ez azt jelenti,hogy az sszes olyan kiemelt szveg, amely bekezdsben van, kk htteret kap, de pl. a cmsorokbanszerepl kiemelt szvegekre ez a formzs nincs hatssal.

Stlusosztlyok

Egy tag-hez kszthetnk tbb klnbz, n. stlusosztlyt is: a tag neve utn egy ponttalelvlasztva adjuk meg az osztly nevt (mdostt), pl. code.html {color: yellow}, code.js{color:blue}. Az osztlyneveket meg lehet adni konkrt tag nlkl is, pl. .js {color: blue}.Ez esetben a .js nev osztlyt brmelyik tag-gel hasznlhatjuk. Az osztlyoknak pl. a funkcijukszerint adhatunk nevet. Az osztlyokra a tag-ekben a CLASS attribtummal lehet hivatkozni, pl. srgval rt kd
. Egyszerre csak egy mdostt hasznlhatunkkivlaszt elemenknt, alosztlyok megadsa (pl. code.html.tulajdonsag) nem lehetsges.


2/17

Lteznek n. ID-kivlasztk (ID-selectors) is: ezek megadsnl a kettskereszt (#) karakterthasznljuk, s elnevezsk arra utal, hogy a HTML tag-ekben az ID attribtummal lehet rjukhivatkozni. Pl. #ind30 {text-indent: 30} stlusmegadsra hivatkozunk:

ezegy 30 pixellel beljebb kezdett bekezds

Pszeudo-osztlyok s pszeudo-elemek

A CSS-t tmogat bngszk automatikusan felismerik az n. pszeudo-osztlyokat s pszeudo-

elemeket is. A pszeudo-osztlyok megklnbztetik az elemek tpusait (pl. a linkeket s a ltogatottlinkeket, mint hivatkozstpusokat). A pszeudo-elemekkel a tag-ek ltal meghatrozott elemekbizonyos rszeire hivatkozhatunk, pl. egy bekezds els betjre. Hasznlatuk:

kivlaszt:pszeudo-osztly {tulajdonsgnv: rtk}

kivlaszt:pszeudo-elem {tulajdonsgnv:rtk}

A pszeudo-osztlyok s pszeudo-elemek nem adhatk meg a CLASS attribtummal, de ahagyomnyos stlusosztlyokkal igen, pl.

Kivlaszt.osztly:pszudo-osztly {tulajdonsgnv: rtk}

Kivlaszt.osztly:pszudo-elem {tulajdonsgnv: rtk}

Hivatkozsok pszeudo-osztlyai

Az tag-hez hasznlhatjuk a link, visiteds active pszeudo-osztlyokat, pl.

A:link { color: red }

A:active { color: blue; font-size: 125% }

A:visited { color: green; font-size: 85% }

Ezzel a hivatkozsok, az aktulis s a mr bejrt hivatkozsok megjelenst vltoztathatjuk meg.

Els sor pszeudo-elem

Az els sor (first-line) peszeudo-elem segtsgvel a szvegblokkok els sornak adhatunk atbbi sortl eltr kinzetet, pl.

P:first-line {

font-variant: small-caps;

font-weight: bold }

Els bet pszeudo-elem

Az els bet (first-letter) pszeudo-elemmel lehet inicilkat kszteni, pl.

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

rkldsi szablyok

A stlusok rkldhetnek, s a tagen belli stlusdefincikkal fellrhatjuk a globlisstlusmegadsokat. Ez azt is jelenti, hogyha egy tag-hez tartozik globlis s loklis stlusmegads is egyadott tulajdonsgra, akkor a loklisan megadott rtk fellrja a globlisan megadottat az adotthelyen. (ltalban a ksbb megadott, teht a dokumentumban lejjebb tallhat stlusmegads


3/17

rvnyesl.) De ha a stlusmegads vgn az !important kulcsszt is elhelyezzk, biztos, hogy az ottmegadott stlus fog megjelenni, nem lehet loklisan felldefinilni azt. Hasznlata:

BODY { background: url(bar.gif) white;

background-repeat: repeat-x ! important }

A stluslapok megjelenst a szerzk s az olvask is mdosthatjk. A szerzk belltsai mindigfellrjk az olvask belltsait (hiszen tlk ered a dokumentum), az !important kulcsszval jellt

belltsok pedig magasabb rendek a norml belltsoknl. Nhny ltogatnak szksge lehet, hogya szvegek nagyobb betmrettel s markns sznekkel jelenjenek meg, de nem valszn, hogy az !important hasznlatt is ismerik. Ezrt nem clszer minden esetben az !important

erszakos alkalmazsa. A stluslapokon megjegyzseket helyezhetnk el, a C programnyelv szintaktikja szerint: /* ez

egy megjegyzs*/

A stlusdefincikban megadhat tulajdonsgokHasznlhat mrtkegysgek, egysgek

Hosszsgmrtkek (Length Units): meg lehet adni abszolt s relatv formban. Hasznlhatjuk a+ s eljeleket, s nem szabad szkzt tenni az rtk s a mrtkegysg neve kz (pl. 1.3em helyes, 1.3 em hibs).Hasznlhat relatv jelents egysgek: em (az adott elem (nagy)betjnek magassga),ex (a kisbetk, pl. x magassga), px (betmagassg pixelben). Hasznlhat abszolt jelents egysgek: in (inch, 1 inch=2.54 cm), cm (centimter), mm (millimter), pt (point, 1 point=1/72 inch), pc(pica, 1 pica=12 point).

Szzalkos rtkek (Percentage Units): szzalkos formban megadott rtkek, melyek utn ki kellrni a szzalkjelet (%). Hasznlhatjuk a + s eljeleket is. A megadott rtk mindig relatv a tbbi

elemnl definilt rtkekhez kpest.

Sznrtkek (Color Units): lehet a szn angol neve, vagy hexadecimlis RGB-rtke (hasonlan aHTML-hez). Formtuma:

#rrggbb (pl. #00cc00)

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

rgb(x,x,x) ahol x egy 0 s 255 kztti egsz szm (pl. rgb(0,204,0))

rgb(y%,y%,y%) ahol y egy 0.0 s 100.0 kztti szzalkrtk (pl. rgb(0%,80%,0%))

Elrsi utak, url-ek: hasznlatuk: 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") }

Bettulajdonsgok

Font Family: betcsald (tpus) megadsa. Tbb bettpus is megadhat egyms utn, melyeketvesszvel kell elvlasztani. Pl.


4/17

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

Font Style: betstlus megadsa, amely lehet: normal (norml), italic (dlt) vagy oblique (ferde). Pl.

H1 { font-style: oblique }

H2 { font-style: normal }

Font Variant: a font-vltozat megadsval a norml illetve a KISKAPITLIS rsmd kztt lehetvltani, teht rtke normal, vagy SMALLCAPS lehet. Pl.

P { font-variant: small-caps }

Font Weight: betvastagsg, amelynek rtke lehet: normal, bold (flkvr), bolder (kvr), light(vkonyabb), lighter (egszen vkony), illetve szmmal: 100, 200. 300, 400, 500, 600, 700, 800, 900(egyre vastagabbak lesznek, a normlnak a 400-as rtk felel meg). Pl.

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

Font Size: betmret megadsa, mely lehet abszolt vagy relatv. Az abszolt betmreteklehetsges rtkei, nvekv sorrendben: xx-small, x-small, small, medium, large, x-large, xx-large. Arelatv mretek: larger (nagyobb), smaller (kisebb), illetve az eljeles rtkkel megadhatmrtkegysgek: em (a bet magassgrtke), ex (a kisbet, x magassgrtke), px (betmagassg megadsa pixelben). Lehetsges az rtkek eljeles megadsa szzalkos formban is, a % kirsval.Pl.

H3 { font-size: small }

P { font-size: 12pt }LI { font-size: 70% }

STRONG { font-size: larger }

Font: ez a tulajdonsg rvidtsknt, ill. sszevonsknt hasznlhat a tbbi fenti tulajdonsg(font-style, font-variant, font-weight, font-size, line-height, font-family) megadshoz. Pl.

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

Szn- s httrtulajdonsgok

Color: az adott elem sznt adhatjuk meg vele. Pl.

H1 { color: blue }

H2 { color: #0000ff }

H3 { color: #0c0 }

Background Color: az adott elem httrsznt lehet vele belltani. Pl.

BODY { background-color: blue }

H5 { background-color: #0000ff }

Background Image: az adott elemhez httrkpet rendelhetnk vele. Pl.

BODY { background-image: url(../kepek/kep.gif) }


5/17

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

Background Repeat: megadhatjuk, hogy a background-image-nl definilt httrkpet hogyanismtelje meg a bngsz. A lehetsges rtkek: repeat (ismtls folyamatosa, amennyiszer elfr,mindkt irnyban), repeat-x (ismtls csak vzszintesen), repeat-y (ismtls csak fgglegesen), no-repeat (nem ismtldik). Pl.

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

Background Attachment: megadhatjuk, hogy a httrkp egytt grdljn-e a felette lev oldaltartalmval, vagy sem. Lehetsges rtkei: scroll (grdl), fixed (nem grdl). Pl.

BODY { background: blue url(kep.gif);

background-attachment: fixed }

Background Position: megadhatjuk vele a httrkp pozcijt, szzalkos vagy hosszsgrtkekben, illetve az elhelyezst vzszintesen balra (left), jobbra (right), illetve kzpre (center),fgglegesen pedig fellre (top), kzpre (center), illetve alulra (bottom) igaztva. Csak blokkszintelemeknl hasznlhat.

Background: ez a tulajdonsg rvidtsknt, ill. sszevonsknt hasznlhat a tbbi fentitulajdonsg (background-color, background-image, background-repeat, background-attachment,background-position) megadshoz. 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}

Szvegek tulajdonsgai

Word Spacing: a szavak kztti tvolsgot lehet vele megadni, csak a hosszsg mrtkegysgekhasznlhatak, a negatv eljelet is figyelembe veszi. Pl.

P EM { word-spacing: 0.4em }

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

Letter Spacing: a betk kztti tvolsgot lehet vele megadni, csak a hosszsg mrtkegysgekhasznlhatak, a negatv eljelet is figyelembe veszi. Pl.

H1 { letter-spacing: 0.1em }

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

Text Decoration: a szvegek al-, fl-, thzst, illetve villogtatst llthatjuk vele. Lehetsgesrtkei: none (egyik sem), underline (alhzott), overline (flhzott), line-through (thzott), blink(villog). Pl.

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


6/17

Vertical Alignment: fggleges igaztst tesz lehetv. Lehetsges rtkei: baseline (alapvonalhoz),sub (alsindex), sup (felsindex), top (legmagasabb elem tetejhez), text-top (szveg tetejhez), middle(kzpre), bottom (legalacsonyabb elemhez), text-bottom (szveg aljhoz), illetve szzalkosrtkmegadssal. Pl.

IMG.kozep { vertical-align: middle }

IMG { vertical-align: 50% }

.kitevo { vertical-align: super }

Text Transformation: a csupa nagybets illetve, nagybetvel kezdd rs megadshoz.Lehetsges rtkei: none (egyik sem), Capitalize (minden sz nagybetvel kezddik), UPPERCASE(minden csupa nagybetvel), lowercase (minden csupa kisbetvel). Pl.

H1 { text-transform: uppercase }

H2 { text-transform: capitalize }

Text Alignment: szvegek igaztst teszi lehetv balra (left), jobbra (right), kzpre (center), ill.

sorkizrt formban (justify). Csak blokkszint elemekre hasznlhat. Pl.H1 { text-align: center }

P.foszoveg { text-align: justify }

Text Indentation: szvegek els sornak behzst lehet vele megadni, hosszsg vagy szzalkosrtkekben. Csak blokkszint elemekre hasznlhat. Pl.

P { text-indent: 5em }

Line Height: ez a tulajdonsg a szvegsorok kztti tvolsgot definilja, hosszsg, vagyszzalkos formban. Lehetsg van egy szmmal megadni, ekkor a sortvolsg a betmret s a szmhnyadosa, illetve hasznlhatjuk a normal rtket is. Pl.

P { line-height: 200% }

Marg- s szeglytulajdonsgok

Top Margin: a fels marg belltst szolglja, amely megadhat hosszsgrtkvel, vagy

szzalkos formban, illetve az auto (automatikus) rtkkel. A nulla rtk letiltja a margt, s negatvrtkeket is lehet hasznlni. A szzalkos rtk mindig a kls elemre vonatkozik. Pl.

BODY { margin-top: 0 }

Right Margin: a jobboldali marg belltst szolglja, amely megadhat hosszsgrtkvel, vagyszzalkos formban, illetve az auto (automatikus) rtkkel. A nulla rtk letiltja a margt, s negatvrtkeket is lehet hasznlni. A szzalkos rtk mindig a kls elemre vonatkozik. Pl.

P.keskeny { margin-right: 50% }

Bottom Margin: az als marg belltst szolglja, amely megadhat hosszsgrtkvel, vagyszzalkos formban, illetve az auto (automatikus) rtkkel. A nulla rtk letiltja a margt, s negatvrtkeket is lehet hasznlni. A szzalkos rtk mindig a kls elemre vonatkozik. Pl.


7/17

DT { margin-bottom: 3em }

Left Margin: a jobboldali marg belltst szolglja, amely megadhat hosszsgrtkvel, vagyszzalkos formban, illetve az auto (automatikus) rtkkel. A nulla rtk letiltja a margt, s negatvrtkeket is lehet hasznlni. A szzalkos rtk mindig a kls elemre vonatkozik. Pl.

ADDRESS { margin-left: 50% }

Margin: segtsgvel a margkat lehet belltani hosszsgrtkkkel vagy szzalkosan, illetve azauto rtk is hasznlhat. Lehetsg van az rtkek sszevonta megadsra, pl.

BODY { margin: 5em } /* mindegyik 5em */

P { margin: 2em 4em } /* fels s als margk 2em,bal s jobb margk 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 (szegly) s a tartalom kztti tvolsgot,hosszsgrtkkel vagy szzalkosan. A szzalkos rtk mindig a kls elemre vonatkozik negatvrtkek nem megengedettek.

Right Padding: a padding-right megadja a jobb keret (szegly) s a tartalom kztti tvolsgot,hosszsgrtkkel vagy szzalkosan. A szzalkos rtk mindig a kls elemre vonatkozik negatvrtkek nem megengedettek.

Bottom Padding: a padding-bottom megadja az als keret (szegly) s a tartalom kztti

tvolsgot, hosszsgrtkkel vagy szzalkosan. A szzalkos rtk mindig a kls elemre vonatkoziknegatv rtkek nem megengedettek.

Left Padding: a padding-left megadja a bal keret (szegly) s a tartalom kztti tvolsgot,hosszsgrtkkel vagy szzalkosan. A szzalkos rtk mindig a kls elemre vonatkozik negatvrtkek nem megengedettek.

Padding: az elz tulajdonsgok (top-padding, right-padding, bottom-padding, left-padding)sszevont megadsra hasznlhat, pl.

BLOCKQUOTE { padding: 2em 4em 5em }

Top Border Width: a border-top-width segtsgvel az elem fels szeglynek szlessgt lehetbelltani. Lehetsges rtkei: thick (vastag), medium (kzepes), thin (vkony), vagy szlessgrtkkel.A negatv rtkek nem megengedettek

Right Border Width: a border-right-width segtsgvel az elem jobboldali szeglynek szlessgtlehet belltani. Lehetsges rtkei: thick (vastag), medium (kzepes), thin (vkony), vagyszlessgrtkkel. A negatv rtkek nem megengedettek

Bottom Border Width: a border-bottom-width segtsgvel az elem als szeglynek szlessgtlehet belltani. Lehetsges rtkei: thick (vastag), medium (kzepes), thin (vkony), vagyszlessgrtkkel. A negatv rtkek nem megengedettek


8/17

Left Border Width: a border-left-width segtsgvel az elem baloldali szeglynek szlessgt lehetbelltani. Lehetsges rtkei: thick (vastag), medium (kzepes), thin (vkony), vagy szlessgrtkkel.A negatv rtkek nem megengedettek

Border Width: az elz tulajdonsgok (border-top-width, border-right-width, border-bottom-width, border-left-width) sszevont megadsra hasznlhat.

Border Color: a szegly sznt lehet vele megadni, border-color:szn formtumban.

Border Style: a szegly stlusa itt llthat be, rtke lehet: none (nincs), dotted (pontozott), dashed(vonalkzott), solid (vkony vonalas), double (dupla vonalas), groove (vastagabb vonalas), ridge(trhats), inset (betremked), outset (kitremked).

Top Border: a border-top tulajdonsggal egyszerre lehet belltani az albbiakat: border-top-width, border-style, color.

Right Border: a border-right tulajdonsggal egyszerre lehet belltani az albbiakat: border-right-width, border-style, color.

Bottom Border: a border-bottom tulajdonsggal egyszerre lehet belltani az albbiakat: border-bottom-width, border-style, color.

Left Border: a border-left tulajdonsggal egyszerre lehet belltani az albbiakat: border-left-width, border-style, color.

Border: ezzel a tulajdonsggal egyszerre lehet belltani az albbiakat: 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 szlessgrtket, szzalkos, mrtkegysggel megadott vagyautomatikus (auto) formtumban. Pl.

INPUT.gomb { width: 10em }

Height: mindegyik blokkszint, vagy annak megfelel (pl. IMG, TEXTAREA, OBJECT, INPUT,SELECT) elemnek megadhatunk magassgrtket, szzalkos, mrtkegysggel megadott vagyautomatikus (auto) formtumban.

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

Float: a float segtsgvel az objektumokat krl lehet folyatni a szveggel. Lehetsges rtkei: left (bal oldalon), right (jobb oldalon), none (nincs krlfolyatva).

Clear: szablyozhatjuk vele, hogy az adott elem mellett lehet-e float tulajdonsg elem. Lehetsgesrtkei: left (a clear-rel megadott elemet a float tulajdonsg elem al igaztja, balra), right (a clear-relmegadott elemet a float tulajdonsg elem al igaztja, jobbra), both (a clear-rel megadott elemet afloat tulajdonsg elem al igaztja), none (engedi, hogy mellette float tulajdonsg elem legyen).

Listk, felsorolsok tulajdonsgai


9/17

Display: ezzel a tulajdonsggal az adott elem eltti s utni sortrsek megjelenstszablyozhatjuk. Lehetsges rtkei: block (sortrst helyez el az elem eltt s utn), inline (nem helyezel sortrst az elem eltt ill. utn), list-item (sortrst helyez el az elem eltt s utn, illetve afelsorolsjeleket is kiteszi), none (egyiket sem, de a begyazott elemeket is kikapcsolja!!!).

Whitespace: a szkzk szmnak szablyozsra hasznlhat. Lehetsges rtkei: normal (tbbszkzt egynek vesz), pre (annyi szkzt r ki, amennyi a forrsban van), nowrap (nem engedlyezsortrst a
tag hasznlata nlkl).

List Style Type: a listaelemek (felsorolsok) stlust lehet vele belltani Lehetsges rtkei: disc(ptty), circle (karika), square (ngyszg), decimal (sorszmok), lower-roman (kisbets rmaiszmok), upper-roman (nagybets rmai szmok), lower-alpha (kisbetk), upper-alpha (nagybetk),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 felsorolselemek kis kpek is lehetnek, amelyek elrsi tjt 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 felsorolselemek az alattuk lev sor behzshoz kpesthogyan helyezkedjenek el, lehetsges rtkei: inside, outside s pldk a megjelensre:

Outside esetn:* Listaelem 1

listaelem msodik soraInside esetn:

* Listaelem1

listaelem msodik sora

List Style: ezzel a tulajdonsggal egyszerre lehet belltani az albbiakat: 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 }

Stluslapok elhelyezseKls stluslapfjlok hasznlata

A kls stluslapfjlok HTML dokumentumainkhoz csatolsnak legnagyobb elnye, hogy szmosoldal kinzett megvltoztathatjuk egyetlen fjl, a stluslap mdostsval.

Kls stluslapfjlokra (.css) a LINK tag-gel lehet hivatkozni a HTMLdokumentumokban, pl.:


10/17

Ezt a tag-et a HTML dokumentum fejrszben (head-ben) kell elhelyezni. A kls stluslapfjloknem tartalmazhatnak HTML elemeket, csak CSS szablyokat. A LINK tag HREF attribtuma adjameg a hivatkozott stluslapfjl nevt, elrsi tjt, a TYPE= text/css pedig a fjlformtumot. A REL= StyleSheet az elsdleges stluslapot jelenti, mg tovbbi, opcionlis stluslapokat a REL= Alternate StyleSheet bersval adhatunk meg (rtelem- szeren egy jabb LINK-ben). Tbb stluslap egyttes alaprtelmezett ttelt a TITLE attribtummal lehet megoldani, pl.

Ha mindhrom stluslaphivatkozsnak a kozos cmet adjuk, sszekapcsoljuk ket, gy mindhrom stluslap elsdleges lesz. (Egybknt csak egy stlust lehet megadni elsdlegesnek, aRel= StyleSheet segtsgvel.)

Az opcionlis MEDIA attribtum segtsgvel megadhatjuk, hogy az adott stluslappal formzott

oldalt milyen hordozn kvnjuk megjelenteni: pl. optimalizlhatjuk nyomtatsra (print), kpernyre(screen), prezentcikhoz (projection), beszdszintetiztorokhoz (aural), vakok szmra kszltberendezsekhez (braille), karakteres terminlokra (tty), televzikpernyre (tv), illetve az allmegadsa az sszes eszkzt jelenti. Ha egyszerre tbb eszkzt szeretnnk megadni, vlasszuk elneveiket vesszvel, vagy hasznljuk az all kulcsszt. (Ezt a megadst azonban a 4-es NetscapeNavigator ltalban figyelmen kvl hagyja.)

Stluslapok begyazsa a HTML dokumentum forrsba

Ha egy egy oldalnak egyedi stlust szeretnnk adni, hasznljuk a begyazott stlusokat!

A stluslapinformcik begyzsa (elhelyezse) az oldal forrsba(n) a .. tag segtsgvel, az oldal fejrszben trtnik. Pl.

Termszetesen az elz rszben megismert attribtumok itt is hasznlhatk. A STYLE tag-et a rgibngszk nem ismerik, ezrt a stlusinformcik megadst clszer megjegyzsek kz rni, hogyezek a rgi programok ne rtelmezzk kirand szvegknt a stlusmegadsokat.

Stluslapok importlsa

A stluslapok importlsra is lehetsg van a CSS-benaz @import kulcssz segtsgvel. Ezt aznll stluslapfjlokban s a STYLE tag-en bell hasznlhatjuk (a begyazott stlusoknl). Pl.


11/17

Megjegyzend, hogy az importlt stlusoknak a lista elejn, teht a tbbi loklis stlusmegads elttkell szerepelnik. A stlusok hierarchijra, illetve rkldsre vonatkoz szablyok rvnyeslnekitt is, a loklis belltsok fellrjk az importltakat. A stlusok importlsa a modularitst segti.

STYLE attribtum

A STYLE attribtum segtsgvel az egyes HTML tag-ek szintjn adhatunk meg stlusdefincikat.Hasznlhatjuk minden -ba illeszthet tag-ben, kivve pl. a -et. Pl.

Ez a

szveg kk sznnel s

Albertus Extra Bold bettpussal fog megjelenni,

ha az a ltogat gpn teleptve van.

Hasznlathoz az albbi sornak is szerepelnie kell az oldal fejrszben:

VIGYZAT!!! A STYLE attribtum hasznlatval elveszthetjk oldalaink egysgessgt, pedig astluslapok alkalmazsnak egyik clja pl. az egysges oldalkialakts megvalstsa.

CLASS attribtum

A CLASS attriibtummal lehet megadni egy tag-nek, hogy melyik (stluslapon definilt) osztlybatartozik. Pl. az oldal kdjba begyaztuk az albbi stlust:

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

Ezt az adott bekezdsben gy hasznlhatjuk:

Ez a figyelmeztets fehr alapon, vastagabb piros

betkkel jelenik meg!

ID attribtum

Az ID attribtum egyedi stlust adhat egy elemenek. Pl. az oldal kdjba begyaztuk az albbistlust (minden ID-azonostnak egyedi nevnek kell lennie a dokumentumban):

#larger1 { font-size: larger }

Ezt az adott elemnl gy hasznlhatjuk:

Ezt most nagyobb betkkel rtuk!

SPAN tag

Ezt a tag-et azrt talltk ki, hogy stlust olyan elemeknek, szvegrszeknek is lehessen adni,amelyek belltsra hagyomnyosan ms md nincsen. Hasznlhatjuk kivlasztknt a stlusokdefinilsakor, s ismeri a STYLE CLASS s ID attribtumokat is. Pl. Ha a stlusmegadsban szerepelaz, hogy :


12/17

.zoldbetus {color: #00ff00}

akkor egy tetszleges szvegszben a kdotkvet szveg zld szn lesz egszen a tag-ig.

DIV tag

Ez a tag egy logikai egysget jell a HTML dokumentumban. Hasonlan mkdik, mint a SPAN,

de ez egy blokkszint elem (neve a division szbl ered). Tartalmazhat bekezdseket,tblzatokat,cmsorelemeket, s tovbbi DIV-eket is. Akkor lehet jl hasznlni, ha a klnbz egysgeknek eltrstlust szeretnnk adni, pl. dokumentumainkat nagyobb rszekre szeretnnk felosztani, tagolni. Pl astlusmegads legyen:

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

s hasznlata:

Jegyzet cme

Ez itt a jegyzet szvege


13/17

Stluslapok hasznlata a Dreamweaverben

A Dreamweaverben a Window CSS Styles menpont vagy a SHIFT F11 billentykombincisegtsgvel jelenthetjk meg a stluslapok kezelsre szolgl CSS Styles palettt. Hasznlata soktekintetben hasonlt a mr megismertHTML Styles paletta hasznlatra:

j stlust a paletta jobb als sarkn tallhat j stlus ikonnal (a msodik ikonnal), vagy a helyimen New pontjval hozhatunk ltre. Ezutn a megjelen dialgusablakban meg kell hatrozni astlus helyt (New Style Sheet File, j stluslap fjlban) vagy This Document Only (csak ebben adokumentumban), s ltrehozsnak tpust:

Make Custom Style (class), vagyis egyni stlusosztly definils segtsgvel. A stlusosztlyra az ittmegadott (mindig egy ponttal (.) kezdd) nvvel lehet hivatkozni, egy html-taghez (az n. CSS-kivlaszthoz, CSS selector-hoz) lehet hozzrendelni. A hozzrendels az adott tag class attribtum-ban a stlusosztly nevnek megadsval trtnik. Belltsait az OK gomb megnyomsa utn lehetmegadni.

Redefine HTML Tag, vagyis az adott HTML elem alaprtelmezett tulajdonsgainak fellrsval.Ezzel egy tag-et vlaszthatunk ki, amelynek tulajdonsgait szeretnnk mdostani. A tag ksbbielfordulsaiban ezt a tulajdonsgot mg fellrhatjuk.

Use CSS Selector, vagyis css vlaszt segtsgvel a megadott (begpelt) tagek csoportjt vagy alistbl kivlaszthat hivatkozsok (a:active: aktv, a: visited: ltogatott, a: link: norml s a: hover: azegr ppen a link felett van) megjelenst lehet befolysolni.

Eztn meg kell adni a stlus tulajdonsgait, a megjelen dialgusablakban, az albbi kategrikszerint:

Type: a bet tulajdonsgait lehet itt belltani.


14/17

Background: a httrbelltsok megadsra.

Block: szvegblokkok, bekezdsek tulajdonsgainak belltsra hasznlhat.


15/17

Box: kpek, s szvegdobozok tulajdonsgait lehet vele belltani.

Border: keretek, szeglyek tulajdonsgainak megadsra hasznlhat.


16/17

List: listk, felsorolsok, szmozsok tulajdonsgainak megadshoz lehet hasznlni.

Positioning: az elemek pontos elhelyezsre, pozcionlsra hasznlhat.


17/17

Extensions: az itt tallhat bvtmnyekkel s a filterekkel a kpek elhelyezst, illetve a hasznltsznek megjelentst vltoztathatjuk meg, pl. szrkeskls effektet, vagy rnykhatsokat rhetnk el.

A mr ltez CSS stlusokat a CSS Styles paletta helyi menjben tallhat Edit paranccsal,illetleg az Edit ikonnal (a harmadikkal) tudjuk megnzni, illetve mdostani. A mr nem szksges CSS stlusokat a CSS Styles palettn a kuka ikonra vonszolssal trlhetjk. Egy mr alkalmazottslust a stlus nevre kattintva lehet a kijellt oldalelemen rvnyesteni. Egy ltez stluslapfjlt (.css-t)a paletta jobb als sarkban levAttach StyleSheetikonnal rendelhetnk hozz az oldalhoz.

Az utols frissts idpontja: 2001-07-18

Fodor Orsolya, 2001

Documents

Amit a CSS-rl felttlenl tudni kell