Saytdagi shrift o'lchamini go'yo o'rnatilishi mumkin hTML yordamiva CSS-dan foydalanish. Keling, ikkala variantni ham ko'rib chiqaylik.
HTML yordamida shrift hajmini sozlash
Sahifadagi shrift o'lchamini teg yordamida aniqlash mumkin shrift HTML. Maqolada biz allaqachon yorliqni ko'rib chiqdik shrift va uning xususiyatlari. Ushbu tegning atributlaridan biri hajmi, bu sizga shrift hajmini belgilashga imkon beradi. U quyidagicha qo'llaniladi:
Veb-sayt yaratuvchisi "Nubex"
Hajmi 1 dan 7 gacha bo'lgan qiymatlarni qabul qilishi mumkin (standart 3, Times New Roman shrifti uchun 13,5 punktga to'g'ri keladi). Atributni o'rnatishning yana bir varianti - "+1" yoki "-1". Bu shuni anglatadiki, o'lcham bazadan mos ravishda 1 punktga ozmi yoki ko'pmi o'zgaradi.
Ushbu usuldan foydalanish juda oson va matnning kichik qismini shrift hajmini o'zgartirish zarur bo'lganda uni almashtirish mumkin emas. Aks holda, matnni CSS-dan foydalangan holda uslubga o'tkazish tavsiya etiladi.
Shrift o'lchamini CSS bilan sozlash
CSS-da shrift hajmini o'zgartirish uchun xususiyat qo'llaniladi shrift hajmibu quyidagicha qo'llaniladi:
Ko'rsatilgan misolda shrift hajmi piksel bilan o'rnatiladi. Ammo o'lchamni belgilashning boshqa usullari mavjud:
- katta, kichik, o'rta - mutlaq o'lchamni (kichik, o'rta, katta) o'rnating. Ekstra-kichik (x-kichik, xx-kichik), o'ta katta (x-katta, xx-katta) qiymatlaridan ham foydalanish mumkin.
- kattaroq, kichikroq - nisbiy kattalikni belgilash (asosiy elementga nisbatan ozmi yoki ko'pmi).
- 100% - nisbiy kattalik o'rnatiladi (ota-onaga nisbatan foizda). Masalan: h1 (shrift hajmi: 180%;) Bu shuni anglatadiki, yorliq hajmi H1 asosiy shrift hajmining 180% bo'ladi.
- Nisbatan hajmni belgilashning boshqa variantlari:
- 5ex - bu o'lcham 5 ta harf balandligi bo'lishini anglatadi x asosiy shriftdan;
- 14pt - 14 ball;
- 22px - 22 piksel;
- 1vw - brauzer oynasi kengligining 1%;
- 1 soat - brauzer oynasi balandligining 1%;
Shriftni qanday o'zgartirish mumkin?
Sayt yaratishda HTML-sahifalarning turli qismlari va elementlari uchun matn shriftini doimiy ravishda o'zgartirish zarur, chunki bu saytga o'ziga xoslik va uslubni qo'shibgina qolmay, balki axborotni idrok etish sifatini ham yaxshilaydi. Buning uchun HTML-da maxsus teglar mavjud va biz ular haqida ushbu o'quv qo'llanmada gaplashamiz, bu ushbu qo'llanmada eng kattalaridan biri bo'ladi. Ammo, avval aytib o'tganimdek, hamma narsani yoddan bilishga urinmang, sizga kerak emas, asosiysi, darsning har bir bosqichida nimalar muhokama qilinayotganini tushunish va tushunishdir.
Shrift uslublarini o'zgartirish
HTML-da shrift uslublarini o'zgartirishning bir nechta usullari mavjud va buni tez orada ko'rasiz. Endi bir nechta yangi teglarni ko'rib chiqamiz:
... va ... - matnni ajratib ko'rsatish qalin shrift.
... va ... - matnni ajratib ko'rsatish kursiv bilan.
... - matnni yuqori satrda aks ettiradi, masalan E \u003d mc 2.
... - matnni pastki satrda aks ettiradi, masalan H 2 SO 4.
Ushbu teglarning barchasi ichki (qator, satr sathi), ya'ni ular o'zlaridan oldin va keyin qator tanaffuslarini yaratmaydilar, balki bitta satrda joylashganlar. Ular shuningdek, faqat o'rnatilgan elementlarni o'z ichiga olishi mumkin, shuning uchun ular bir-biriga erkin joylashishi mumkin. Eng muhimi, to'g'ri uyalash haqida unutmang: ilgari ochilgan yorliq keyinroq yopilishi kerak.
O'ylaymanki, har biri qalin va kursiv uchun ikkita teg bor. Haqiqat shundaki, oddiy brauzerlar ushbu teglarning tarkibini xuddi shu tarzda namoyish qiladilar, ammo vizual bo'lmagan (ovozli) brauzerlar ichidagi matnni ta'kidlashlari mumkin va ... Shuning uchun, agar siz o'quvchini jalb qilish uchun ba'zi bir so'zlarni yoki iboralarni ta'kidlashni istasangiz, unda bu teglardan foydalanish yaxshidir, garchi umuman olganda farq yo'q.
Siz shunday deb so'rashingiz mumkin: "Ammo yuqoridagi teglar haqiqatan ham HTML-dagi matnni ta'kidlash uchun ishlatilishi mumkinmi?" Albatta yo'q! Teglar ham mavjud va , yorliq bilan bir qatorda matnning tagiga chizish chizilgan matnni ko'rsatadigan. Ammo, ko'rayapsizmi, bu teglar HTML-da eskirgan va align atributi kabi tez orada brauzerlarda yo'qolishi mumkin. Shuning uchun, men sizga qo'rqmasdan foydalanishingiz mumkin bo'lgan yana bir usulni ko'rsataman. Va u uslub atributidan foydalanishni o'z ichiga oladi va uni ko'rsatish joizdir har qanday teglar ichida... Umumiy sintaksis quyidagicha:
<тег style \u003d "text-decor: underline"\u003e ... - matnning ostiga chizib qo'yadi.
<тег style \u003d "text-decor: overline"\u003e ... - matnni chizib qo'yadi.
<тег uslubi \u003d "matnni bezatish: chiziq orqali">... - matnni kesib tashlaydi.
Shrift uslublarini o'zgartirish misoli
Qalin shrift. Kursivlar.
Qalin kursiv.
H 2SO 4 - kursivda yozilgan sulfat kislota formulasi.
Matnning osti chizilgan xatboshisi.
Oddiy matn, qalin chiziq.
Brauzerda natija
Endi uslub atributi to'g'risida bitta tushuntirish bermoqchiman. Style butunlay normal teg atributidir, lekin u Cascading Style Sheets (CSS) ga tegishli. Uzoq o'tmishda, HTML-sahifani to'liq tuzish va har bir elementning tashqi taqdimoti uchun barcha funktsiyalar (rang, shakli, sahifadagi joylashuvi va boshqalar) o'z zimmasiga olindi. hTML tili... Ammo keyinchalik tilni ishlab chiquvchilar ushbu funktsiyalarni ajratib olishga qaror qildilar va CSS-ni yaratdilar. Binobarin, ko'plab teglar yoki teglar atributlari eskirgan. Shuning uchun, boshingizni keraksiz ma'lumotlar bilan to'ldirmaslik uchun, ushbu qo'llanmada men ularni uslublar, ya'ni uslub atributi bilan ham almashtirdim. Uning umumiy sintaksisi quyidagicha:
<тег uslubi \u003d "CSS xususiyati: qiymat">...
Siz uslubdan foydalangan holda hech narsa yo'qotmaysiz, ammo HTML-ni qanday yozishni o'rganasiz va bonus sifatida siz ham CSS-ni o'rganasiz.
Teg yoki kerakli teglar bo'lmaganida nima qilish kerak
Xo'sh, hamma narsa aniq bo'lsa-da? Yaxshi, keyin savol. Ammo, masalan, butun xatboshini emas, balki matnning faqat yarmini kesib tashlashingiz kerak bo'lsa, uni qalin yoki kursiv qilib qo'ymasangiz nima qilasiz? Xavotir olmang, bu erda sizga juda qulay va kerakli yorliq yordam beradi.
Shunday qilib, uchrashing - .... Ushbu yorliq ham ichki (qator, satr sathi) va har qanday ichki teglarni o'z ichiga olishi mumkin, ammo bu muhim emas. O'z-o'zidan , atributlarsiz, matnga ham, teglarga ham hech qanday o'zgartirish kiritmaydi. Va u uslublar uchun, ya'ni aslida uslub atributi uchun maxsus yaratilgan. Aynan shu xususiyat tufayli, aniqrog'i u turli xil ma'nolar, da ma'lum xususiyatlar paydo bo'ladi. Keling, endi bir misolni o'rganib chiqamiz.
SPAN yorlig'ini ishlatish misoli
Oddiy matn o'zgarishsiz qolmoqda.
Oddiy matn. Chizilgan. Chiziq.
Brauzerda natija
Oddiy matn o'zgarishsiz qolmoqda.
Oddiy matn. Chizilgan. Chiziq.
Shriftning nomini (shriftini) o'zgartiring
Shrift nomi nima ekanligini bilmayapsizmi? Shubhasiz sizning ko'pchiligingizda kamida bir marta matn to'ldirilgan Microsoft Word yoki OpenOffice Writer va quyidagi menyuni ko'rdim:
Bu sizning kompyuteringizdagi shriftlarning nomlari va ular nafaqat Word yoki Writer, balki boshqa ko'plab dasturlar, shu jumladan brauzerlar tomonidan ham qo'llaniladi. Shriftning nomi (shrift) uning shriftini shriftni boshqasidan ajratib turadigan belgisini aniqlaydi.
Sizga hech qanday ekzotik shriftlardan foydalanmaslikni qat'iyan maslahat beraman, chunki ular sizning saytingizga tashrif buyurgan odamning kompyuterida bo'lmasligi mumkin va keyin harflar o'rniga u har xil tushunarsiz belgilar yoki kvadratlarni ko'radi. Bu erda deyarli har bir foydalanuvchi kompyuterida mavjud bo'lgan eng keng tarqalgan shriftlar ro'yxati:
Odatiy bo'lib, deyarli barcha brauzerlar "Times New Roman" shriftidan foydalanadilar va uni o'zgartirish uchun bir xil uslub atributidan foydalanish mumkin har qanday teg ichida... Umumiy sintaksis quyidagicha:
<тег uslubi \u003d "font-family: shrift nomi, family">...
Agar shrift nomi bir nechta so'zlardan iborat bo'lsa, unda bitta tirnoq bilan yopilishi kerak. Shriftlarning vergul bilan ajratilgan bir emas, balki bir nechta nomlarini ko'rsatishga ruxsat beriladi, keyin birinchi shrift kompyuterda bo'lmasa, ikkinchisi, uchinchisi va boshqalar ishlatiladi. Ammo oxirida, shriftning butun oilasi nomini qo'yganingizga ishonch hosil qiling, agar bu holda brauzer bitta shrift topmasa, u holda ushbu oilaga eng mos keladigan shriftni qo'llaydi.
Shriftni butun sahifada o'zgartirish uchun - tegdagi stil atributini ko'rsating
... Agar siz matnning alohida qismi uchun shriftni o'zgartirishingiz kerak bo'lsa, uni tegga yozing va unga atributni qo'llang.Shrift nomlarini o'zgartirish misoli
Bu Arial, agar bo'lmasa, u holda Verdana, agar bo'lmasa, boshqa har qanday sans-serif.
Bu Comic Sans MS yoki har qanday kursiv.
Bu yana Arial, Verdana yoki har qanday sans-serif. Va bu Courier yoki har qanday monospace.
Brauzerda natija
Xo'sh, misolni aniqladingizmi? Men bitta tushuntirish beraman, buni tushunish kelajakda hayotingizni jiddiy ravishda osonlashtiradi, garchi ko'pchilik allaqachon taxmin qilgan bo'lsa ham. Shunday qilib, agar teglar bir-biriga va ularning bir nechtasiga joylashtirilgan bo'lsa bir xil turdagi o'zgarishlarni amalga oshiring (masalan, shrift nomini o'zgartirish), keyin avlod teglari ajdod teglarining xususiyatlarini bekor qiladi. Agar ichki teglar bajarilsa turli xil o'zgarishlar, keyin ular bir-birini to'ldiradi, barchasi shu.
Shrift hajmini o'zgartirish
HTML tili faqat etti shrift o'lchamlari bilan cheklangan, bu yaxshi sayt uchun juda kichik ekanligini tushunasiz. Shuning uchun, har bir kishi uzoq vaqtdan beri o'lchamlarini o'zgartirish uchun CSS-dan foydalangan va endi siz ham o'rganasiz.
CSS-da o'nga yaqin o'lchov birligi mavjud, ammo biz faqat uchta eng mashhurini ko'rib chiqamiz - nuqta (pt), piksel (px) va foizlar (%). Shunday qilib:
- pt - buyumlar. Bir nuqta 1/72 dyuym va bir dyuym 2,54 sm. Shuning uchun 1pt \u003d 0.03527778cm. Bu mutlaq qiymat, chunki punktlarda ko'rsatilgan hajm hech narsaga bog'liq emas.
- px - Piksellar. Kompyuter monitorida piksel bilan o'lchangan. Piksel - bu monitorning eng kichik nuqtasi va nisbiy qiymatdir, chunki uning kattaligi joriy ekran o'lchamlari va monitorning o'lchamiga bog'liq.
- % - foizlar. U foiz sifatida hisoblanadi, bu erda ota yorlig'i qiymati 100% olinadi va agar u ko'rsatilmagan bo'lsa, brauzerdagi qiymat sukut bo'yicha hisoblanadi. Bu ham nisbiy qiymatdir, chunki ota-onaning shrift hajmi butunlay boshqacha bo'lishi mumkin va foydalanuvchilar brauzerda shrift hajmini erkin o'zgartirishi mumkin.
Stil atributi shrift hajmini belgilash uchun ishlatiladi va belgilanishi mumkin har qanday teg ichida... Umumiy sintaksis:
<тег style \u003d "font-size: size">...
Shrift nomlarida bo'lgani kabi, shrift hajmini butun sahifada o'zgartirish uchun tegdagi stil atributini ko'rsating
... Agar sizga biron bir matn uchun shriftni o'zgartirish kerak bo'lsa, uni tegga yozib qo'ying va unga atributni qo'llang.Shrift hajmini o'zgartirishga misol
Ushbu shrift hajmi brauzerning standart o'lchamining 90% ni tashkil qiladi.
Ushbu o'lcham BODY yorlig'idagi o'lchamdan 90% torroq.
Sarlavha shrift hajmi BODY hajmining 120% ni tashkil qiladi.
Bu yana standart brauzer hajmining 90% ni tashkil qiladi. Ushbu shriftning o'lchami 15 ball.
Brauzerda natija
Ushbu shrift hajmi brauzerning standart o'lchamining 90% ni tashkil qiladi.
Ushbu o'lcham BODY o'lchamidan 90% torroq.
Sarlavha shrift hajmi BODY hajmining 120% ni tashkil qiladi.
Bu yana standart brauzer hajmining 90% ni tashkil qiladi. Ushbu shriftning o'lchami 15 ball.
Shriftning kattaligi nafaqat uning aniq ko'rsatmasiga, balki uning nomiga (shriftiga) ham bog'liq - har xil shriftlar harflarning balandligi va kengligi bilan bir qatorda harflar oralig'ida butunlay boshqacha bo'lishi mumkin.
Uslub atributi haqida bir oz ko'proq
Sizga ushbu ajoyib fazilatning yana bir sirini ochib berish vaqti keldi, lekin yana sizlarga savol beraman. Agar siz Arial shriftining nomini butun paragraf uchun 80% ga o'rnatishingiz kerak bo'lsa, nima qilardingiz? Va sizga aytaman, siz shunday bir narsa yozasiz:
Paragraf matni.
Paragraf matni.
Yoki shunga o'xshash.
Paragraf matni.
Men haqman? Xo'sh, agar dastlabki ikkita variant printsipial jihatdan to'g'ri bo'lsa, demak, ikkinchisi odatda xato bilan bog'liq, chunki esingizda bo'lsa, bitta tegda ikkita bir xil atributlar bo'lishi mumkin emas. Endi bu uslub nafaqat atribut, balki CSS bilan bog'liq atribut ekanligini eslash vaqti keldi. Bunga qarang:
Paragraf matni.
Juda ham oson, to'g'rimi? Eng muhimi, qo'shni uslublar orasiga nuqta-vergul (;) qo'yishni unutmaslik va bu barcha "iqtisod" ni ikki qavatli tirnoqlarga ("") qo'yish kerak, aks holda faqat birinchi uslub qo'llaniladi, qolganlari esa brauzer e'tiborga olinmaydi. Xo'sh, biz har doim siz bilan ikkitadan kotirovka qo'yamiz, shunday emasmi?
Shunday qilib, ushbu dars juda qizg'in chiqdi, shuning uchun uy vazifangizni bajaring va biroz dam oling.
Uy vazifasi.
- Maqola va uning ikkita qismi uchun sarlavha yarating, shuningdek, bo'lim sarlavhalarini ham chizib qo'ying.
- Sichqoncha kursorini maqola sarlavhasi ustiga qo'yganda, tegishli sarlavha paydo bo'lishiga ishonch hosil qiling.
- Maqolaning boshida bitta paragrafni va har bir bo'limda ikkitasini yozing.
- Barcha sahifani Arial-ga brauzeringizning standart o'lchamidan 90% ga sozlang.
- Barcha sarlavhalarni Times-ga o'rnating va maqola sarlavhasini 150% shrift o'lchamiga va pastki sarlavhalarni 120% ga sozlang.
- Birinchi xatboshida ikki so'zni qalin va bittasini kursiv bilan ajratib ko'ring. Ikkinchisida - qalin kursiv bilan bir nechta so'zlardan iborat ibora. Uchinchisida kursiv bilan yozilgan iborani ostiga chizib qo'ying. To'rtinchisida qalin jumlaning yarmini kesib tashlang.
- Oxirgi xatboshiga spirtning formulasini yozing: C 2 H 5 OH.
Ko'rinib turibdiki, nima uchun HTML teglarini matn uchun bilish kerak, agar hozir deyarli har qanday administrator panelida ularni avtomatik ravishda o'rnatadigan qulay bo'lsa?
Haqiqat shundaki, saytdagi tarkibni formatlash ofis dasturlarida ishlashdan tubdan farq qiladi. Faqatgina matnga jozibali ko'rinish berishning o'zi etarli emas, chunki nafaqat veb-sahifani namoyish qilish, balki uni qidiruv tizimlarida targ'ib qilish ham to'g'ri dizaynga bog'liq.
HTML teglari va atributlari: sintaksis asoslari
Har qanday matnda mavjud yashirin kod, bu kompyuterga ekranda nimani va qanday ko'rsatishni "tushuntiradi". Barcha ma'lumotlar universal elementlar to'plami yordamida qayd etiladi.
Asosan, matn uchun HTML teglar sahifaga blok qo'shadigan yoki o'zgartiradigan buyruqlardir. tashqi ko'rinish... To'g'ri yozuv formati quyidagicha:
Iltimos, barcha teglar birlashtirilmaganligini unutmang. Masalan,
(chiziq o'tkazib yuborish) yoki
(gorizontal chiziq qo'shib) umuman yopish kerak emas.
Nima uchun Word va boshqa dasturlardan maqolalarni sayt muharririga ko'chira olmaysiz
Zamonaviy bo'lsa-da ofis dasturlari matn uchun bir xil HTML teglardan foydalaning, 99% hollarda mahalliy kod veb-sahifalar uchun yaroqsiz. Hujjat dasturning o'zida odatiy ko'rinishda bo'lsa ham, saytga kiritilganda formatlash yo'qolishi mumkin. Bundan tashqari, keraksiz teglar va atributlarning ko'pligi sababli qidiruv tizimlari sahifa tarkibini etarlicha tahlil qila olmaydi. Bu, o'z navbatida, sizning resursingizni targ'ib qilishni qiyinlashtiradi.
Toza va tegishli kodni olish uchun avval oddiy muharrir tomonidan yaratilgan HTML teglarining matnini tozalash kerak. Buning bir necha yo'li mavjud:
- Maqolani "Bloknot" orqali "ishga tushiring" va shundan keyingina saytga joylashtiring. Ilova barcha HTML-larni o'chirib tashlaydi, shu sababli matnni qayta formatlashingiz kerak (muharrir vositalaridan foydalangan holda yoki qo'lda).
- LiveWriter orqali maqolalar yozing va nashr eting. Ommabop blog muharriri darhol to'g'ri kodni yaratadi. Va alohida yorliqda saytdagi matn qanday ko'rinishini ko'rishingiz mumkin.
- HTML Cleaner-dan foydalaning. Ushbu onlayn xizmat butun kodni yo'q qilmaydi, faqat qo'shimcha qismlarni. Filtrlar qaysi teglarni saqlashni tanlashga imkon beradi. Kodga allaqachon optimallashtirilgan buyruqlarni qo'shadigan kuchli vizual formatlash muharriri ham mavjud.
Paragraflar
Ushbu element deyarli barcha maqolalarda mavjud. Har bir paragraf bunday konteyner ichida joylashgan bo'lishi kerak - bu formatlashni soddalashtiradi va saytning barcha sahifalarida izchil uslubni saqlashga imkon beradi. Qulaylik uchun yorliq
Har doim bilan yozing yangi qator.
Hizalama
"Matnni tekislash" alohida HTML yorlig'i allaqachon yo'q bo'lib ketgan. Buning o'rniga umumiy ALIGN atributi yaratildi. Matn blokining sahifadagi o'rnini o'zgartirish uchun siz uchta qiymatdan birini tanlashingiz kerak - MARKAZI, O'ng yoki chap. Xuddi shunday, siz boshqa elementlar uchun hizalamani o'rnatishingiz mumkin - masalan, sarlavhalar.
Ba'zi holatlarda hizalamak uchun boshqa teglar ishlatiladi, masalan, element yordamida joylashishingiz mumkin
Sarlavhalar va pastki sarlavhalar
Sub-sarlavha tizimi sizning tarkibingiz uchun mantiqiy tuzilmani yaratishga imkon beradi. Matnni semantik bloklarga ajratganda o'quvchi diqqatini jamlashi va o'zlashtirishi ancha osonlashadi yangi ma'lumotlar... Qidiruv tizimlari sahifalarni qaysi so'rovlarda targ'ib qilish kerakligini tushunish uchun sarlavhalarni tahlil qiladi. Shuning uchun SEO mutaxassislari ularda tematik kalitlardan foydalanishni maslahat berishadi.
HTML-da oltita pastki sarlavha ishlatiladi - dan
oldin ... Ushbu tizimda aniq bir ierarxiya mavjud:...
... Asosiy maqola, Internet-do'kondagi mahsulot va boshqalar). Matnda faqat bittasi bo'lishi mumkin ... Odatda, u asosiy kalit so'zni o'z ichiga oladi.
...
... Ikkinchi darajali pastki sarlavhalar matnni semantik bloklarga ajratadi. Masalan, agar siz noutbuklarni baholayotgan bo'lsangiz, bir nechtasini qilishingiz mumkin turli xil modellarning nomlari bilan.
...
... Uchinchi daraja, agar matn ikkalasi orasida bo'lsa kerak shuningdek, kichik bloklarga bo'linadi. Bizning misolimizda bu har bir model uchun baholash mezonlari bo'lishi mumkin - "Ishlash", "Xotira", "Video karta" va boshqalar.
, ,
... Amalda ular juda kam uchraydi. Ammo umumiy tamoyil bir xil - ular yuqori darajadagi pastki sarlavha blokida "joylashtirilgan" bo'lishi kerak.
...
... Asosiy maqola, Internet-do'kondagi mahsulot va boshqalar). Matnda faqat bittasi bo'lishi mumkin... Odatda, u asosiy kalit so'zni o'z ichiga oladi.
...
... Ikkinchi darajali pastki sarlavhalar matnni semantik bloklarga ajratadi. Masalan, agar siz noutbuklarni baholayotgan bo'lsangiz, bir nechtasini qilishingiz mumkinturli xil modellarning nomlari bilan.
...
... Uchinchi daraja, agar matn ikkalasi orasida bo'lsa kerakshuningdek, kichik bloklarga bo'linadi. Bizning misolimizda bu har bir model uchun baholash mezonlari bo'lishi mumkin - "Ishlash", "Xotira", "Video karta" va boshqalar.
,
... Amalda ular juda kam uchraydi. Ammo umumiy tamoyil bir xil - ular yuqori darajadagi pastki sarlavha blokida "joylashtirilgan" bo'lishi kerak.,
To'g'ri iyerarxiyani saqlaganingizga ishonch hosil qiling. Bizning misolimizga qaytsak, demak siz modellarning nomlarini darhol kiritolmaysiz
yoki ... Va bundan ham ko'proq, bir hil bloklar uchun turli darajadagi pastki sarlavhalardan foydalaning (masalan, reytingda oxirgi o'rinni egallagan noutbukni tanlang ).
).
Va bu erda HTML-da to'g'ri sarlavha tuzilishini bir zumda tushunishga va eslashga yordam beradigan diagramma mavjud.
Ro'yxatlar
Har qanday sanoq va ko'rsatmalar matn uchun maxsus HTML teglaridan foydalangan holda ro'yxatlar sifatida eng yaxshi formatlangan ( odatdagi xato - faqat bir nechta xatboshilar
Qaysi chiziq yoki raqam bilan boshlanadi).
Bunday bloklarning tuzilishi juda oddiy. Birinchidan, biz ro'yxat turini aniqlaymiz - o'q yoki raqamlangan.
Barcha elementlar ochilish va yopish teglari orasida. Ro'yxatdagi har bir element yangi satrdan boshlanadi va formatga ega. Elementlar soni cheklanmagan.
Tanlov va uning xususiyatlari
Ushbu shrift va uning rangi yordamida nimani o'zgartirish mumkin - va CSS-ga yangi sinflar qo'shmasdan. Bu faqat bitta jumla yoki fragmentni tanlash kerak bo'lganda juda qulaydir.
bir nechta xususiyatlarga ega:
- Yuz... Matn shriftini o'zgartirishga imkon beradi. Siz vergul bilan ajratilgan bir nechta variantlarni ro'yxatlashingiz mumkin (Tahoma, Verdana). Agar foydalanuvchida birinchi shrift o'rnatilmagan bo'lsa, tizim shunchaki alternativadan foydalanadi.
- Hajmi... Matnni kattalashtirish yoki kamaytirish uchun tirnoqlarga 1 dan 7 gacha bo'lgan qiymatni kiriting.
- Rang... Dizaynga qarab siz standart soyalardan birini (qizil, yashil, ko'k) tanlashingiz yoki xohlagan rangingiz uchun kod kiritishingiz mumkin.
Bilan formatlangan xatboshilardan foydalanmang , pastki sarlavhalar o'rniga. To'g'ri yorliq bilan bir xil uslub parametrlarini o'rnatish yaxshiroqdir.
Matnni tanlash usullari
Monoton matn, hatto paragraflar bilan ham charchatadi. E'tiborni jalb qilish va o'quvchining qiziqishini oshirish uchun, asosiy fikrlar uni grafik jihatdan ajratib ko'rsatish tavsiya etiladi. Ushbu vazifani bajarishda sizga yordam beradigan ba'zi buyruqlar.
... ... Juda mashhur HTML yorlig'i. Jasoratli matn darhol ko'zni tortadi, shuning uchun uni muhim tezislar va faktlarni ta'kidlash uchun ishlatish qulay.
Ko'pchilik teglarni chalkashtirib yuborishadi va ... Vizual farq yo'q, lekin ular turli yo'llar bilan ishlaydi. Birinchisi shunchaki matn ko'rinishini o'zgartirsa, ikkinchisi "indeks" vazifasini bajaradi va eng muhim bo'laklarni ajratib ko'rsatadi (SEO uchun tematik kalit so'zlar va iboralar).
... ... Elegant va qat'iy kursiv ilmiy atamalarni, chet tilidagi so'zlarni va turli xil takliflarni formatlash uchun juda mos keladi. Jiddiy nashrlarda badiiy asarlarning sarlavhalari ham egri matn bilan belgilanadi.
... ... Ehtimol, bitta HTML yorlig'i bu qadar ko'p tortishuvlarga sabab bo'lmagandir. Chizilgan matn kamdan kam qo'llaniladi, chunki bu yerga ta'kidlash tarixiy ravishda ko'priklar bilan bog'langan. Agar siz foydalansangiz maqolalarda, bu faqat qisqa qismlarga mos kelishini unutmang - 1 qatordan oshmasligi kerak.
...
... Reklamada uning qismini juda dolzarb qilishiga imkon beradigan qiziqarli yorliq - masalan, eski va yangi narxlar o'rtasidagi farqni ta'kidlash.
... ... Shrift hajmini qo'shimcha parametrlarsiz oshirishning eng oson usuli.
... ... Oldingi teg bilan bir xil printsip asosida ishlaydi. Ichida joylashgan matn asosiyga nisbatan qisqartiriladi.
... ... Ushbu format uchun to'g'ri nom yuqori belgidir. Asosan ushbu yorliq matematik darajalar va izohlarga mo'ljallangan. U shrift hajmini pasaytiradi va tanlangan matnni yuqoriga siljitadi.
... ... Subscript ko'pincha turli formulalarda uchraydi. Tanlov asosiy matn ostida joylashgan.
Sense idishlari
Ba'zi bloklar ko'plab matnlarda topilganligi sababli, ular uchun maxsus teglar yaratishni boshladilar. Bu formatlashni soddalashtiradi, chunki tarkibning har bir turi o'ziga xos uslublar to'plamiga ega bo'lsa, matn qismini tanlash va unda qanday ma'lumot borligini ko'rsatish kifoya.
...
... Kompyuter kodlarini qo'shish uchun teg. Maqolalarni dasturlashda misollar bilan ajralmas - buyruqlar bajarilmaydi, ammo oddiy matn sifatida ko'rsatiladi.
... ... Iqtiboslar uchun mo'ljallangan - masalan, intervyulardan asosiy parchalar.
... Matnning bir qismini alohida blokga etkazib beradi. Odatiy bo'lib, tanlov chap tomonda kattaroq chegaraga ega, ammo CSS-da siz matn hajmini, uslubini va rangini o'zgartirishingiz mumkin.
... ... Havolalarni o'z ichiga olgan muallif haqidagi ma'lumotlarni o'z ichiga olgan qo'shimcha yorliq.
Ajratuvchi chiziq
Oddiy chiziq yordamida katta qismning mantiqiy tugashini belgilash mumkin.
juftlangan teglarga taalluqli emas. Bu shuni anglatadiki, yopilish formati elementi kerak emas.
WIDTH atributidan foydalanib, mos o'lchamni pikselga yoki deraza kengligining foiziga o'rnatib, ajratgichni qisqartirishingiz mumkin.
HTML-matningizni oqilona formatlash uchun teglardan qanday foydalanishni o'rganib, siz nafaqat maqolalaringizni o'qishni osonlashtirasiz, balki SEOingizni ham yaxshilaysiz.
Ushbu qo'llanmada biz yorliqning so'nggi atributini ko'rib chiqamiz bu matn rangini belgilaydigan. Odatiy bo'lib, matn qora va oq fon bilan. Uchun hTML rangidagi matn rangini o'zgartirish, tegning rang atributini qo'llashingiz kerak :
Rangni belgilash uchun uning nomini ko'rsating, masalan: qizil, yashil, ko'k. Keling, kichik bir misolni ko'rib chiqaylik:
Yashil matn
Qizil matn
Binafsha matn
Keling, natijani brauzerda ko'raylik:
Birinchi xatboshidagi matn yashil rangga, ikkinchisida qizil rangga, uchinchisida esa binafsha rangga aylandi. Hammasi bo'lib, asosiy ranglar uchun 16 nom va 130 ta qo'shimcha ranglar mavjud. Ranglarning to'liq ro'yxatini HTML rang jadvalida ko'rishingiz mumkin.
Ranglarni nomlashning bu usuli juda oddiy, ammo juda cheklangan. Shuning uchun, html kodidagi rangni o'zgartirish uchun ular ko'pincha funt belgisi (#) bo'lgan o'naltı raqamdan foydalanadilar, masalan:
Ushbu belgi bilan siz 16 milliondan ortiq rang va ularning soyalarini olishingiz mumkin! Siz rang kodini saytda mavjud bo'lgan HEX rang konvertori yordamida yoki o'sha fotoshopdagi ranglar palitrasi yordamida olishingiz mumkin. Keling, bir misolni ko'rib chiqamiz va quyidagi kodni yozamiz:
Yashil matn
Qizil matn
Binafsha matn
Faylni saqlaymiz va natijani ko'rib chiqamiz:
Ko'rib turganingizdek, biz matnga birinchi misolda bo'lgani kabi bir xil ranglarni berganmiz, faqat shu erda foydalanganmiz o'n oltinchi tizim hisob-kitob yoki boshqacha qilib aytganda, biz rangni HEX formatida aniqladik.
Endi siz HTML-dagi matn rangini qanday o'zgartirishni bilib oldingiz va dars oxirida men tegning barcha atributlarini takrorlashni taklif qilaman va bir vaqtning o'zida matn uchun bir nechta parametrlarni o'rnating, ya'ni: shrift, o'lcham va rang. Misol yozing:
Matn shriftini, o'lchamini va rangini o'rnating
Matn shriftini, o'lchamini va rangini o'rnating
Muallifdan: Vebformyself blog sahifalariga xush kelibsiz. Ushbu maqolada men shriftni HTML-ga qanday o'rnatish haqida savolga javob berishni xohlayman. Ba'zi odamlar buni hali ham noto'g'ri yo'l bilan qilishadi, shuning uchun bu masalani diqqat bilan tushunish juda muhimdir.
Shrift avval qanday o'rnatilgan
Ilgari html shrift parametrlari, shrift, rang va o'lchamlarni o'zgartirish uchun konteyner vazifasini bajaradigan maxsus bog'langan shrift yorlig'idan foydalangan. Bugungi kunda ushbu yondashuv tubdan noto'g'ri. Nima uchun? Veb-standartlar sahifaning tashqi ko'rinishi html formatida yozilmasligi kerakligini belgilaydi. Bunga qo'shimcha ravishda, teg faqat juda to'liq qo'llab-quvvatlanadi eski versiya HTML - HTML 3.
HTML formatidagi shriftni to'g'ri sozlash
Bugungi kunda, shu maqsadda, faqat CSS-ning imkoniyatlaridan foydalanishga arziydi. Ushbu til tashqi ko'rinishni u orqali aniqlash uchun yaratilgan. Bundan tashqari, CSS-da matn ko'rinishiga ta'sir qiladigan yana bir qancha xususiyatlar mavjud. Keling, ularning har birini biroz ko'rib chiqaylik:
Shrift uslubi. Matn uslubini belgilaydi. Buning uchun quyidagi qiymatlar kerak:
Shrift-variant. Xususiyat kichik harflarning yozilishini qanday talqin qilishni belgilaydi. Faqat ikkita ma'noga ega:
Oddiy odatiy xatti-harakatlar.
Kichik qalpoqchalar - barchasi kichik harf barcha shriftlarga aylantiriladi va oddiy shrift bilan solishtirganda biroz kichraytiriladi.
Shrift og'irligi. Matnning dadilligini aniqlaydi. Qiymat o'rnatilishi mumkin kalit so'zlar yoki raqamli qiymat. Keling, barcha variantlarni ko'rib chiqaylik:
Normal - normal matn
Qalin - qalin matn
Qalinroq - bu asosiy elementda ko'rsatilgandan ko'ra jasurroq ko'rinadi.
Engilroq - harflar ota-onaga nisbatan kamroq vaznga ega bo'ladi.
Bu juda oddiy. Bundan tashqari, 100 dan 900 gacha bo'lgan raqamlar shaklida qiymatni belgilash mumkin, bu erda 900 - qalin. Masalan, normal 400, qalin esa 700 ga teng.
Afsuski, ko'pgina brauzerlar ushbu raqamli qiymatlarni tanimaydilar va faqat ikkita qiymatdan foydalanishlari mumkin - normal va qalin. Tajriba uchun men 9 xatboshi yaratdim va har biriga matnning har xil vaznini 100 dan 900 gacha berdim. Keyin ushbu veb-sahifani ochdim turli xil brauzerlar va hech kim turli xil og'irliklarni ko'rsatmadi. Xulosa: Raqamli qiymatlardan foydalanmaslik yaxshiroqdir.
Shrift kattaligi. Ushbu xususiyat harflar hajmini belgilaydi. Hajmi har xil nisbiy va mutlaq qiymatlarda o'rnatilishi mumkin. Ko'pincha o'lcham piksellarda ko'rsatilgan, nisbiy birliklar em va foiz. Agar siz o'lchamlarni CSS-da belgilash haqida ko'proq bilmoqchi bo'lsangiz, unda hamma narsa batafsilroq tavsiflangan o'qing.
Shrift oilasi. Ehtimol, ishlatiladigan shriftning oilasini yoki o'ziga xos nomini belgilaydigan eng asosiy xususiyat. Agar siz foydalanayotgan bo'lsangiz aniq ism, keyin ko'rsatilgan shrift barcha foydalanuvchilarning kompyuterlarida topilganligiga ishonch hosil qilishingiz kerak. Ishonchliligi uchun muqobil variantni yoki vergul bilan ajratilgan butun oilani yozishingiz kerak. Shriftlar quyidagi oilalarga bo'linadi:
Har bir oila har xil ehtiyojlarga javob beradi. Masalan, fantaziya ko'pincha turli xil sarlavhalarni loyihalash uchun ishlatiladi va monospace mashina kodlarini ko'rsatish uchun ishlatiladi va hokazo. Shriftlarning nomlarini aniqroq bilib olishingiz mumkin, masalan matn muharriri yoki fotoshopda.
Qisqartirilgan yozuv
Yuqorida ko'rib chiqilgan barcha narsalar juda osonlikcha barcha sozlamalarni birlashtirgan ajoyib shrift xususiyati bilan bitta qatorga kodlanishi mumkin. Siz quyidagi ketma-ketlikda yozishingiz kerak:
Shrift: shrift uslubi | shrift-variant | shrift og'irligi | shrift hajmi | shrift-oila;
Shrift: shrift uslubi | shrift - variant | shrift - vazn | shrift - hajmi | shrift - oila; |
Agar siz biron bir parametrni ko'rsatishingizga hojat bo'lmasa, u shunchaki qoldiriladi. Bu erda faqat o'lcham va shrift oilasi talab qilinadi, agar kerak bo'lmasa, qolgan hamma narsa ixtiyoriy. Stenografiya yozuvidan foydalanish CSS-dagi kodni juda qisqartirishga imkon beradi. Uni ishlating, chunki u shunday yaxshi optimallashtirish sayt ishlashi uchun.
HTML formatidagi shriftni turli xil elementlarga qanday o'rnatish
Shunday qilib, biz ba'zi bir sabablarga ko'ra shrift uchun barcha xususiyatlarni tavsiflash bilan mashg'ul bo'ldik. Bu juda muhim ma'lumotlar, lekin uni qanday qilib to'g'ri so'rash kerak? Kerakli elementlarga erishish uchun kerakli selektorlardan foydalaning. Keyinchalik men ba'zi bir misollarni taklif qilaman:
p a (shrift oilasi: Verdana, sans-serif;)
Jadval ma'lumotlari uchun ko'plab shrift parametrlari o'rnatiladi: qisqartirilgan katta harflar, qalin, shrift hajmi va nomi.
