Rasmlar yoki matnlar atrofida joylashgan ramkalar saytni bezatadi va uning dizayniga rang-baranglik qo'shadi. Agar siz chegaralarni yaratish uchun jadvallardan foydalansangiz, unda har bir chegara uchun kod juda ko'p joy egallaydi. Bundan tashqari, bu holda siz har bir ramka uchun HTML-kodni qayta yozishingiz kerak bo'ladi. CSS yordamida siz ushbu chegara bilan o'ralgan barcha elementlar uchun oddiy kodni bir marta yozib, xohlagan qalinlik va rangdagi chegarani osongina yaratishingiz mumkin. Ushbu texnologiya, agar kerak bo'lsa, saytdagi ramkalar turini bir necha daqiqada o'zgartirishga imkon beradi.
Bu zarur
- - o'z veb-saytingiz bo'lishi;
- - CSS nima ekanligini va ushbu uslublar saytda qaerda yozilganligini bilish.
Ko'rsatmalar
1-qadam
Chegarani yaratish uchun avval CSS-ga quyidagi kodni yozing:
ramka {}
2-qadam
Chegarani kerakli o'lchamga o'tkazish uchun chiziq kengligini piksel bilan belgilaydigan border-width parametridan foydalaning. Masalan, agar ramka chizig'i 3 piksel kenglikda bo'lishi kerak bo'lsa, unda yozuv quyidagicha bo'ladi:
ramka {border-width: 3px;}
3-qadam
Endi chegara uslubi parametri yordamida chegara uslubini aniqlang. Agar siz chegara hosil qilishni xohlasangiz, uning tomonlari muntazam ravishda bir tekis chiziqlar bo'lsa, unda quyidagi yozuvni jingalak qavslar qatoriga qo'ying - border-style: solid.
4-qadam
Nuqta chegarani quyidagicha yozish orqali olish mumkin: border-style: nuqta. Chegaraviy uslubni tekshirish: kesikli chiziq sizga chegaralangan chegarani beradi.
5-qadam
Chegarani quyidagi kabi ikkita qattiq chiziqqa aylantirishingiz mumkin: border-style: double. Chegaraviy uslubdan foydalaning: yiv yoki chegara uslubi: matnni yoki rasmlarni 3D yon ta'sirga ega ramkalarga ramkalash uchun tizma. Ushbu ikkita variantning farqi shundaki, birinchi holda ramka ichkariga kirgan chiziqlardan, ikkinchisida esa konveks chiziqlardan iborat.
6-qadam
Sayt elementi chegarasi bilan ichki qism effektini yaratish uchun ushbu koddan foydalaning: border-style: inset. Chegaraning mazmunini chegara bilan birga, aksincha, qavariq qilish uchun, border style: outset deb yozing.
7-qadam
Chegarali rang parametri yordamida freymga kerakli rangni qo'shishingiz mumkin, shuningdek, jingalak qavslar orasiga joylashtirilgan. Agar siz chegarani qizil rangga aylantirmoqchi bo'lsangiz, u holda chegara rangini yozing: qizil, ko'k - chegara-rang: ko'k, to'q sariq - chegara-rang: to'q sariq.
8-qadam
Barcha parametrlarni o'z ichiga olgan CSS chegara kodi quyidagicha:
ramka {chegara kengligi: 3px; chegara uslubi: qattiq; chegara rang: ko'k;}
9-qadam
Endi HTML-da quyidagilarni yozing:
Frame content "Frame content" iborasi o'rniga kerakli rasmning matnini yoki kodini kiriting.
10-qadam
Shunday qilib, siz saytdagi cheksiz ko'p elementlarni loyihalashingiz mumkin. Kadr ko'rinishini o'zgartirish uchun siz faqat CSS kodini o'zgartirishingiz kerak.
