Az alábbi cikk Bobbyka blogján jelent meg. Bobbyka 6-7 éve érdeklődik a web világa iránt, és saját elmondása szerint 3 éve jött rá, hogy létezik a css :). Közben rájött, hogy a lelkes amatőr lét nem elégíti ki és kikacsint a "profik" világába. Ezzel az írással mindenképp jó úton halad.

Nos, mi is ez a css iskola? Egy cikksorozatban megpróbálom közelebb hozni a css-t azokhoz akik csak felhasznalói szinten értenek a weboldalak/blogok-hoz. Tehát azoknak ajánlom akik, nem akarnak komolyabban foglalkozni a témával, viszont szeretnék mondjuk a blog-juk kinézetét megváltoztatni. Épp ezért közel sem lesz teljes, csak a legfontosabb elem tulajdonságokat írom le. Elsősorban a blog-sablonokban előforduló dolgokról fogok beszélni, megpróbálok abszolút konyha nyelven írni, hogy mindenki megértsen. Lássunk is neki!

Mi az a css?

Ha csúnyát akarnék mondani, azt mondanám a Cascaing Style Sheet angol szó rövidítése, ami magyarul annyit tesz "rangsorolt stíluslapok" de ettől még senki nem lenne okosabb, azt mondanám inkább a css a ruha amit magunkra veszünk. Ruha nélkül ugyebár csupaszok vagyunk ami nem feltétlen rossz :) de ha "díszíteni" akarjuk magunkat azt a ruhákkal könnyen megtehetjük.Valahogy így van ez a weblapoknál is, egy lap amin csak fekete szöveg és esetleg képek vannak az elég csupasz, de a css-el könnyen széppé és esztétikussá tehetjük. Ugyanarra a testre sokféle ruhát tudunk adni, a weblapoknál sincs másképp legjobb példa a zengarden ahol ugyanaz a html alap csak a css-t cserélgetik, megdöbbentő miket lehet kihozni!

Mi leszünk tehát az a szabók és megpróbáljuk a legszebb ruhát varrni.

Először is rá kell adni valahogy a ruhát a testre, erre több módszer is van:

1. a css egy .css kiterjesztésű fájlban van, amit a(z) (x)html head részen belül a következőképp lehet beilleszteni: <link rel="stylesheet" type="text/css" href="valami.css"> ami ebből lényeges az a href, ide kell írni az útvonalat ahol található css fájl ,ez a leggyakoribb a blogoknál is így szokott lenni,én is ezt ajánlom.
2. a head tagen belül csinálunk egy <style></style> közé írjuk a stíluslapot.
3. az egyes (x)html tageken belül pl. <p style=""></p>

És akkor nézzük a ruhát!

Az első amit megnézünk a body. A body-ban az oldal háttér és betű tulajdonságait szokás beállítani. a css nyelvtana a következőképpen néz ki

a body helyén természetesen más is állhat a lényeg az, hogy a tulajdoságokat kapcsos zárójel közé kell írni és az érték után mindig pontosvesszőt kell tenni.

példa1:

Ha a példát kipróbáljuk egy piros hátterű oldal kapunk amin kék színűek a betűk(feltéve ha van).

a leggyakoribb háttér tulajdonságok és a hozzátartozó értékek a következők:

background-color: Háttérszín,érték: kicsit lentebb

background-image: Háttérkép , pl. background-image:url('kep.jpg');

background-repeat: A háttérkép ismétlõdésének szabályozása. értékek:repeat(ismétel minden irányban), repeat-x(csak vízszintesen ismétel), repeat-y(függőlegesen ismétel),no-repeat(nincs ismétlés),akkor érdekes ha pl kicsi a háttérképp és nem szeretnéd hogy ismátlőjön, vagy csak nem minden irányba.

ezeken kívül több tulajdonság is tartozik a háttérhez, de elsőre ezek a legfontosabbak.

a leggyakoribb betű tulajdonságok és a hozzátartozó értékek a következők:

font-style: Betûtípus.

font-size: Betûméret, pixelben(px),xx-small , x-small , small , medium ,large , x-large , xx-large, százelékban, vagy a dokumentumoknál megszokott pt-vel pl. a 12pt általában a normál méret.[update]

font-weight: A szöveg vastagsága. értékek:normal, bold, bolder, lighter,100, 200, 300, 400, 500, 600, 700, 800, 900.

color: betűszín.

A színek megadására több mód van , vagy megadjuk a szín angol nevét(nem szerencsés mert a böngészők nem mindig ugyanúgy jelenítik meg ) vagy egy 6 számjegyű számkóddal-> nézd meg itt vagy így rgb(123,21,12) ahol a színek sorrendje piros,zöld,kék.

a vége egy példa, amiben az említettek szerepelnek,nézd meg mi az eredménye.

Remélem sikerült átadni, amit akartam.A következő részben a div-ek formázásáról lesz szó. Ha kérdésed van nyugodtan írj!

További érdekes témák, ötletek a Blogfórumon.