CSS je kaskádová šablóna štýlov, ktorá je jazykom na popis vzhľadu webových stránok. Jednou z hlavných výhod CSS je schopnosť nahradiť rozloženie tabuľky blokovým rozložením.
Je to nevyhnutné
Editor HTML kódu
Inštrukcie
Krok 1
Vytvorte prvý blok. Vo forme HTML bude vyzerať ako značka div s identifikáciou 'block01'. Identifikátor block01 tu naznačuje, že v popise CSS sú všetky vlastnosti tohto bloku špecifikované pre selektor # block01.
Krok 2
Popíšte blok v CSS. V štýloch CSS uveďte názov identifikátora (# block01) a v zložených zátvorkách popíšte jeho parametre - šírku, umiestnenie, ofset, farbu pozadia atď. Môže to napríklad vyzerať takto: # block01 {width: 150px; výška: 150px; pozícia: absolútna; hore: 0px; vľavo: 0px; farba pozadia: ružová}. Tento popis predpokladá, že box bude 150 pixelov dlhý a 150 pixelov široký, bude pevne umiestnený v ľavom hornom rohu dokumentu a jeho pozadie bude sfarbené do ružova.
Krok 3
Dajte bloku relatívne umiestnenie. Ak v popise CSS nepoužívate absolútne, ale relatívne umiestnenie, potom môžete umiestniť bloky nie tuhým prichytením k mriežke súradníc, ale relatívne k iným už existujúcim blokom. Za týmto účelom zmeňte pozíciu kódu: absolute; hore: 0px; dolava: 0px podľa polohy: relatívne; hore: 200px; vľavo: 100 pixelov.
Krok 4
Dajte bloku zaokrúhlenie. V CSS je za to zodpovedný príkaz border-radius. Pridajte do svojej šablóny štýlov nasledujúci kód: border-radius: 8px. Blok bude mať teraz zaoblené rohy. Ak chcete zaobliť iba niektoré rohy, opíšte polomer zvlášť pre každý z nich: border-radius: 8px 8px 0px 0px.
Krok 5
Dajte bloku mŕtvicu. Ak chcete zvýrazniť obrys bloku tenkou čiarou, pridajte do jeho popisu CSS nasledujúci kód: border-top: 1px dashed black. Táto inštrukcia znamená, že okraj bloku bude čierny a bude mať hrúbku jeden pixel. V takom prípade sa samotná vrstevnica zobrazí ako prerušovaná čiara (prerušovaná - bodkovaná čiara, bodkovaná - bodky, plná - plná čiara).
Krok 6
Nastavte zvyšné vlastnosti bloku. V popise CSS uveďte, aké písmo by sa malo použiť pre text vo vnútri bloku, aká by mala byť veľkosť písma, zarovnanie a odsadenie od okrajov bloku. Tieto vlastnosti sú popísané v definíciách font-family, font-size, text-align a padding.
Krok 7
Vlastnosť float môžete použiť na prispôsobenie toku jedného bloku cez druhý. Ak nastavíte možnosť „doľava“, potom ostatné prvky budú prúdiť okolo bloku vľavo a „vpravo“- vpravo. Ak nastavíte pohyblivú hodnotu na „žiadna“, zarovnanie bloku sa nenastaví. Vlastnosť clear v CSS zabráni toku bloku v smere doprava, doľava alebo na obe strany a prepíše príkaz float.
