A CSS egy lépcsőzetes stíluslap, amely a weboldalak megjelenésének leírására szolgál. A CSS egyik fő előnye, hogy a táblázat elrendezését blokk elrendezéssel helyettesítheti.
Szükséges
HTML kódszerkesztő
Utasítás
1. lépés
Hozza létre az első blokkot. HTML formában úgy fog kinézni, mint egy div tag, amelynek azonosítója: 'block01'. Itt a block01 azonosító azt jelzi, hogy a CSS leírásban ennek a blokknak az összes tulajdonságát megadják a # block01 választóra.
2. lépés
Írja le a blokkot a CSS-ben. A CSS stílusokban adja meg az azonosító nevét (# block01), göndör zárójelben írja le annak paramétereit - szélesség, pozícionálás, eltolás, háttérszín stb. Például így nézhet ki: # block01 {width: 150px; magasság: 150px; pozíció: abszolút; felső: 0px; bal: 0px; háttérszín: rózsaszín}. Ez a leírás feltételezi, hogy a doboz 150 pixel hosszú és 150 pixel széles lesz, mereven helyezkedik el a dokumentum bal felső sarkában, és a háttere rózsaszínű lesz.
3. lépés
Adja meg a blokk relatív helyzetét. Ha a CSS leírásban nem abszolút, hanem relatív pozícionálást használ, akkor a blokkokat nem merev, a koordináták rácsához történő bepattanással, hanem más, már létező blokkokhoz helyezheti el. Ehhez módosítsa a kód pozícióját: abszolút; felső: 0px; bal: 0px pozíció szerint: relatív; felső: 200 képpont; balra: 100 képpont.
4. lépés
Adja meg a blokk kerekítését. A CSS-ben a határ sugár kimutatása felelős ezért. Adja hozzá a következő kódot a stíluslapjához: border-radius: 8px. A blokknak most lekerekített sarkai lesznek. Ha csak néhány sarkot akar kerekíteni, írja le mindegyiknek külön a sugárát: border-radius: 8px 8px 0px 0px.
5. lépés
Adj egy ütést a blokknak. A blokk körvonalának vékony vonallal való kiemeléséhez adja hozzá a következő kódot a CSS leírásához: border-top: 1px szaggatott fekete. Ez az utasítás azt jelenti, hogy a blokk szegélye fekete lesz, és egy pixel vastagságú lesz. Ebben az esetben maga a kontúrvonal szaggatott vonalként jelenik meg (szaggatott - szaggatott vonal, szaggatott - pontok, folytonos - folytonos vonal).
6. lépés
Állítsa be a fennmaradó blokk tulajdonságokat. A CSS leírásban adja meg, hogy milyen betűtípust kell használni a blokk belsejében lévő szöveghez, milyen legyen a betűméret, az igazítás és a behúzás a blokk széleitől. Ezeket a tulajdonságokat a font-family, a font-size, a text-align és a padding definíciók ismertetik.
7. lépés
A lebegő tulajdonság segítségével testre szabhatja az egyik blokk folyamatát a másik felett. Ha „balra” állítja, akkor a többi elem a bal oldali blokk körül fog áramlani, a „jobb” pedig a jobb oldalon. Ha az úszó értékét „semmi” értékre állítja, akkor a blokk igazítása nem lesz beállítva. A CSS egyértelmű tulajdonsága megakadályozza, hogy a blokk jobbra, balra vagy mindkét oldalra áramoljon, és felülírja az úszó utasítást.
