< WebKészítés /> interaktív webszerkesztő tananyagok

Grafika testreszabása

A színek meghatározása a CSS-ben akár 3 féle módon is történhet. Ezek már ismerősek lehetnek az XHTML-ből. A legegyszerűbb a névvel (white), leggyakoribb a hexadecimális formával (#ffffff) történő megadás. Előfordulhat még színkeverés arányokkal (rgb(100%,100%,100%)) illetve 1-től 255-ig terjedő skálával (rgb(255,255,255)). Hogy ebből háttérszín legyen, elé kell tennünk még a background-color:-t. Háttérszín esetén az előbbieken túl még szükség lehet a transparent (~átlátszó) értékre is.

Ha nem egyezünk ki egy egységes színben (miért is tennénk?) akkor szükségünk lesz képek illesztésére a háttérre. Ezt a célt a background-image: url("KÉP_HELYE"); szolgálja. Értéke az URL címen kívül lehet még a none (~nincs) is.

Alapértelmezésben egy hátteret addig ismétel egymás alá, mellé mozaikszerűen, még be nem tölti az adott teret. (BODY háttér esetén a képernyőt.) Hogy ezt felülbírálhassuk, ki kell tennünk a background-repeat:-ot. Értékei: repeat (mozaik), repeat-x (csak x-irányban ismétel), repeat-y (csak y irányban ismétel) és no-repeat (nem ismétel) lehetnek.

Egy háttér alap esetben mindig a bal felső sarokban indul. A background-position:-nal el tudjuk tolni előre definiált, illetve egyedi mértékben onnét. A megadás a következő képen néz ki: függőleges(y) irány szóköz vízszintes(x) irány. Ha konkrét helyre kívánjuk igazítani, akkor a top/center/bottom left/center/right angol szócskákból válogathatunk, mik jelentése: felülre/középre/alulra balra/középre/jobbra. Ha pontosan tudjuk, mennyivel tolnánk el a képet, megadhatjuk %-ban és hosszmértékben (pl.: px) is. Pozitív szám esetén lefele vagy jobbra tolódik a kép, negatív értékek esetén pont ellenkezőleg.

Az ínyencséget a végére hagyva, bemutatom a background-attachment: tulajdonságot, mi kaphatja a scroll (görgethető) és fixed (rögzített) értékeket. Mint már kitalálhattuk, arra szolgál, hogy a dokumentum görgetése közben ne mozogjon a háttérkép vele együtt.

CSS-es jó szokás szerint itt is gondoltak a lustább emberekre és a background: rövidítő tulajdonságot kitalálták nekik. Szóközökkel elválasztva a következő sorrendben adhatjuk meg az előbb tanultak értékeit: background-color background-image background-repeat background-attachment background-position. Természetesen nem fontos ezeket sem mind megadni. A sorrend kötött, de elemek kihagyhatóak belőle. Ilyenkor a hiányzók az alapértelmezett értéküket veszik fel.

Kurzor beállítása

Kurzort egyrészt megadhatunk az előre definiált nevek segítségével. Ennél azonban izgalmasabb, hogy saját kurzort is készíthetünk, ekkor a kurzor URL-jét kell megadnunk. Ebben az esetben több URL-t is felsorolhatunk, de a lista végén mindig álljon ott egy előre definiált kurzornév. cursor: url("URL1") url("URL2") auto; (Az .ani kiterjesztést csak az IE, míg a .cur kiterjesztést általában minden böngésző kezeli. Alapértelmezett értékek listája: auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, progress, help.

KódTesztelő a gyakorláshoz

Idézőjelek használata

Az idézőjeleknek több típusuk létezik, itt kicsit kitárgyaljuk ezt is. Az írógépes idézőjelek olyan egyenes idézőjelek, amik közé mi is írjuk az attribútumok értékeit. (Pl.: 'A' ' aposztróf és "A" " dupla idézőjel) Magyar szövegben ez hibás! Helyettük magyar idézőjeleket kell használnunk, ami a billentyűzeten nem találhatók meg. (Pl: ’A’ ’ ’ fél idézőjel és „A” „ ” macskaköröm) Belső idézőjeleket a magyar tipográfiában akkor kell használni, ha maga az idézet is idézetet tartalmaz. (Pl: »A« » « magyar belső idézőjel) Ha angolul írjuk a weboldalt, akkor az angol kettős idézőjelet kell használnunk ilyenkor. (Pl: ‘A’ ‘ ’ angol szimpla idézőjelek és “A” “ ” angol dupla idézőjelek) A legjobb megoldás, ha rögtön a <q></q> címke tulajdonságainál módosítjuk ezt. A :lang(hu) > q { quotes: "„" "”" "»" "«"; } segítségével minden magyar szöveg idézetét átalakíthatjuk a négy aposztróf köztire. (A kijelölőnél lévő furcsaság az álelemeknél még tárgyalva lesz.) Alternatívaként pedig a már említett kicsit különc content:-et vethetjük be a szintén később tárgyalt :before (elem előtt) és :after (elem után) kijelölőkkel és következő értékekkel: open-quote (nyitó idézőjel), close-quote (záró idézőjel), no-open-quote (nyitó idézőjel tiltása) vagy no-close-quote (záró idézőjel tiltása).

Rövidítések, mozaikszavak

Rövidítéseknél és mozaikszavaknál az erre kitalált címkéket ajánlott használni. Őket mindig meg kell jelölni, de csak az első előforduláshoz muszáj magyarázószöveget adni. A képernyő felolvasók így is fel fogják ismerni, és kiolvassák a rövidítést. Ezért érdemes letiltani az abbr, acronym { border: none; } -val, hogy ne mindig húzza alá, csak abban az esetben, ha van hozzá magyarázat: abbr[title], acronym[title] { border-bottom: 1px dotted; cursor: help; } Ezen kívül a CSS segítségével azt is leírhatjuk, hogyan értelmezzék a képernyő felolvasók a rövidítéseket. Ha a fentieket betartjuk, akkor ezt a stíluslapot kell írni a felolvasó számára: abbr { speak: spell-out; } és acronym { speak: normal; }. Ekkor a rövidítést betűzni fogja, és a mozaikszavakat kiolvassa.

KódTesztelő a gyakorláshoz

Ugrás az oldal tetejére!

Ugrás a következő oldalra!

0 hozzászólás