CSS bilan paragraflarni qanday chizish mumkin

Matn-jildi xususiyati va qo'shni qardosh sintelatorlardan foydalanish

Yaxshi veb-dizayn odatda yaxshi tipografiya haqida. Veb-sahifa mazmunining katta qismi matn sifatida taqdim etilganligi sababli, ushbu matnni o'ziga jalb etuvchi va ta'sirchan deb tarjima qila oladigan veb-uslubchisi sifatida muhim mahoratga egadir. Afsuski, biz bosib chiqarishda foydalanadigan Internet-tipografiya nazoratining bir xil darajasiga ega emasmiz. Bu shuni anglatadiki, matnni veb-saytda har doim ishonchli tarzda tarjima qila olmaymiz.

Ko'pincha chop etishda (va biz onlayn tarzda qayta tiklashimiz mumkin bo'lgan) tez-tez ko'rib turadigan umumiy xatboshi uslubi - bu paragrafning birinchi qatori bir bo'sh joyni bo'sh joydan iborat . Bu kitobxonlarning bir paragrafning qaerdan boshlanganini va yana birining tugashini ko'rishga imkon beradi.

Veb-sahifalarda bu ingl. Uslubni juda ko'p ko'rmaysiz, chunki brauzerlar sukut bo'yicha, ularning ostidagi bo'sh joyni paragraflarni bittadan bittasini va boshqasi bilan boshlashni ko'rsatish uchun ko'rsatishadi, paragraflarga ilhomlantiruvchi chiziq uslubini kiritishingiz mumkin, siz matnni indent uslubi xususiyati bilan qilishingiz mumkin.

Ushbu xususiyat uchun sintaksisi oddiy. Hujjatdagi barcha paragraflarga qanday qilib matn kiritishingiz mumkin.

p {text-indent: 2em; }

Indentslarni xususiylashtirish

Paragraflarni chertish uchun aniq qilib ko'rsatishingiz mumkin bo'lgan usullardan biri siz kiritmoqchi bo'lgan paragraflarga sinf qo'shishingiz mumkin, ammo bu siz uchun sinfni qo'shish uchun har bir xatboshni tahrir qilishingizni talab qiladi. Bu samarasiz va HTML kodlashning eng yaxshi amaliyotlariga amal qilmaydi.

Buning o'rniga, paragraflarni chertganingizda ko'rib chiqing. Siz boshqa paragrafni bevosita kuzatib boradigan paragraflarni kiritasiz. Buning uchun siz qo'shni qarindoshlik tanlash vositasidan foydalanishingiz mumkin. Ushbu tanlov orqali siz darhol boshqa xatboshilardagi har bir xatboshini tanlaysiz.

p + p {matn-indent: 2em; }

Agar siz birinchi satrni yozmoqchi bo'lsangiz, paragraflar orasida ular o'rtasida qo'shimcha joy yo'qligiga ishonch hosil qilishingiz kerak (bu brauzer default). Stylistically, paragraflar orasidagi bo'sh joy yoki birinchi qatorni chizishingiz kerak, lekin ikkalasini ham emas.

p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-to'p: 0; padding-to'p: 0; }

Salbiy indentlar

Bundan tashqari, matnning chiziqli xususiyatini salbiy qiymat bilan birga foydalaning, chunki chiziqning boshlanishi chap tomonga o'ngga qaraganda oddiy o'ngga o'xshab ketishi mumkin. Agar chiziq tirnoq belgisi bilan boshlangan bo'lsa, buni amalga oshirishingiz mumkin, shunda taklif belgisi xatning chap tomoniga eng kichik chetida ko'rinadi va harflar hamon chapga o'xshash chiziq hosil qiladi.

Misol uchun, sizning blok-so'zingizning avlodi bo'lgan paragrafingiz borligini va siz uning salbiy tomoni bo'lishini xohlayotganingizni ayting. Siz ushbu CSS-ni yozishingiz mumkin:

blockquote p {matn-indent: -5em; }

Bu, paragrafning boshlanishiga imkon beradi, bu taxminan ochilish belgisi belgisini o'z ichiga oladi, bu ohangli tinish belgisi yaratish uchun chap tomonga bir oz tebranadi.

Margins va to'ldirishlar haqida

Ko'pincha veb-dizaynda siz elementlarni ko'chirish va oq bo'shliq yaratish uchun chekka yoki padding qiymatlarini ishlatasiz . Biroq, bu xususiyatlar indentli xat effektiga erishish uchun ishlamaydi. Agar siz ushbu qiymatlardan birini xatboshiga qo'llasangiz, ushbu xatning barcha matni, jumladan, har bir satr faqat birinchi satr o'rniga joylashtiriladi.