CSS - bu veb-sahifalarning ko'rinishini tavsiflash uchun til bo'lgan kaskadli uslublar jadvali. CSS-ning asosiy afzalliklaridan biri bu stol maketini blok maketiga almashtirish imkoniyatidir.
Bu zarur
HTML kod muharriri
Ko'rsatmalar
1-qadam
Birinchi blokni yarating. HTML shaklida u "block01" id bilan div yorlig'iga o'xshaydi. Bu erda blok01 identifikatori shuni ko'rsatadiki, CSS tavsifida ushbu blokning barcha xossalari # blok01 tanlagich uchun ko'rsatilgan.
2-qadam
CSS-dagi blokni tavsiflab bering. CSS uslublarida identifikator nomini ko'rsating (# block01) va jingalak qavslarda uning parametrlarini - kenglik, joylashishni aniqlash, ofset, fon rangi va boshqalarni tavsiflang. Masalan, shunday bo'lishi mumkin: # block01 {width: 150px; balandligi: 150 piksel; pozitsiya: mutlaq; yuqori: 0px; chap: 0px; fon-rang: pushti}. Ushbu tavsifda qutining uzunligi 150 piksel va kengligi 150 piksel bo'lishi kerak, u hujjatning yuqori chap burchagida qat'iy joylashtiriladi va uning fonida pushti rang bo'ladi.
3-qadam
Blokni nisbiy joylashishni bering. Agar siz CSS tavsifida mutlaq emas, balki nisbiy joylashishni ishlatsangiz, unda bloklarni koordinatalar panjarasiga qattiq tushirish bilan emas, balki mavjud bo'lgan boshqa bloklarga nisbatan joylashtirishingiz mumkin. Buning uchun kod o'rnini o'zgartiring: mutlaq; yuqori: 0px; chap: 0px pozitsiyasi bo'yicha: nisbiy; yuqori: 200 piksel; chap: 100 piksel.
4-qadam
Blokka yaxlitlash bering. CSS-da chegara radiusi bayonoti buning uchun javobgardir. O'zingizning jadvalingizga quyidagi kodni qo'shing: border-radius: 8px. Endi blokning yumaloq burchaklari bo'ladi. Agar siz faqat ba'zi burchaklarni aylantirmoqchi bo'lsangiz, ularning har biri uchun radiusni alohida tavsiflang: border-radius: 8px 8px 0px 0px.
5-qadam
Blokka zarba bering. Blokning konturini ingichka chiziq bilan ajratib ko'rsatish uchun uning CSS tavsifiga quyidagi kodni qo'shing: border-top: 1px chiziqli qora. Ushbu ko'rsatma blokning chegarasi qora rangga ega bo'lishini va qalinligi bir piksel bo'lishini anglatadi. Bunday holda, kontur chizig'ining o'zi kesilgan chiziq sifatida ko'rsatiladi (kesilgan - nuqta chiziq, nuqta - nuqta, qattiq - qattiq chiziq).
6-qadam
Qolgan blok xususiyatlarini o'rnating. CSS tavsifida blok ichidagi matn uchun qanday shrift ishlatilishini, shrift hajmi, hizalanishi va blok qirralaridan qanday chiziq bo'lishi kerakligini ko'rsating. Ushbu xususiyatlar font-family, font-size, text-align va padding ta'riflarida tasvirlangan.
7-qadam
Float xususiyatidan bir blokning boshqasiga o'tishini sozlash uchun foydalanishingiz mumkin. Agar siz uni "chapga" o'rnatgan bo'lsangiz, unda qolgan elementlar chap tomonda, "o'ng" - o'ng tomonda blok atrofida oqadi. Agar siz suzuvchi qiymatni "yo'q" deb belgilasangiz, blok hizalamasi o'rnatilmaydi. CSS-dagi aniq xususiyat blokning o'ngga, chapga yoki ikkala tomonga oqishini oldini oladi va float operatorini bekor qiladi.
