Html css-dagi ko'rsatkichlar. CSS yozuvi: tarkibni aniqlash

Bu narsa yoki tartibni yaratish paytida biz bir-birimizga nisbatan gorizontal yaratishimiz kerak. Bu bloklar yoki turli xil elementlar kabi bo'lishi mumkin, aksincha, u gorizontal ravishda joylashgan bloklar orasida belgilangan masofani bosib o'tishdir. Dizayn elementlariga kiritishning turli xil usullari mavjud. Biroq, bu erda bir nechta zamonaviy brauzerlar bilan moslik uchun biz sahifada matn yoki blok sifatida tezkor mavzuga murojaat qilamiz.

Mulk matn elementining birinchi qatoridan oldin gorizontal matn maydonini qancha vaqt o'tkazish kerakligini aniqlaydi. Interval chekka va blok darajasidan boshlab yoki blok darajasidan boshlab hisoblanadi.

Veb-sahifa tarkibining aksariyati matn sifatida taqdim etilganligi sababli, ushbu matnni qidirish jozibasi, ham jozibali va samarali hisoblanadi, bu veb-dizaynerga aylanishi mumkin bo'lgan muhim mahoratdir. Ichki tavsif va paragrafni yaratish uchun eng ko'p ishlatiladigan va tavsiya etilgan usul CSS-dan foydalanadi. Bu erda sizga CSS qanday matnda matn va yozuv elementlari uchun ishlatilishi mumkin bo'lgan turli xil misollar mavjud bo'ladi.

Tashqi qismdan CSS-da tashqi qismni o'rnating

Yuqori ko'rsatkichlarni yaratish uchun, bu CSS xususiyatlarisiz, chunki bizda pikselda,% va boshqa narsalar kerak, bu hamma narsa CSS stilistikasida bo'lishi mumkin birlik o'lchash.

Foydalanish namunasi:

Marja-blok (
Margin-Yuqori: 50px;
}

Rasmga nima qaray olaman:

Siz uni bloklarni ko'tarish uchun ishlatishingiz mumkin, bu erda siz nomlangan mulkdan foydalanishingiz mumkin chapdan chapga. shuningdek to'g'ri va chekka. U erda biz faqat 4 parametrni o'rnatganimiz mumkin, bu erda biz har ikki tomonning davomi bilan bosh tomondan boshlanadigan tushunchaga qarab turamiz.

marj: 20px 50px 30px 50px;

Bu qanday ishlaydi marja.: yuqoridan yuqoridan chapdan chapgacha:

Bundan tashqari, yuqoridan CSS-da ichki ma'lumot mavjud

Bu vertikal tarkib tarkibini tekislash kerak, chunki bu ota-onalar blokiga nisbatan boshqa xususiyatlardan foydalanish imkoniyati mavjud bo'lib, ular sukut bo'yicha ichki ma'lumotni to'ldiradi . Agar biz analogni buyurish va analogni belgilash, shuningdek, px, em,% va boshqa birliklarga kirib boradigan shunga o'xshash xususiyatlar haqida gapiradigan bo'lsak.

Misol:

Pikting-blok (
Pladding-tegi: 47px;
}

Biz misolni ko'rib chiqamiz:

Endi siz analog mulkni ko'rib chiqishingiz mumkin marja. va plombablok elementining boshqa tomonlaridan insententlarning vazifalari bilan shug'ullanadi, ammo allaqachon alohida keladi: piktingling chap., pikting-to'g'ri, to'ldirish-tub. Siz darhol siz kerakli masofani faqat barcha tomonlar uchun so'rashingiz mumkin va hamma narsa bir vaqtning o'zida bo'ladi.

plashding: 10px 20px 40px 50px;

Dastlab siz qiymatni belgilashingiz mumkin marja. Yuqoridagi narsadan tushunganingizdan keyin hamma narsa soat miliga o'tadi, u o'ng tomonda, chap tomondan chap tomonda va boshqalar.

Endi har xil vaziyatga qarab, yuqorida joylashgan CSS uslublariga kiritish imkoniyatiga egasiz, bu erda biz xususiyatlardan foydalanamiz marja. va plombaO'zingiz o'ylaganingizdek, Internet resursingiz sahifasida kerakli narsalarni o'rnatish mumkin.

Tavsif

Chekinish kattaligini elementning o'ng chetidan o'rnatadi. Ushbu elementning asosiy qismning o'ng chegarasining tashqi chetidan, ota-ona elementining ichki chegarasigacha bo'lgan masofa (1-rasm).

Sintaksis

marja-to'g'ri: Qiymat | Avtomatik | meros qilib oling.

Qiymatlar

O'ng nafaqaning qiymati piksel (PX), foiz (%) yoki CSS uchun boshqa ruxsat etilgan bo'linmalarda ko'rsatiladi. Qiymat ijobiy va salbiy bo'lishi mumkin.

Avtomatik ko'rsatilgan shuni ko'rsatadiki, indents miqdori avtomatik ravishda brauzer tomonidan hisoblangan. Meros meros Ota-ona qiymati.

Html5 css2.1 i s cra OP SA FX

Ushbu misol natijasi rasmda keltirilgan. 2.

Anjir. 2. Darhol to'g'ri mulkni qo'llash

Ob'ekt modeli

hujjatlar.gettelementbyid ("Elementme") .Style.margint

Brauzerlar

Internet Explorer 6 brauzer, ota-ona elementlariga sarmoya kiritgan suzuvchi elementlar uchun chap yoki o'ngdagi elementlarning qiymatini ikki baravar oshiradi. Ota-onaning yon tomoniga ulashgan egri. Muammo odatda displeyni qo'shish orqali hal qilinadi: suzuvchi element uchun kirish.

7.0 versiyadan oldin Internet Explorer meros qiymatini qo'llab-quvvatlamaydi.

Mening blogimga salomlar. CSS (Cascade StylePle jadvallari) veb-sahifalar ko'rinishini sozlash uchun ko'plab imkoniyatlarni taqdim etadi. Bugun men CSS-da har qanday element uchun yoki boshqa tomondan boshqa tomondan ajratishni qanday aniqlashni istayman.

Tashqi burma

Tashqi qismlar marja buyumidan foydalangan holda o'rnatiladi. U bilan siz har to'rt tomondan indentratsiyani darhol o'rnatishingiz yoki boshqa xususiyatlardan foydalanishingiz mumkin: marjali-yuqori, marja-pastki, marja-pastki, uni faqat bir tomondan qilishingizga imkon beradi.

Tashqi qismlar elementning tanlangan chetidagi masofani sahifadagi boshqa elementlardan uzoqlashtirishini aniqlaydi. Masalan, yozing:

P, Div (
Margin-Yuqori: 20px;
}

Bu shuni anglatadiki, barcha bloklar va paragraflar 20 pikselning yuqori qismiga, ya'ni ularning yuqori chetiga mos keladigan elementlardan uzoqlashishi kerakligini anglatadi.

Indents har ikki tomondan faqat bir xil marj mulki bilan yozilishi mumkin, bu ketma-ket 4 qiymatni qayd etadi:

Div (
Marj: 20px 10px 20px 10px;
}

Indekslar mos ravishda yuqori, o'ng, pastki va chap qirralardan beriladi. Bu holatda ular qarama-qarshi tomondan tengdirlar, shunda shunga o'xshash yozish mumkin:

Div (
Marj: 20px 10px;
}

Birinchi qiymat yuqoridagi va pastdan, ikkinchisining yon tomonlarida.

Ichki chiziq

Ichki ajratma boshqacha ishlaydi - bu blokni boshqa elementlardan ko'chirmaydi va element ichidagi masofani chet elning ichiga qirralaridan ko'chiradi. Bu qulay. Matn derazaning o'ng yuqori qismida joylashgan saytni qaerdan ko'rdingiz?

Men buni ko'rmadim, chunki veb-dasturchilar har doim tashqi va ichki ko'rsatkichlarni qo'llashlari uchun, matnni iloji boricha qulay deb bilishadi. Ichki indekslar to'ldirilgan mol-mulk yordamida yozilgan, bunda 4 ta qiymat mos ravishda barcha chetga o'tkazilishi mumkin.

Shuningdek, margin unvonni qo'shishi va masofani faqat unga moslashi mumkin. Masalan, yuqoridan kiritilgan joyni to'ldirish yordamida to'ldirilishi mumkin. Umuman olganda, plomba moddasi marjali mulkka juda ham xuddi shunday ishlaydi.

Masalan, siz bunday kodni keltirib chiqara olasiz:

Blok (
Kengligi: 200px;
Padding: 20px;
}

Sizningcha, bizning elementimizning haqiqiy kengligi nima bo'ladi? Bu shuni ko'rsatadiki, bu 200 ta piksel, har ikki tomonning yonida yana 20, umumiy 240 piksel qo'shiladi. Buni tartibda ko'rib chiqing.

Shuningdek, plakding odatda blokirovka elementlari bilan belgilangan, uni bermaslik yaxshiroqdir. Odatda har qanday element bilan ishlaydi.

Bugun biz siz bilan tartib tamoyillari, ya'ni ma'lum elementlarda saytingizda ajratish usullari haqida ozgina gapirib beramiz.

Ko'rib chiqilayotgan element sifatida, bu belgi qo'yish kerak, matn, rasm, stol yoki boshqa har qanday HTML elementi bo'lishi mumkin. Asosiysi, men hozir aytadigan ba'zi muhim qoidalarga rioya qilishdir.

Agar siz saytingizni yaratayotgan bo'lsangiz, men sizga asosiy uslubingizdagi faylning yuqori qismida sizga quyidagi xususiyatlarni kiritishingizni maslahat beraman:

* (-Webkit-Bakcing-ni o'lchash: chegara qutisini o'lchash: chegara qutisi; chegara qutisi;), *dan keyin (-Webkent-Box) Quti; -Moz-baksni o'lchash: chegara qutisi; Boksni o'lchash: chegara qutisi;)

Nega bunga muhtojsiz, so'rayapsiz? Men sizning savolingizga vizual misol bilan javob beraman.

Aytaylik, sizda bunday reja elementi bor:

Bu yuqorida tavsiflangan xususiyatlardan (yuqori element) va ulardan foydalanishlari bilan (pastki element) foydalanmasdan turib, tanlovga o'xshaydi:

Bu erda nimani ko'rgan? Birinchi versiyadagi elementning kengligi (xususiyatlardan foydalanishisiz) tartibda to'liq qulay va tuzilmagan qo'shma indentatsiya tomonidan ko'rsatiladi.

Xususiyatlar bilan bog'liq varianti ko'proq estetik jihatdan, lekin undan foydalanish ongli ravishda, chunki siz ularni tayyor veb-saytga qo'shganda, siz hamma narsani o'z vaqtida olib kelish shaklida. Men noldan chiqqan barcha loyihalar bu xususiyatlarsiz xarajat qilmadi.

Va endi, aslida, keling, saytingizdagi insentratsiyalarni vizual misollar bilan tashkil etish variantlari haqida gapiraylik.

CSS xususiyatlari bilan ichki chiziq "plakding"

Shunday qilib, siz hamma narsaning butun mantiqoni tushunasiz, masalan, sxeutning quyidagi parchalarini misolga olib boring:

sizning uslublaringiz bilan:

Sinov_diiv (kengligi: 250px; chegara: 1px qattiq;)

Vizual versiya olinadi:

Mulk nima " plomba"? Bu belgilangan elementlarda ichki qismni tartibga solishga yordam beradi. Bizning maketimizga ichki ma'lumotni 10px ga teng qo'shing:

Sinov_diiv (kengligi: 250px; chegara: 1px qattiq; to'ldirish: 10px; // ichki indentx 10px)

Vizual ravishda shunday bo'ladi:

Mulkdagi 10 raqami belgilangan elementlarning har birining har birining har birining har biri bilan 10px ni qo'shish kerakligini anglatadi. Piksel (PX) CSS-da qo'llab-quvvatlanadigan qiziqish yoki boshqa qiymat bilan almashtirilishi mumkin.

Ikkita variant mavjud. Taraflarni insentratsiya qilish kerak bo'lgan ko'rsatkichlarning ko'rsatkichi.

Avval - Bu tomonlarni aniq ko'rsatadi:

Pladding-tepa: 10px; // Yuqoridan yuqoridan pastga tushirish uchun INTROD INTERN 10PX: 10px; // ichki indentning 10px o'ng pastki qismi: 10px; // ichki indentning pastki qismidan 10px pastki to'ldirish-chap: 10px; // ichki ma'lumot 10px chap

Bunday holda, har bir qism o'z mulkidan foydalanadi. Va ikkinchi:

Padding: 10px 0 0 0; // Yuqoridan INTROD 10PX, hamma narsa - 0px plashicding: 10px 0; // ustki va pastki qismida va yon tomonlarida ichki indcent 10px - 0px plakding: 0 10px; // Yuqoridan va pastga va yon tomondan ichki indentning 0pxi - 10px

Har birining har biri o'z tomoniga mos keladigan qiymatlarni oddiy ro'yxat mavjud. Tomonlar belgilangan: Birinchi qiymat - bu eng yuqori, ikkinchi - uchinchisi, pastki va to'rtinchisi - chapda, ya'ni hamma narsa soat yo'nalishi bo'yicha.

Agar qadriyatlar ikkita (yuqori va o'ngda) bo'lsa, demak, bir xil qiymatlarning ko'zgusi pastga tushib, qolganini va faqat shu qadar. Hammasi aniq ko'rinadi. Agar ba'zi tomonlar uchun sizdan so'ramaslik kerak bo'lsa - bu tomoni "0" o'rnatilgan. Menga bu variantni ko'proq yoqadi, chunki u ko'proq ixcham, lekin men birinchi variantni ishlatganman.

Ushbu turdagi indentatsiya matnni ajratish uchun yaxshi mos keladi, stol va boshqa matnli ma'lumotlar uchun juda mos keladi. Elementlarni yuqorida ko'rsatilgan misolga o'xshash bo'lgan holda ajratish uchun boshqa mulk mavjud.

CSS xususiyatlari "marjasi" yordami bilan tashqi qism

Mulkning o'ziga xos xususiyati " marja."- bu elementdan tashqarida, ya'ni tashqi tomondan qo'shilgan narsa qo'shiladi.

Bu erda variantlar ham ikkita.

Avval - Tomonlarning aniq ko'rsatmasi bilan:

Margin-Yuqori: 10px; // Yuqoridan yuqori marjdan 10px tashqi indentni 10px 10px; // WARGRIN-pastki o'ng tomonida tashqi indentning 10pxi: 10px; // past darajadan pastda tashqi chiziqdan 10px \u003d 10px; // Tashqi indentning 10px chap

Ikkinchi - qiymatlar ro'yxati bilan, ularning har biri o'z tomoniga mos keladi:

Marj: 10px 0 0 0; // Yuqoridan tashqi indentning 10pxi, qolgan hamma narsa - 0px marjasi: 10px 0; // ustki va pastki qismida tashqi va pastki qismida tashqi va pastki qismida - 0px marjasi: 0 10px; // Yuqoridan va pastga va yon tomondan tashqi iNavrate 0px - 10px

Bu erda men qoidalar bilan ishlashning barcha nuanslarini tasvirlamayman, hamma narsa mulk haqida bir xil plomba"Yuqorida yozilgan.

Quyidagi qiymat bilan marjdan foydalaning:

Sinov_diiv (kengligi: 250px; chegara: 1px qattiq; 10px; // Tashqi indentcx 10px)

Vizual ko'rinadi:

Masalan, misoldan ko'rinib turibdiki, bu holda belgilangan elementlarni o'z-o'zidan ajratib turadi.

Muhim xususiyat: Agar natijaga diqqat bilan qarasangiz, elementlarning qo'shni yozuvlari unchalik katta emasligini ta'kidlashi mumkin. Ya'ni, agar birinchi element tashqi pastki qismiga ega bo'lsa, ikkinchisi esa bir xil qiymatga ega tashqi yuqori qismiga teng, keyin ular orasidagi umumiy masofa 10px bo'ladi. Agar mos ravishda 10 va 15 bo'lsa, unda jami 15 va hokazo.

Indentning ushbu varianti ko'pincha matnda, ya'ni paragraflar dizayni, shuningdek, ko'rinadigan chegaralardagi elementlarda ishlatiladi.

Ammo ikkala xususiyat ham ushbu elementlar bilan cheklanmaydi. Siz o'zingizdan foydalanish variantlarini tanlaysiz, men faqat sizga poydevorni taqdim etishga harakat qildim.

Salom! Dastlab, men ushbu maqolani 4 tadan ajratishni xohlaganman, lekin keyin o'yladim. Nima uchun? Axir bunday ma'lumotlar bitta material ichida to'planganda qulayroqdir.

Shuning uchun, bugungi kunda biz CSS-ni chapga va boshqa barcha partiyalarga nima qilishni - o'ng tomonda, yuqori va pastki qismida qanday qilishni o'rganamiz. Ular rasmlar va matnlar uchun amalga oshirilishi mumkin. Ular ikki turdir:

• Tashqi;
• Ichki.

Birinchisi, marjaning asosiy xususiyati, ikkinchisidagi plakding uchun ishlatiladi. Aniqlik uchun men sizga kichik bir misol keltirdim. Vizual ravishda ko'rinadigan jadval qo'shilgan ichki va tashqi makonni ajratish qulay edi. Nima bo'lganiga nazar tashlaysizmi?

Tashqi yozuvlar

CSS uslubidagi fayllar faylida aytganda, sahifada Axborot blokining yo'nalishini belgilash mumkin. Masalan, chap va pastga siljiydi. Darhol uning qanday ko'rinishini namoyish qilaylik.

Umuman olganda, insenttrlarni belgilash uchun quyidagi variantlarni qo'llash mumkin.

Chap (marjali chapda).

O'ng (marjda).

Yuqoridan (marjali yuqoridan).

Pastdan (marjali past).

Endi men yana bir ajoyib nuansni ko'rsataman.

Ko'rinib turibdiki, siz variantlardan birini ishlatishingiz mumkin - ta'sir bir xil. Faqat ikkinchi holatda, kod ko'proq ixcham. Shuni ham ta'kidlashicha, insentratlar soat yo'nalishi bo'yicha belgilanadi. Hammasi tepada boshlanadi va chap tomonda tugaydi.

Ichki yozuvlar

Bu erda harakat qilish tartibi o'xshash. Endi endi butun stol uchun yangi xususiyatlarni qo'shmang, balki ustunlar tarkibiga kiradi.

Nima bo'lganiga nazar tashlaymiz.

Ichki CSS-ga ichki daromadlar bilan taqqoslash, tashqi ko'rinishi qisqartirilgan kod yoki partiyalar uchun alohida belgilanishi mumkin.

Bular diqqatga sazovor joylar edi. Va nihoyat, qanday qilib ba'zi ishlarni engillashtirishingiz mumkinligini ko'rsataman.

Tanlangan teglar darajasida indekslar

Yuqorida tikilgan holatlarda ular bir vaqtning o'zida matn va rasmlarga o'rnatiladi. Aslida, siz ma'lum bir yorliq darajasida elementlarga masofani belgilashingiz mumkin. Bu qanday ishlashini ko'rsataman. Men so'nggi o'zgarishlarni bekor qilaman va uslub faylida maxsus kodni ko'rsataman.

O'zgarishlarni saqlashdan keyin nima bo'lganiga qarab.

Rasm joyida qoldi, faqat chap tomonda tuzilgan matn izchildi. Shunga o'xshash manipulyatsiyalar boshqa bloklarga, masalan, trda, Spanga nisbatan qo'llanilishi mumkin.

Qo'shimcha ma'lumot sifatida men topshiriqni topshiriq haqida tanishtirishni taklif qilaman. Shuningdek, juda qiziqarli usullar tasvirlangan. Matn yoki boshqa harakatlardagi qizil satrni shakllantirish uchun foydali bo'lishi mumkin.

Bundan tashqari, elektron pochta manzillarida bepul axborot byulleteniga obuna mavjud. Blog uchun obuna uchun maxsus shakl mavjud. Gaplashamiz.