Shrift tegida qaysi atribut ishlatilmaydi. HTML shrift rangi. turli modellarning nomlari bilan

Eskiz

Eskiz

Odatdagidan ko'proq

Odatdagidan kamroq

Kursiv

Kursiv

Pastki chiziq bilan

Chizilgan

Uslub atributlari imkoniyatlari

Ta'riflangan teglardan tashqari, html shriftini o'zgartirishning yana bir qancha usullari mavjud. Ulardan biri umumiy uslub atributidan foydalanishdir. Uning xususiyatlarining qiymatlaridan foydalanib, siz shriftlarni ko'rsatish uslubini o'rnatishingiz mumkin:

1) font-family - xususiyat shriftlar oilasini o'rnatadi. Bir nechta qiymatlarni sanab o'tish mumkin.
Agar oldingi oila foydalanuvchining operatsion tizimida o'rnatilmagan bo'lsa, html-dagi shriftni keyingi qiymatga o'zgartirish sodir bo'ladi..

Yozish sintaksisi:

font-family: font-name [, font-name[, ...]]

2) shrift o'lchami - o'lcham 1 dan 7 gacha o'rnatiladi. Bu HTMLda shriftni oshirishning asosiy usullaridan biridir.
Yozish sintaksisi:

shrift o'lchami: mutlaq o'lcham | nisbatan kattaligi | ma'nosi | qiziqish | meros

Shuningdek, siz shrift hajmini belgilashingiz mumkin:

• Piksellarda;
• Mutlaq ma'noda ( xx-kichik, x-kichik, kichik, o'rta, katta);
• Foizlarda;
• Nuqtalarda (pt).

Shrift hajmi: 7

Shrift hajmi: 24px

Shrift o'lchami: x-katta

Shrift hajmi: 200%

Shrift hajmi: 24pt

shrift uslubi: normal | kursiv | qiya | meros

Qiymatlar:

• normal – oddiy imlo;
• kursiv - kursiv;
• oblique - o'ngga qiya shrift;
• inherit - asosiy elementning imlosini meros qilib oladi.

Ushbu xususiyatdan foydalangan holda html shriftini qanday o'zgartirishga misol:

shrift uslubi: meros qilib olish

shrift uslubi: kursiv

shrift uslubi: normal

shrift uslubi: qiya

shrift-variant: normal | kichik-shlyapalar | meros

Ushbu xususiyat bilan html-da shriftni qanday o'zgartirishga misol:

font-variant: meros qilib olish

shrift-variant: normal

shrift-variant:kichik harflar

shrift-weight: qalin|qalinroq|yengilroq|normal|100|200|300|400|500|600|700|800|900

Qiymatlar:

• qalin - html shriftini qalin qilib o'rnatadi;
• qalinroq - odatdagiga nisbatan qalinroq;
• engilroq - odatdagiga nisbatan kamroq to'yingan;
• normal – oddiy imlo;
• 100-900 - shrift qalinligini raqamli ekvivalentda o'rnatadi.

shrift vazni: qalin

shrift vazni: qalinroq

shrift vazni: engilroq

shrift vazni: normal

shrift og'irligi: 900

shrift og'irligi: 100

HTML shrift xususiyati va shrift rangi

Shrift boshqa konteyner xususiyatidir. O'zida u shriftlarni o'zgartirish uchun mo'ljallangan bir nechta xususiyatlarning qiymatlarini birlashtirdi. shrift sintaksisi:

shrift: font-size font-family | meros

Qiymat tizim tomonidan turli boshqaruv elementlaridagi teglardagi shriftlarga ham o'rnatilishi mumkin:

• sarlavha - tugmalar uchun;
• icon – piktogrammalar uchun;
• menyu - menyu;
• xabarlar qutisi – muloqot oynalari uchun;
• kichik sarlavha - kichik boshqaruvlar uchun;
• holat satri – holat satri shrifti.

Saytdagi shrift rangini HTML kod yordamida sozlash mumkin. Buning uchun teg mavjud shrift. Ta'rifga ko'ra, teg shrift matn uchun o'ziga xos "o'rash" yoki "konteyner" bo'lib xizmat qiladi, uning xususiyatlarini nazorat qilish orqali siz matn dizaynini o'zgartirishingiz mumkin.

teg shrift quyidagicha amal qiladi:

Veb-sayt yaratuvchisi "Nubex"

HTML-da shrift rangini o'zgartirishning eng oson yo'li atributdan foydalanishdir rang teg shrift:

Veb-sayt yaratuvchisi "Nubex"

Bu teg bilan o'ralgan so'z uchun ko'k rangni o'rnatadi shrift.

Lekin rang parametridan tashqari teg boshqa atributlarga ham ega.

FONT teg atributlari

teg shrift faqat uchta xususiyatga ega:

• rang- matn rangini o'rnatadi;
• hajmi- matn hajmini o'rnatadi;
• yuz- shriftlar turkumini belgilaydi.

Parametr rang rang nomi (masalan, “qizil”, “ko‘k”, “yashil”) yoki o‘n oltilik kod (masalan, #fa8e47) bilan belgilanishi mumkin.

Xususiyat hajmi 1 dan 7 gacha qiymatlarni qabul qilishi mumkin (standart 3, Times New Roman shrifti uchun 13,5 nuqtaga to'g'ri keladi). Atributni ko'rsatishning yana bir varianti - "+1" yoki "-1". Bu shuni anglatadiki, o'lcham bazaga nisbatan mos ravishda 1 ga ko'proq yoki kamroq o'zgaradi.

Keling, misolimizda ushbu atributlardan foydalanishni ko'rib chiqaylik:

Veb-sayt yaratuvchisi "Nubex"

Biz tegni qo'llaymiz shrift bir so'z uchun biz uni 6 o'lchamga, to'q sariq rangga va "Serif" shrift oilasiga o'rnatdik.

CSS yordamida matn rangini sozlash

Agar siz matnning bir nechta joylariga maxsus formatlashni (masalan, matn rangini o'zgartirish) qo'llashingiz kerak bo'lsa, u holda CSS kodidan foydalanish maqsadga muvofiq bo'ladi. Buning uchun rang atributi mavjud. Keling, buni misolimizda qanday ishlatishni ko'rib chiqaylik:

Konstruktor saytlar "Nubex"

Bu erda biz "Dizayner" so'zi uchun ko'k rangni o'rnatdik (uning o'lchami, sukut bo'yicha, asosning 100% ni tashkil qiladi), "saytlar" so'zi uchun yashil rang va 125% o'lchami, to'q sariq rang va o'lchami "Nubex" so'zi uchun 150%.

Bugun biz matnni formatlash imkonini beruvchi turli teglarni, ya'ni Shrift, Blockquote, Pre, Strong, Em, B, I va boshqalarni ko'rib chiqishni davom ettiramiz.

Blockquote va Pre - HTML formatlash

Ilgari (CSS paydo bo'lishidan oldin ham) tirnoq yorlig'i Blok tirnoq HTML kodida u juda tez-tez ishlatilardi, chunki unga kiritilgan matnning bo'lagi gorizontal chiziqqa ega bo'lib, o'sha paytda CSS xususiyatlaridan foydalanishning iloji yo'qligi sababli buni qilish oson emas edi. Blockquote elementi juftlangan va ichki va blok teglarini o'z ichiga olishi mumkin (masalan, P paragraflar).

Misol

Misol Blockquote ichiga kiritilgan

Hozirgi kunda Blockquote yorlig'i matnni loyihalashda hali ham qo'llaniladi, ammo bugungi kunda tirnoqlarning ko'rinishi odatda dizayn shabloningizning uslublar jadvali faylida maxsus ko'rsatilgan CSS xususiyatlaridan foydalangan holda o'rnatiladi. Masalan, mening blogimda style.css da quyidagi qatorlarni topishingiz mumkin:

#content blockquote(chegara:15px 0 20px 0; padding:5px 8px 5px 35px;fon:#eaedf0 url(rasmlar/quote2.png) chap tepada takrorlanmaydi;fon-pozitsiya:8px 5px;rang:#666;shrift- o'lcham:14px;kenglik:91%;shrift uslubi: kursiv;) #kontent blokirovkasi p(rang:#666;shrift o'lchami:14px;)

Xo'sh, Blockquote-ga kiritilgan tirnoqlarning qanday ko'rinishini maqola matnida menejer bilan suhbatda ko'rishingiz mumkin.

Ilgari Html-dagi iqtibosga qo'shimcha ravishda (CSS paydo bo'lishidan oldin) yana bir formatlash yorlig'i juda keng qo'llanilgan - Markaz. U juftlangan (bir turdagi konteyner) va bloklangan. U har qanday matn elementlarini (ham qator, ham blok) o'z ichiga olishi mumkin, bu harakat natijasida markazga to'g'ri keladi.

Shunday qilib, endi tegni ko'rib chiqaylik Oldindan, bu to'g'ridan-to'g'ri manba kodida ko'rsatilgan matn formatini uzatish imkonini beradi. Esingizda bo'lsin, brauzerda kodni tahlil qilishda barcha ketma-ket (bo'sh joy, yorliq va qatorlar) bitta bo'sh joy bilan almashtiriladi.

Shunday qilib, element Pre bo'sh joy belgilarini qisqartirishni o'chiradi matnning unga ilova qilinadigan qismida. Shunisi e'tiborga loyiqki, Pre-ga kiritilgan fragment uchun brauzer avtomatik ravishda bo'sh joy belgilaridan foydalangan holda chiziqlarni buzmaydi.

Bular. Pre element ichidagi barcha satrlar brauzer tomonidan uzluksiz hisoblanadi - kodda yozganingizdek, u brauzerda shunday ko'rsatiladi. Bundan tashqari, brauzerda Pre teg yordamida formatlangan matn qismini ko'rsatish uchun Courier New yoki shunga o'xshash monospased shrift ishlatiladi.

Manba kod yorlig'ida formatlash Old teglar eskirgan

Old tegning o'zi blok darajasida bo'lib, uning ichida (bu teg juftlangan) faqat ichki tarkibni o'z ichiga olishi mumkin (ya'ni, P paragraflari, H1 - H6 sarlavhalari va boshqalar uning ichiga joylashtirilmasligi kerak).

Html-da matnni formatlash uchun mo'ljallangan yana bir blok tegi mavjud - Manzil. Validator standartlariga ko'ra, brauzerda kursiv bilan ko'rsatiladigan ushbu teg ichida faqat inline kontent joylashishi mumkin.

Shrift - sof Html da matn rangi va shrift bilan ishlash

Strong, Em - matnda mantiqiy va vizual ta'kidlash uchun teglar

Agar CSS hozir mavjud bo'lmaganida, men ba'zi mantiqiy va jismoniy (vizual) matn formatlash teglarining maqsadini tasvirlashim kerak edi. Lekin, chunki CSS hozirda ko'pchilik saytlarda qo'llanilmoqda, Html kodidagi bunday teglarning roli allaqachon nolga tushirilgan, shuning uchun men ularni tezda ko'rib chiqaman va nima uchun ular ilgari ishlatilganligini tushuntiraman (va ba'zilari hozir ham qo'llanilmoqda) ).

Vizual teglar saytingizga tashrif buyuruvchilarga ko'rinadigan matn uslubini o'zgartirish uchun mo'ljallangan, ammo qaysi qidiruv tizimlari alohida e'tibor bermasligi kerak.

Mantiqiy matn formatlash teglari nazariy jihatdan har qanday narsani ko'rsatishga qaratilgan qidiruv tizimlari uchun aksanlar. Foydalanuvchi uchun ushbu elementlar bilan ajratib ko'rsatish, shuningdek, ajratilgan so'zlarning ko'rinishini o'zgartiradi.

Esingizda bo'lsa, yaqinda optimallashtiruvchilarga kalit so'zlar bilan muhim joylarni (ular ta'kidlanishi kerak) kuchli va EM mantiqiy formatlash teglari bilan ajratib ko'rsatish tavsiya etilgan edi, ular foydalanuvchi uchun oddiy qalin va kursiv kabi ko'rinadi.

Ammo kalit so'zlarsiz diqqatga sazovor joylar uchun Html "B" va "I" elementlaridan foydalanish tavsiya etildi, ular yana foydalanuvchilar uchun qalin va kursiv kabi ko'rinadi, ammo qidiruv tizimlari tomonidan hisobga olinmagan, chunki ular mantiqiy formatlash teglari emas.

Endi bularning barchasi endi ko'ngildagidek ishlamaydi va biz qidiruv tizimlaridan buning uchun ma'lum dividendlarga umid qilishdan ko'ra, Strong va EM-dan foydalangan holda kalit so'zlarni tanlashni odatiy holga keltiramiz.

Shunday qilib, yuqorida aytib o'tilgan "B" va "I" ga qo'shimcha ravishda (qalin va kursiv bilan) toifaga vizual formatlash Bularga maqolaning boshida muhokama qilingan Shrift, Pre, shuningdek teglar kiradi:

1. "U" - tagiga chizish
2. "Qo'yish" - chizib tashlash
3. "Sup" - yuqori belgi
4. "Sub" - subscript
5. "Tt" - monospace shrifti
6. "Katta" - shriftni oshiring
7. "Kichik" - shriftni kamaytiring

Xo'sh, endi elementlar ro'yxatini ko'rib chiqaylik mantiqiy formatlash matn:

1. "Em" - kursivda muhim bo'laklarni mantiqiy ajratib ko'rsatish
2. "Kuchli" xuddi shunday, lekin u faqat qalin harflar bilan ajralib turadi
3. "Cite" - tirnoqlarni kursiv qilish
4. "Kod" - monospased shrift bilan turli xil kodlarni ko'rsatish uchun mo'ljallangan
5. "Samp" - monospace shrifti bilan bir nechta belgilarni ajratib ko'rsatish
6. "Abbr" - bu tegning Title atributi qisqartmaning dekodlanishini o'z ichiga oladi (masalan, CSS yoki Html, ular bitta so'z bilan emas, balki harflar bilan o'qiladi). Sichqoncha kursorini ushbu qisqartma ustiga olib borganingizda Sarlavhada yozilgan so'zlar ochiladi.
7. "Acronym" xuddi shu narsa, lekin qisqartmalar uchun ishlatiladi, ya'ni. harflar bilan emas, balki so'z sifatida o'qiladigan qisqartmalar (masalan, MKAD yoki Gai)
8. "Kbd" - sayt foydalanuvchisi tomonidan klaviaturadan monofazo shriftda kiritilgan matnni ko'rsatish uchun ishlatiladi
9. "Var" - ba'zi kodlardagi o'zgaruvchilarni kursiv qilish uchun ishlatiladi
10. "Del" - Html hujjati nashr etilgandan so'ng ba'zi bir parcha o'chirilganligini ko'rsatmoqchi bo'lganingizda chizilgan chiziq bilan ajratib ko'rsatish.
11. "Ins" - Html hujjati nashr etilgandan keyin biron bir qism kiritilganligini ko'rsatish kerak bo'lganda tagiga chizish

Yana bir bor takror aytamanki, ushbu formatlash teglari hozirda kod yozishda juda kam uchraydi, ammo ularning maqsadini bilish ortiqcha emas.

Omad sizga! Tez orada blog sayti sahifalarida ko'rishguncha

Sizni qiziqtirishi mumkin

Bo'shliq belgilari va ularni Html-da kodni formatlash, shuningdek, maxsus uzilmaydigan bo'shliq belgilar va boshqa mnemonikalar
Html va CSS kodlarida ranglar qanday o'rnatiladi, jadvallarda RGB soyalarini tanlash, Yandex chiqishi va boshqa dasturlar Ochiladigan ro'yxatlar va matn maydonlari shakli uchun, Variant, Textarea, Label, Fieldset, Legend - Html teglarini tanlang.
Html kodidagi ro'yxatlar - UL, OL, LI va DL teglari
Qanday qilib giperhavola yaratish mumkin (A, Href, Target blank), uni saytning yangi oynasida qanday ochish kerak, shuningdek, rasmni Html kodida havola qilish
Html-dagi jadvallar - Table, Tr va Td teglari, shuningdek ularni yaratish uchun Colspan, Cellpadding, Cellspacing va Rowspan
Html 4.01 standartiga muvofiq H1-H6 sarlavhalarining teglari va atributlari, gorizontal chiziq Hr, chiziq uzilishi Br va P paragrafi
Html gipermatn belgilash tili nima va W3C validatoridagi barcha teglar ro'yxatini qanday ko'rish mumkin
Img - Html yorlig'i rasmni qo'shish (Src), matnni uning atrofida tekislash va o'rash (tekislash), shuningdek fonni o'rnatish (fon)
Html kodidagi sharh direktivalari va Doctype, shuningdek blok va inline elementlar (teglar) tushunchasi

Element (ingliz tilidan shrift- shrift) - o'lcham, rang va shrift kabi shrift xususiyatlarini o'zgartirish uchun konteyner.

Bu element eskirgan, o‘rniga uslublardan foydalaning.

Sintaksis

Matn

Yopish belgisi

Majburiy.

Misol

P Ushbu jumlaning birinchi harfi Arial shriftida yozilgan, qizil rang bilan ajratilgan va hajmi kattalashtirilgan.