Itt most bemutatom, hogyan lehet egyszerűbben, egy CSS fájllal megoldani a dizájnolást.

Ez azért is jó, mert nem kell egy egész kódsort a modulodban lapozgatni, hanem készíthetsz egy fájlt is, és azt a portálodra feltöltve tudod használni. Én a Szerkeszthető láblécbe tettem, és a hiedelmekkel ellentétben nálam teljesen áttetsző a modul. Olvastam már valahol, hogy ezt külön be kell állítani egy kóddal, mert akkor olyan lesz a háttér, mint a többi modulé. Nálam sem itt, sem a baba oldalon nem lett olyan színű, sőt transparent a háttér mindenféle külön beállítás nélkül.

Ha jól néztem ez azért van, mert a kis négyzetekből hiányzik a pipa, vagyis eleve úgy van beállítva, hogy ne legyen háttere és fejléce.

Képekkel illusztrálom nektek, hogyan is kell csinálni.

Sajnos szerkesztő módban valamiért nem működik a Chrome, vagy egyéb böngésző helyesírás ellenőrzője, és mikor gépelünk nem látjuk a gyors írásból fakadó esetleges hibáinkat.

Erre van egy tippem, ami nem kód, de azért ide írom be.

Ha befejeztük a gépelést akkor lépjünk át FORRÁSKÓD nézetbe, kattintsunk bele a szövegbe, és láss csudát, máris megjelennek a piros hullámvonalak. Megtörténik a helyesírás ellenőrzés, lehet javítani a szöveget ott helyben, jobb klikk hatására tippeket is kapunk. Ha ezzel végeztünk, visszatérhetünk szerkesztő módba, és menthetjük írásunkat.

Ezt nagyon kevesen használják, pedig hasznos tud lenni, főleg ha egy eseménynaptárt is adunk hozzá. Abban ugyanis megjelennek a felvitt adatok, és szépen ki is lehet őket fejteni. Én a babás oldalamon az időpontjaimat közöltem benne, amik lassan majd a baba időpontjaira fognak átváltani, ugyanis nekem már nem hiszem hogy lesz tennivalóm a szülés után, a babát kell majd ide-oda elhordani.

A kód hasonló a többihez, én igazából csak a színeken variáltam.

Ebben a cikkben mindjárt kettő kódot is közlök veletek, amiket használat után magatok is láthattok a forráskód segítségével, csak akkor még html formában. Nekünk ugye CSS kell, ahhoz, hogy mind ugyan úgy nézzen ki, ha használod.

Példa van rájuk a babás oldalamon!

hr { /* elválasztóvonal */

}

blockquote { /* idézet */

}

Vannak oldalak, ahol saját egérmutató jelenik meg, de sajnos nem mindegy, hogy milyen formátumú képet adunk meg cursornak, így nem mindegyik böngésző jeleníti meg. Így sajnálatunkra maradnak most az egyszerűbb cursorok, melyek tuti megjelennek mindegyik böngészőben.

Ezeket hozzá adhatod a body részhez, vagy a linkekhez. Kinek mi tetszik. Egy ilyen sort kell csak beilleszteni:

cursor: auto;

Ezt elkezdtem ugyan bemutatni, de nem írtam róla semmit.

A class osztályt jelent, amivel egy-egy kódrészt tudsz egyedivé varázsolni, de ezeket általában oda rakjuk, ahol szeretnénk hogy hasson, vagyis abba a modulba, ahol használom éppen.

De semmi akadálya nincsen annak, hogy ezek a CSS kódodba kerüljenek bele, főleg táblázat esetében, így az összes tábla úgy fog kinézni, és nem kell a kódot minden egyes modulban feltűntetni, ahol a táblázatot használni szeretnéd.

Ugyan ez vonatkozik több kisebb elemre is, melyekre majd kitérek még, ilyen az idézet, az elválasztóvonal, stb. Igazából aminek van HTML kódja, az mind átalakítható CSS-sel, vagy egyedi class kóddal (ami amúgy egy mini CSS lesz).

Bizony lehet külön stílust adni a félkövér, dőlt és az aláhúzott szavaknak is. Ezt persze megteheted a szövegszerkesztőben is, hogy másik betűtípust, esetleg másik színt adsz egy-egy szónak, szövegrésznek, de akkor azt egyenként kell véghez vinned. Erre van kitalálva ez a kódsorozat.

félkövér: STRONG

dőlt: EM

aláhúzott: U

áthúzott: STRIKE

Vagyis:

STRONG {

}

EM {

}

U {

}

STRIKE {

}

Ez a kód lesz használatban linkelt képek esetén:

Nálam is láthatjátok, hogy a babás képnek saját effektje van, vagyis ha ráviszed az egeret, akkor picit halványabb lesz a kép.

Ezt nem csak linkeffektként lehet egy képen megoldani, hanem saját kis class kóddal, amit a szöveg részen is alkalmaztunk már korábban. Igazából ezt több helyen is meg lehet tenni, linkeknél, táblázatoknál, idézetnél, stb.

Az alap kód ez lesz:

Ide azon "effektek" kerülnek, melyek igazából csak formázások, de jól mutatnak egy-egy képnél.

Ilyen ugye a lekerekített kép, keretes kép, összemegy vagy nagyobb lesz a kép, és az áttetsző kép is ilyen. Talán arról még nem írtam.

Az alap kép marad a baba megint.