Sizga salom. Albatta, html tilida bir qator tanaffus ikki shaklda amalga oshirilishi mumkin. Agar siz WordPress ingl. Muharriridan foydalansangiz, Microsoft Word yoki boshqa matn muharririda bo'lgani kabi, avtomatik ravishda satr sonlarini qo'shadi. Lekin ba'zan kodda matn bilan ishlash kerak. HTML-kodda qanday qilib satr sonini olish kerak?
Jo'natishni o'tkazish
Buning uchun html-da qisqa bir yorliq mavjud -
(qisqartirilgan tanaffus). U nima qiladi? Ushbu tegdan keyin yozilgan barcha matnlar yangi satrda ko'rsatiladi. Chiqish uchun joriy liniyada xona mavjud bo'lsa ham, u hali ham harakatga keltiriladi.
Br'dan foydalaning
Agar siz yangi paragrafni ishga tushirishingizga hojat qolmasa, faqat matnni yangi satrga chiqarsangiz kerak. Masalan, siz she'r yozishingiz kerak. Paragraf tagidagi har bir satrni qo'shmaslik uchun har bir satr oxirida yorliq yozishingiz mumkin
va keyingi liniya pastga tushadi. Hamma narsa oddiy.
Taglar paragraflarga muqobil sifatida foydalanilmasligi kerak. E'tibor bersangiz, paragraflar uzunligi bilan teng bo'lgan bo'sh satrga chiziq bo'lishi kerak. Br bilan almashtirganda, indent kamroq.
Ko'p pul o'tkazish qanday amalga oshiriladi?
Agar siz matndan keyin qo'shimcha kontentdan katta chastotalar qilish uchun kerak bo'lsa. Buni amalga oshirish uchun ikkita variant mavjud. Siz juda ko'p teglar yozishingiz mumkin br. Shunday qilib, cheksiz sonli tirnoqlarni amalga oshirishingiz mumkin.
Lekin to'g'riroq qilish yaxshiroqdir. Istalgan paragraf uslubi klassini, keyin esa pastki qismdan katta chastotani o'rnatish uchun CSS orqali sozlashingiz mumkin.
Paragraf
Abzak (
Margin-taglik: 100px;
}
Bu holatda 100 piksellik chastota belgilanadi. Shunga ko'ra, indent har qanday kishi tomonidan tayinlanishi mumkin.
Ko'pincha yangi xat qo'shish kerak, lekin paragraf yorlig'i qo'shilgan bo'sh satr holda
Ba'zi matn qismlari uchun paragraflar uchun standart masofa oddiy emas. Ular rasmlar, jadvallar, she'rlar, tirnoqlar, izohlar va qaydlar ostida yozuvlar bo'lishi mumkin.
Lentalarning majburiy o'tkazilishi uchun maxsus funktsiyani taqdim etamiz, uning funktsiyasi uning nomi bilan belgilanadi ("Qisqa sindirish, chiziq"). Yorliq
Gipermatn belgilash tili html, keyingi barcha kontent yangi satrda boshlanishi kerakligini anglatadi. Agar kerak bo'lsa, kerakli oraliqqa erishish uchun ketma-ket bir qancha teglarni qo'yishingiz mumkin.
Yorliq
bu katta / kichik harflar sezgir emas va yopish yorlig'i talab qilmaydi, chunki u bo'sh element hisoblanadi, lekin hamma teglarni yopish uchun ishlatish yaxshiroqdir. XHTMLda tanaffus yorlig'i "yopiq" bo'lishi kerak.
Break yorlig'ini ishlatishning misoli
<р> Xizmatda yurishр>
Hech bir joyda va hech qachon
Men juda ham yomon emas edim
Bosses ochko'z qirol
Nibbles me tirikр>
Xizmatda yurish
Hech bir joyda va hech qachon
Men juda ham yomon emas edim.
Bosses ochko'z qirol
Meni tiriklayapti.
Yorliq xususiyati
HTML yorlig'i bo'lgan yagona xususiyat
aniq deb nomlangan. Brauzer portativ chiziq bilan nima qilish kerakligini tushuntiradi, agar matnda suzuvchi elementni o'rab olsa, masalan, hizalanma xususiyati bilan tasvirni o'ng / chap qiymatlardan foydalangan holda yoki float xususiyatiga ega bo'lgan CSS-da blok bo'lishi mumkin.
XHTML 1.0 / HTML 4.01 spetsifikatsiyalarida aniq xususiyat faqat Transitional, Frameset vaaks holda kod o'chiriladi.
Yorliq xususiyati xususiyatlari
Aniq xususiyatdan foydalanish ta'siri uning qiymatiga va matn bilan tartibga soladigan suzuvchi elementning holatiga bog'liq. Xususiyat 4ta qiymatga ega bo'lishi mumkin:
Chapdagi qiymat chapga mos keladigan elementni o'rashni taqiqlaydi, shuning uchun matn matnga "qoqilib" tushdi
, rasm yoki boshqa suzuvchi elementning pastki qismida joylashgan bo'ladi.
Aynan mana shu natija, o'ng yoki chapga ruxsat bermaydigan barcha argumentlardan foydalanadi.
Qiymat huquqi matni to'g'rilangan elementni o'rashga ruxsat bermaydi, shuning uchun tegdan keyin
matnning atrofida o'ng tomonga oqib turgan tasvirni chetlab o'tishdan boshqa tanlov yo'q.
Hech kim yo'q ("sizning ham, bizniki ham") odatda aniq atributdan va yorliqdan barcha imtiyozlarni yo'q qiladi
tovushni pastga siljitadi.
Asl qiymati, xuddi shunday, ochiq-oydin yorliq xususiyati yo'q.
Yorliq
- bu yumshoq ko'chirish
Chiziq uzatish yorlig'i paragraflar orasida kerakli oraliqni yaratish uchun juda foydalidir, uning ichida yumshoq chiziq sifatida ishlatiladi, lekin matnni paragraflarga ajratish vositasi sifatida emas.
Matnni formatlash uchun yo'nalish yorlig'i bilan birga olib ketilmaslik kerak, chunki uni ishlatish natijalari har doim juda oqilona emas.
Misol uchun, agar siz tegdan foydalansangiz
paragraf ichidagi satrlarni tarjima qilish uchun, agar u webmasterning maqsadga qaratilgan oynadan kichik bo'lsa, foydalanuvchi oynasida "taroq" so'zi paydo bo'lishi mumkin.
Xabarlar va varaqlarning HTML-dizaynlari juda muhimdir - bu kontentni foydalanuvchi qulay o'qish uchun mo'ljallangan tarzda yaratishga yordam beradi.
Men sizlarga br tag haqida aytib beraman - bu HTMLda chiziqli tanaffusni, ya'ni ikki qismga bo'linadi - va uni kuch bilan amalga oshiradi, kiritilgan joyga joriy liniyani yakunlaydi va ikkinchi qismini yangi qatorga o'tkazadi.
Yangi paragraf yaratmasdan matnga yangi chiziq qo'shish zarurati paydo bo'lganda, bu teg qaerda ishlatiladi? Misol uchun, kontentni ishlab chiqishda foydali bo'lishi mumkin - agar she'rlar va oyatlar, veb-saytlar yoki shunga o'xshash narsalar mavjud bo'lsa.
Stringni o'tkazish uchun teg haqida hamma narsa
Br yorlig'i HTML-da bir qator uzilishni amalga oshiradi (u tasvirlangan) va barcha brauzerlar tomonidan belgilanadi. Ha, deyarli esdan chiqdi - agar br etikidan foydalansangiz, u holda P xatboshidagi xat belgisidan farqli o'laroq, chiziqni (satrdan oldin) qo'shmaysiz.
Br yorlig'i bo'sh (bo'sh narsa yo'q degani, hech narsa yo'q), ya'ni yopiq bo'lish shart emas. Va yopilishga hojat yo'q ekan, qisqacha tavsif ixtiro qilindi - bu dastlab tagning o'zi yopish yorlig'i yo'qligini bildiradi.
Bir lahzagacha tasavvur qilingki, qisqa ta'rif berilmaydi. Xo'sh, nima bo'ldi? So'ngra har safar bu kabi bir qator uzilishni "yopish va ochish" kerak bo'ladi:
. Bu hech bo'lmasa noqulay. Ammo, shunga qaramay, qattiq XHTMLda bu teg bilan yopilishi kerak
.
Agar topshiriq vertikal masofani oshirish bo'lsa - bu klassni joylashtiradigan chiziqlar orasidagi masofani bosib turadigan tegni qo'shib qo'ying
ketma-ket ikki marta.
<br\u003e
Natija:
Keyingi jumlanni yangi satrga o'tkazishni amalga oshirish uchun brendni qo'llang.
Hurray, yangi satrda ikkinchi jumla.
Haqiqiy namuna:
A. blok
Kecha, ko'cha, chiroq, dorixona,
Sensiz va noloyiq nur.
Kamida chorak asr mobaynida yashash -
Hamma narsa shunday bo'ladi. Natija yo'q.
Va hamma narsa avvalgidek takrorlanadi:
Kecha, muzlikdagi to'lqinlar,
Eczane, ko'cha, chiroq.
Natija:
Kecha, ko'cha, chiroq, dorixona,
Sensiz va noloyiq nur.
Kamida chorak asr mobaynida yashash -
Hamma narsa shunday bo'ladi. Natija yo'q.
Agar o'lsangiz, yana boshlaysiz
Va hamma narsa avvalgidek takrorlanadi:
Kecha, muzlikdagi to'lqinlar,
Eczane, ko'cha, chiroq.
Qanday ko'rinadi:
Nima uchun br tagida paydo bo'ldingiz?
Bu tegga bo'lgan ehtiyoj, agar "qatori" o'nlab bo'sh joylarni ketma-ket yozsalar, (masalan, tajribasiz foydalanuvchilar kabi) "so'zda" qatorni ko'chirish imkoni bo'lmasa.
Nima uchun chiqmasligingiz kerak? Brauzer tomonidan bo'sh joylarning har qanday miqdori bitta maydon sifatida ko'rib chiqiladi va chiziqli uzilishlar bo'lmaydi - brauzer avtomatik ravishda qo'shimcha bo'shliqlarni o'chiradi. Buning uchun va chiziqlar o'tkazish kerak.
Lekin yorliqni suiiste'mol qilmang
, chiziqlar orasidagi masofani ko'paytirishi uchun asosiy HTML + CSS-ni qo'llash yaxshidir. Yangi paragraflar yaratish yoki "xatboshilar kabi" (bu yomon yondashish deb hisoblanadigan) yaratish - bu faqat bitta satrni bekor qilish mumkin emas!
Paragraflarni yaratish va joylashtirish uchun siz p yorlig'ini ishlatishingiz va paragraflar orasidagi masofani oshirish uchun kaskad stil sahifalarini o'zgartirishingiz mumkin, masalan, qo'shing:
margin-to'p: 40 px;
Bonus - toza
Chiziqli tanaffus qo'ygan matnni qanday qilib suzuvchi element atrofida oqmaysiz (bu hizalanadigan vosita bilan surat yoki float xususiyatiga ega bo'lgan element), lekin elementning ostidan boshlanganmi? Buning uchun aniq atributdan foydalanishingiz mumkin.
Biz chap tomonga burilgan tasvirni (align = "left") ko'rib chiqaylik. Biz o'rnatamiz
yoki
keyin matn yorlig'i
(biz keyingi liniyaga o'tkazamiz) bu rasmning ostida ko'rsatilgandek ko'rsatiladi. Yorliqning aniq belgilari boshqa qiymatlari
rasmning o'ng tomonidagi rasmni oqimga aylantiradi.
Ushbu maxsus atributdan foydalanish HTML spetsifikatsiyasi tomonidan ma'qullanmaydi - bunday kod bekor bo'ladi.
BONUS - hr yorlig'i chegarasi
Yorliq
juda soliter, lekin farqli o'laroq
Gorizontal chiziq ajratgichni yaratish uchun ishlatiladi. Bundan tashqari, ushbu chiziqning ko'rinishi atributlardan foydalanishimiz mumkin. Lekin, albatta, CSS orqali tasdiqlangan usullardan foydalanib (buni o'qing, o'qing) buni qilish yaxshidir.
BONUS - bu nishonni yangi bir qatorga o'tkazish taqiqlangan
Bundan tashqari, biz chiziqni uzatishni taqiqlashni va yangi matnni tarjima qilishni taqiqlashni xohlaymiz: ikkita maxsus so'z yoki bir paragraf o'rtasida. Nima qilish kerak? Tag foydalaning
Yorliq nima qiladi
Biz tushunganimizdek, bu juda noqulay. Lekin tag bor!
Natijalar - br, nobr, hr, p yordamida HTML formatida
Xulosa qilish uchun maqolaning mazmunini qisqacha bayon qilaman:
- yorlig'i
Paragraflarni ajratish
- yorlig'i
- paragraf ichidagi chiziqni uzatish uchun (bu yorliq yordamida "paragraflarni yaratish" yoki uni noto'g'ri qilish mumkin emas) - yorlig'i
- gorizontal ajratuvchi liniya yaratish - yorlig'i
- HTML-da chiziqlarni uzatishni taqiqlash
olib boradi yangi satrqatorni buzadi: Natija: Yorliq
keyin yangi satrda ko'rsatiladi.
O'sib boraveradi qator oralig'i vertikal ravishda:
Yorliq
uzatish, ya'ni matnni amalga oshiradi
Orqa o'ringa joylashtirilgan yangi yo'nalishda ko'rsatiladi. Bu tegdan foydalanishning bir usuli
boshqa
layn besleme yanada to'g'ri va aniqroq.
Misol:
Natija:
Masalan, faqat o'zboshimchalik bilan yozish.Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun.
Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak:
Satr-balandlik xususiyatidan foydalanib satrlar orasidagi masofa misoli
Qator balandligi uslubi xususiyati satr oralig'ini boshqarish uchun ishlatiladi (shuningdek, etakchi liniya deb ham nomlanadi). Qiymat odatda qator oralig'ini belgilaydigan son yoki foizni bildiradi.Masalan:
line-height: 2 ikkita oraliqni belgilaydi
layn-balandligi: 1,5 kaltak
line-height: 100% Layn-balandligi uchun bitta oraliqni belgilaydi: 1
Foydalanish misollar
Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak
|
Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak
Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak
Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak
Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak
Ba'zida uslublar to'qnashuvi mavjud va ularni hal qilish uchun ushbu elementning parametrlaridan quyidagi divning misolini qo'llashingiz kerak
Odatda, men turli xil kftlarda chiqishning bir yoki bir nechta elementini chiroyli ishlashga moslashtirishni so'rayman. Lekin, ular menga shablonni taqdim qilganda, ko'pincha blok elementlarining uslublari ko'payib boradi va ularni bartaraf etish uchun har bir element ichidagi uslublarni tez va qisqartirish uchun kerakli elementni kerakli chiqishga moslashtirish uchun murojaat qilishingiz kerak.Misol uchun, yuqoridagi misol orqali divalarga sinfdagiga o'xshash uslubni qo'llash uchun buni amalga oshirishingiz mumkin
Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak
|
Natija:
Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak
Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak
Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak
Masalan, faqat o'zboshimchalik bilan yozish. Matn tasodifiy yoziladi va ma'lum bir CSS funktsiyasining chiqishi va uning parametrlari ushbu klassga qanday namoyish etilishini ko'rsatish uchun. Quyidagi misolni bilishingiz va uni qanday ko'rinishini olishingiz kerak
Ushbu mashg'ulotlar davomida siz ushbu satrning turli xil misollarida CSS-line-height ni ishlatib, chiziqlar orasidagi masofani va satrlar orasidagi masofani qanday yaratishni bilib oldingiz.
CSS3 matni matn bilan ishlaydigan xususiyatlarni o'z ichiga oladi, matnni ko'chirish va kontent ichidagi matnlarni almashtirish bilan bog'liq muammolarni hal qilishga imkon beradi.
Matnni formatlash uchun CSS3 xususiyatlari
1. mag'lubiyatni mag'lubiyatga to'ldirish
Xususiyat konteynerga mos kelmasa, ingichka ko'rinishda qirqib tashlash yoki ellipslar ko'rsatilganda matnning uzunligini cheklash imkonini beradi. Xususiyat faqat quyidagi shartlar bajarilganda ishlaydi: konteynerning kengligi aniqlanishi kerak, element elementlarning ortiqcha qiymatiga ega bo'lishi kerak: yashirin va oq-bo'sh joy: timerap. Meros emas.
Matnni sintaksisi
R (kenglik: 300px; to'kish: yashirin, oq-bo'shliq: hozirgi, matnli toshmalar: ellipsis;) Pic. 1. Matnni ko'chirish xususiyati bilan matnni kesib oling
2. So'zda so'zlar bilan so'zlash
Odatda, so'zlar bo'shliqlar yoki defis ("yumshoq chiziqcha") bo'lgan joylarda boshqa satrga o'tkaziladi yoki elementni ishlatib, majburiy ko'chirish holatida
. Bu xususiyat sizga uzun so'zlar konteyner ichidagi bo'sh joyni to'ldirish uchun so'zlar ichidagi uzatish qoidalarini o'rnatishga imkon beradi. CJK-languages uchun ishlatilmaydi (Xitoy-Yapon-Koreys). Inherited.
Matnni sintaksisi
P (word-break: normal;) p (word-break: break-all;) p (word-break: all-all;)
3. So'z so'zni o'rashga o'radi
Matn konteyneriga mos kelmagan va uning chegarasidan tashqariga chiqadigan hollarda qo'llaniladi. Uzoq so'zlarni sindirish va ularni keyingi qatorga ko'chirish imkonini beradi. Inherited. Faqatgina oq bo'shliqning qiymati liniya tanaffuslariga ruxsat berilsa ishlaydi.
Matnni sintaksisi
R (word-wrap: normal;) p (word-wrap: break-word;)
-
Fikr uchun tashakkur! Yaqin kelajakda men shablonni yaxshilayman.
Yrii
Har bir maqolaning oxirida siz keyingi maqolani yoki shunga o'xshash biror tugma yaratishingiz mumkin. Sizning foydali resurslaringiz foydalanuvchilar uchun juda mos keladi.