Oxirgi maqolada biz teg atributlari yordamida veb-saytdagi fon rangini qanday o'zgartirish haqida gaplashdik tanasi va CSS uslublari: . Ushbu maqolada veb-saytda tasvirlarni fon sifatida ishlatish, fonni sahifaning to'liq kengligiga qanday qilib cho'zish va uni tuzatish haqida so'z boradi.

Rasm sahifa foni sifatida - HTML

Keling, birinchi navbatda belgilash usulini ko'rib chiqaylik fon tasviri atributidan foydalangan holda saytda fon teg tanasi:

Bu erda fon tasviri tana tegining fon atributidan foydalanib o'rnatiladi.

Yuqoridagi misolda bo'lgani kabi, rasmga qo'shimcha ravishda fon rangini ham belgilash tavsiya etiladi (u sahifa yuklanayotganda saytda ko'rsatiladi), bu fon tasviriga eng mos keladi va matn bilan kontrast hosil qiladi. saytida. Misol uchun, agar siz veb-saytingizda oq matn rangidan foydalansangiz, quyuq fon rangini belgilashingiz va qorong'i fon tasvirini o'rnatishingiz kerak. Bunday holda, matnni o'qish oson bo'ladi.

Eslatma: Fon tasviri va fon rangini HTML-dan emas, balki yordamida o'rnatish tavsiya etiladi CSS yordamida. Bunday holda, kod haqiqiy va to'g'riroq bo'ladi.

Rasm sahifa foni sifatida - CSS

IN CSS fon Yangi rang va fon tasviri bitta xususiyatga o'rnatilishi mumkin fon:

Bu erda fon tasviri fon CSS xususiyati yordamida o'rnatiladi.

Bu erda mulkdan foydalanish fon-ilova sahifa fon sobit, va xususiyatidan foydalanish fon - takrorlash tasvirning gorizontal takrorlanishi o'rnatiladi. Ammo fon tasviri qirralarning atrofida yaxshi "tikilgan" bo'lishi kerakligini hisobga olish kerak.

Agar fon tasvirini brauzer oynasining toʻliq oʻlchamiga choʻzmoqchi boʻlsangiz, xususiyatdan foydalaning fon o'lchami: 100%;

Nubex veb-sayt yaratuvchisida siz har qanday veb-sayt uchun fon sifatida katta rasmdan foydalanishingiz va uni mahkamlashingiz mumkin.

Ushbu qo'llanmada biz istalgan piksellar sonida brauzerda butun ko'rish maydonini egallaydigan sezgir fon tasvirini yaratish texnologiyasini batafsil o'rganamiz. Va biz CSS-dan foydalanamiz - fon o'lchami xususiyati. JavaScriptsiz:

MISOL
YUKLAB OLISH MANBALARI

Ta'sirchan fon tasvirlaridan foydalanishga misollar

Bugungi kunda fon tasviri sahifaning butun ko'rsatilgan maydonini qamrab oladigan saytlar juda mashhur.
Quyida ushbu veb-saytlardan ba'zilari:

Yelkanlar jamoasi

Raqamli telepatiya

Marianne restorani

Agar siz loyihangizda xuddi shunday "ko'rinish" ga erishmoqchi bo'lsangiz, siz to'g'ri yo'ldasiz.

Asosiy tushunchalar

Mana bizning o'yin rejamiz.

Butun ko'rish oynasini qoplash uchun fon o'lchami xususiyatidan foydalaning

CSS fon o'lchami xususiyatini qoplash uchun sozlash mumkin. Qopqoq qiymati brauzerga fon tasvirini uzunligi va kengligi bo'yicha avtomatik va mutanosib ravishda o'lchashni buyuradi, shunda u ko'rish oynasining kengligi/balandligiga teng yoki undan kattaroq qoladi.

Mobil qurilmalar uchun fon tasvirining kichikroq versiyasini olish uchun media so'rovidan foydalanish

Kichik ekran o'lchamlarida sahifani yuklash vaqtini qisqartirish uchun biz fon tasvirining kichikroq versiyasini olish uchun media so'rovidan foydalanamiz. Ammo bu shart emas va uni o'tkazib yuborish mumkin. Bu texnologiya usiz ajoyib ishlaydi.

Ammo shunga qaramay, mobil qurilmalar uchun fonning kichikroq versiyalaridan foydalanish yomon fikr emas va men nima uchun ekanligini tushuntiraman.
Misolda ishlatiladigan rasm taxminan 5500 x 3600 piksel o'lchamda.

Ushbu rezolyutsiya bilan biz hozirda ishlab chiqarilgan keng formatli monitorlarda butun ko'rish maydonini qamrab olishimiz afzalligi bor, ammo kamchilik bu tasvir o'lchamidir. Bu taxminan 1,7 MB.

Faqat fon tasvirini yuklash uchun shunchalik ko'p joy qoldirish har qanday holatda ham yaxshi fikr emas, mobil qurilmalarda esa bu juda yomon fikr. Bunga qo'shimcha ravishda, past piksellar soniga ega ekranlarda bunday ruxsat shunchaki kerak emas ( Bu haqda keyinroq aytib beraman).

Shunday qilib. Qani boshladik.

HTML

Belgilashdan sizga kerak bo'lgan hamma narsa quyida keltirilgan:

...Sahifangiz mazmuni...

Biz tana elementiga fon tasvirini belgilaymiz va shu bilan to'liq fon qoplamasiga erishamiz.

Biroq, bu usul har qanday blok elementida ishlaydi (masalan, div yoki form). Blok konteyneringizning kengligi-balandligi harakatchan bo'lsa, fon tasviri ham butun konteyner maydonini to'ldirish uchun o'lchamini o'zgartiradi.

CSS

Biz tana elementining xususiyatlarini quyidagicha e'lon qilamiz:

tana ( /* Fon rasmining joylashuvi */ fon-tasvir: url(images/background-photo.jpg); /* Fon rasmi gorizontal va vertikal markazlashtirilgan */ fon-pozitsiya: markaziy markaz; /* Fon takrorlanmaydi */ background-repeat: no-repeat; /* Fon ko'rish oynasida o'rnatiladi va shuning uchun kontent balandligi tasvir balandligidan oshib ketganda harakat qilmaydi */ background-attachment: fixed; /* Bu xususiyat o'z ichiga olgan konteyner hajmi o'zgarganda masshtabni o'zgartirish uchun fon */ background-size: cover; /* Fon rasmini yuklashda ko'rsatiladigan fon rangi */ background-color: #464646; )

Ushbu ro'yxatdagi eng muhim qiymat xususiyati:

fon o'lchami: qopqoq;

Bunga e'tibor qaratishga arziydi. Bu erda mo''jiza sodir bo'ladi. Ushbu qiymat-xususiyat juftligi brauzerga fon tasvirini shunday nisbatlarda o'lchashni buyuradiki, balandlik kengligi elementning balandligi kengligiga teng yoki undan katta bo'lib qoladi. ( Bizning holatlarimizda bu element- tana.)

Va bu erda mulk-qiymat juftligi bilan noxush holat yuzaga keladi. Agar fon tasviri tana elementining o'lchamlaridan pastroq piksellar soniga ega bo'lsa va bu sahifa ekranlarda ko'rsatilganda ham sodir bo'lishi mumkin. yuqori aniqlik, yoki sahifada tonnalab kontent mavjud bo'lganda, brauzer tasvirni kengaytiradi.

Va siz bilganingizdek, biz tasvirni haqiqiy hajmidan tashqariga cho'zganimizda, biz tasvir sifatini yo'qotamiz ( boshqacha aytganda, piksellanish paydo bo'ladi):

Tasvirni asl hajmiga qarab masshtablashtirganda tasvir sifati pasayadi.

Fonni tanlashda buni unutmang. Namoyish misolida biz 5500 x 3600 piksel o'lchamdagi fotosuratdan foydalanamiz katta ekranlar, va shuning uchun bu holatda shunga o'xshash narsa sodir bo'lishi dargumon.

Bizning fonimiz markazga mos kelishini ta'minlash uchun biz quyidagilarni e'lon qildik:

fon pozitsiyasi: markaziy markaz;

Bu masshtab o'qlarini ko'rish oynasi markaziga o'rnatadi.

Mana nima qilamiz. Sahifani pastga aylantirsak ham rasm joyida qolishiga ishonch hosil qilish uchun fon biriktirma xususiyatini fixed qilib belgilaymiz:

fon-ilova: belgilangan;

Namoyish misolida men variantni qo'shdim " ba'zi kontentni yuklab oling" sahifani aylanayotganda fonning harakatini kuzatishingiz uchun.

Siz qilishingiz kerak bo'lgan yagona narsa demo-ni yuklab olish va joylashishni aniqlash xususiyatlari (fon-ilova va fon-pozitsiya) bilan bir oz tajriba o'tkazish, ularning sahifa va fonning o'tish harakatlariga qanday ta'sir qilishini ko'rish.

Quyidagi mulk qiymatlari o'z-o'zidan tushunarli.

CSS qisqartmasi

Yuqorida, aniqlik uchun men CSS xususiyatlarini to'liq aniqladim.

Va qisqacha versiya shunday ko'rinadi:

tana (fon: url(background-photo.jpg) markaziy markaziy qopqoq takrorlanmaydi; )

Siz qilishingiz kerak bo'lgan yagona narsa url qiymatini rasmingiz yo'liga o'zgartirishdir.

Majburiy emas: fon tasvirining kichikroq versiyasini olish uchun media so'rovi

Pastroq piksellar soniga ega ekranlar uchun rasm o'lchamlarini mutanosib ravishda 768 dan 505 pikselgacha kamaytirish uchun bizga Photoshop kerak bo'ladi. Fayl hajmini kamaytirish uchun uni Smush.it orqali ham ishga tushirdim. Bu hajmni 1741 dan 114 kilobaytgacha kamaytirish imkonini berdi. Bu fayl hajmini 93% ga qisqartirdi.

Meni noto'g'ri tushunmang, lekin 114 kilobayt veb-dizaynning ba'zi turlari uchun foydalanish uchun hali ham juda ko'p. Va agar kerak bo'lsa, biz faqat o'sha 114 kilobaytni yuklaymiz, chunki statistik ma'lumotlarga qaraganda, ish stoli va mobil dizayn o'rtasida o'zaro kelishuvlar mavjud.

Va bu erda media so'rovining o'zi:

Media so'rovining asosiy qismi max-width: 767px xususiyati bo'lib, bizning holatlarimizda brauzerning ko'rish maydoni 767px dan katta bo'lsa, katta rasm ishlatiladi.

Ushbu usulning salbiy tomoni shundaki, agar siz brauzer oynasining o'lchamini, masalan, 1200px dan 640px ga (yoki aksincha) o'zgartirsangiz, kichikroq yoki kattaroq tasvir yuklanganda miltillovchi ekranni ko'rasiz.

Va bundan tashqari, ba'zilari tufayli mobil qurilmalar yuqori aniqlikda ishlashi mumkin - masalan, 1136 dan 640 pikselgacha bo'lgan Retina displeyli iPhone 5, kichikroq tasvir xunuk ko'rinadi.

Deyarli har bir mashhur sayt yaxshi tashqi ko'rinish. Veb-sayt dizaynining muhim qismi bu fon deb ataladigan fon bo'lib, uni har birimiz yaratishimiz yoki o'zgartirishimiz mumkin. Ushbu maqolada men sizga veb-saytga qanday fon qo'yish kerakligini aytaman.

Veb-saytlar uchun yangi fon yaratish

Vazifani bajarish uchun siz 4 usuldan birini qo'llashingiz mumkin:

• 1. Bir rang bilan fon
• 2. Teksturali fon
• 3. Gradient yordamida fon
• 4. Katta rasmdan fon

Bitta rang yordamida fon yarating

Bitta rangdan iborat sayt fonini yaratish yoki o'zgartirish uchun faylga o'tishingiz kerak style.css, unda qiymatni toping - tana (u saytning asosiy qismi uchun javobgardir). Endi siz fon rangi funksiyasini ro'yxatdan o'tkazishingiz kerak, agar u mavjud bo'lmasa va rang kodini ko'rsating. Agar veb-sayt uchun oq fon yaratish kerak bo'lsa, siz quyidagi kodni yozishingiz kerak bo'ladi:

fon rangi: #83C5E9; (misoldagi kabi ko'k fon)

Siz ranglarning to'liq ro'yxatini veb-saytda topishingiz mumkin - (STM). Rangni o'zgartirish uchun yo'g'on nuqtadan keyingi qiymatni o'zgartiring va harakatlaringizdan rohatlaning.

Tekstura yordamida fon yaratish

Bu usul, ayniqsa, mashhur Yaqinda, chunki u sayt uchun chiroyli fon yaratish imkonini beradi. To'qimalar oddiy, lekin juda chiroyli bo'lishi mumkin, shuning uchun ular tez-tez ishlatiladi. Har qanday teksturani ulash uchun uni saytingiz o'rnatilgan xostingdagi rasm papkasiga yuklashingiz kerak. Shundan so'ng siz quyidagi kodni yozishingiz kerak:

fon rangi: #537759;

fon tasviri: url (rasmlar/pattern.png);

Ushbu kodda rangni saqlash uchun tanish parametr (u yashil) va yashil to'qimalarni ulash uchun mas'ul bo'lgan element mavjud.

Gradient yordamida fon yaratish

CSS funktsiyalari yordamida ulangan har qanday tasvir gorizontal va vertikal ravishda (o'qlar bo'ylab) takrorlanishi mumkin. X Va Y). Bu imkoniyat o'z qo'llarimiz bilan sayt uchun har qanday oddiy fonni yaratishga imkon beradi. Buning uchun siz kengligi 1 megapikselli gradient yaratishingiz kerak (quyidagi rasmga qarang), uni rasm sifatida saqlashingiz va hostingingizga yuklashingiz kerak. Shundan so'ng siz kerakli kodni yozishingiz mumkin, xususan:

fon rangi: #83C5E9;

fon tasviri: url (rasmlar/gradient.jpg);

fon-takrorlash: takrorlash-x;

Ushbu to'plamda, ustuvorlik tartibida, biz qayta sug'urtalash uchun foydalaniladigan fon rangi uchun mas'ul bo'lgan funksiya mavjud. Shundan so'ng, gradientni ulash uchun mas'ul bo'lgan parametr va nihoyat, X o'qi bo'ylab gradientni takrorlash uchun mas'ul bo'lgan funksiya.

Veb-sayt fonida katta rasmdan foydalanish

Bu usul ikkinchi eng mashhurdir, chunki u fon yaratish uchun turli rasmlardan foydalanish imkonini beradi. Ushbu usulni amalga oshirish uchun siz saytning rasmlar papkasiga katta hajmdagi rasmni yuklashingiz va quyidagi kodni kiritishingiz kerak:

fon rangi: #000000;

fon tasviri: url (tasvirlar/tasvir sarlavhasi.jpg);

fon pozitsiyasi: markaziy tepa;

fon-takrorlash: takrorlanmaslik;

Agar birinchi ikkita parametr bilan hamma narsa aniq bo'lsa, unda oxirgi ikkitasini yopish kerak. Uchinchi funktsiya sizga tasvirni saytning markazida tuzatishga imkon beradi va oxirgi parametr butun sahifa tuzilishi bo'ylab uning takrorlanishini bloklaydi.

ucoz veb-saytlarida fonni o'zgartirish

Sayt uchun fon yaratishning ushbu usullari turli xil kontentni boshqarish tizimlarida qo'llanilishi mumkin, lekin saytlarda emas - ucoz. ucoz veb-sayti uchun fonni o'zgartirish uchun siz saytning boshqaruv paneliga o'tishingiz kerak, o'ting "Dizayn boshqaruvi", keyin esa "Shablonlarni tahrirlash".

Endi siz uslublar jadvalini (CSS) ochishingiz kerak, chiziqni toping "tana" va parametr "fon". Shundan so'ng siz havolani nusxalashingiz, uni Internet-brauzeringizga joylashtirishingiz kerak va siz fonda bo'lgan rasmga kirishingiz mumkin.

Yangi fondan foydalanish uchun uni yuklab olishingiz kifoya Fayl menejeri. Shu bilan birga, yangi fon tasvirining nomi o'zgarishdan oldingi bilan bir xil ekanligiga ishonch hosil qiling. Ishingizni saqlang va bajarilgan ishni ko'rish uchun veb-saytga o'ting.

Sayt uchun fonni HTMLga o'zgartirish

Agar siz HTML saytida rasm yordamida fon yaratmoqchi bo'lsangiz, koddagi qatorni kiriting:

Va agar siz saytning fonini rang yordamida yaratmoqchi bo'lsangiz, chiziq quyidagicha ko'rinishi kerak:

Bu bizning hikoyamizni yakunlaydi. Endi siz veb-sayt uchun qanday fon yaratishni bilasiz. Baxtli loyihalar!

Har qanday xona, agar uning qavati qimmatbaho fors gilami bilan qoplangan bo'lsa, ancha yaxshi ko'rinadi. Xo'sh, nima uchun veb-saytingiz yomonroq? Ehtimol, uning qavatini qimmatbaho, oqlangan qo'lda ishlangan gilam bilan "qoplash" vaqti keldi. Keling, veb-sayt uchun qanday fon yaratishni batafsil ko'rib chiqaylik:

Sayt uchun fon

Shunday bo'ladi eski dizayn Men allaqachon saytdan charchadim. Va men yangi va mazali narsani xohlayman. A yangi dizayn o'z qo'lingiz bilan pishirsangiz shunday bo'ladi.

Ammo resursning butun dizaynini o'zingiz butunlay o'zgartirish - bu minnatdorchiliksiz ish. Va har bir kishining qo'llari bu vazifa uchun to'g'ri o'qitilmagan. Shuning uchun, eski shablonni yangilashning eng oson yo'li resursning fon rangini yoki uning fon tasvirini o'zgartirishdir.

Veb-saytdagi fonni o'zgartirishning bir necha yo'li mavjud. Buning uchun CSS yoki html imkoniyatlaridan foydalaniladi. Ammo fon bilan ishlashning ko'pgina xususiyatlari ushbu veb-texnologiyalarda bir xil nom va qo'llash usuliga ega.

Html da fon bilan ishlash asoslari

Fon sifatida bir nechta elementlardan foydalanish mumkin:

• Rang;
• Fon rasmi;
• Teksturali tasvir.

Keling, ularning har biridan foydalanishni batafsil ko'rib chiqaylik.

Sayt uchun fon rangini belgilash uchun uslub atributining fon rangi xususiyatidan foydalaning. Ya'ni, veb-sahifaning asosiy rangini belgilash uchun uni teg ichiga yozish kerak . Masalan:

Veb-sayt foni #55D52B

O'n oltilik rang kodiga qo'shimcha ravishda kalit so'z yoki RGB formatidagi qiymat qo'llab-quvvatlanadi. Misollar:

Veb-sayt foni rgb(23,113,44)

Veb-sayt foni yashil

yordamida fon rangini o'rnating kalit so'zlar boshqa ikki usul bilan solishtirganda bir qator cheklovlarga ega.

HTML ranglarni o'rnatish uchun faqat 16 ta kalit so'zni qo'llab-quvvatlaydi. Mana ulardan bir nechtasi: oq, qizil, ko'k, qora, sariq va boshqalar.

Shuning uchun, html sayti uchun fonni o'rnatish uchun o'n oltilik yoki RGB formatidan foydalanish yaxshiroqdir.

Rang tanlashdan tashqari, boshqa moslashtirish imkoniyatlari ham mavjud. Agar fon rangi xususiyati shaffof ga o'rnatilgan bo'lsa, sahifaning foni shaffof bo'ladi. Ushbu qiymat sukut bo'yicha ushbu xususiyatga tayinlangan.

Endi sayt uchun fon tasvirini o'rnatish uchun gipermatn tilining imkoniyatlarini ko'rib chiqamiz. Buni background-image xususiyati yordamida amalga oshirish mumkin.

Koddan ko'rinib turibdiki, rasm qavs ichida ko'rsatilgan url yo'li orqali bog'langan. Ammo hamma rasmlar shunchalik katta emaski, ularning o'lchamlari butun ekran maydonini to'ldiradi. Keling, kichikroq rasm qanday ko'rinishini ko'rib chiqaylik.

Aytaylik, biz she'riyat haqida veb-sayt ishlab chiqyapmiz va biz Pegasus tasviridan fon sifatida foydalanishimiz kerak. Qanotli ot shoirning ijodiy fikr erkinligini ifodalaydi!

Tasvirni ekranning o'rtasida bir marta ko'rsatishimiz kerak. Ammo, afsuski, brauzer bizning yuksak istaklarimizni tushunmaydi. Va u saytning fonida ekran maydoni sig'ishi mumkin bo'lgan ko'p marta kichikroq tasvirni ko'rsatadi:

Ehtimol, qanotli to'rtta jilmaygan ot shoirlar uchun juda ko'p ilhom manbai bo'ladi. Shuning uchun biz Pegasusimizni klonlashni taqiqlaymiz. Buni fonni takrorlash xususiyatidan foydalanib qilamiz. Mumkin qiymatlar:

• takrorlash-x - fon tasvirini gorizontal ravishda takrorlash;
• takrorlash-y - vertikal;
• takrorlash - ikkala o'qda;
• takrorlash yo'q - takrorlash taqiqlanadi.

Ro'yxatda keltirilgan variantlar orasida bizni oxirgisi qiziqtiradi. Saytning fonini o'zgartirishdan oldin biz uni kodimizda ishlatamiz:

Lekin, albatta, bizning flayerimiz ekranning o'rtasida joylashgan bo'lsa yaxshi bo'lardi. Fon-pozitsiya xususiyati aniq sahifadagi fon tasvirini joylashtirish uchun mo'ljallangan. Joylashuv koordinatalarini bir necha usul bilan o'rnatishingiz mumkin:

• Kalit so'z ( yuqori, pastki, markaz, chap, o'ng);
• Foiz - hisoblash yuqori chap burchakdan boshlanadi;
• O'lchov birliklarida (piksellarda).

Keling, eng oddiy markazlashtirish variantidan foydalanamiz:

O'tkazish paytida siz rasmning o'rnini tuzatishingiz kerak bo'ladi. Shuning uchun, saytning fonida tasvirni yaratishdan oldin, maxsus xususiyatdan foydalaning fon-ilova . U qabul qiladigan qiymatlar:

• aylantirish;


• belgilangan.

Bizga oxirgi qiymat kerak. Endi bizning misol kodimiz quyidagicha ko'rinadi:

Veb-sayt tekstura fon

Birinchi misolda biz fon uchun katta va chiroyli cho'l landshaftidan foydalanganmiz. Ammo bunday go'zallik uchun siz to'liq to'lashingiz kerak. Tasvirning og'irligi yuqori sifatli, bir necha megabaytga yetishi mumkin.

Ushbu hajm hech qanday tarzda yuqori tezlikdagi Internetga ulangan brauzerning sahifani yuklash tezligiga ta'sir qilmaydi. Lekin nima haqida mobil internet, bir necha "metrlarni" yuklash uchun uzoq vaqt kerak bo'ladi?

Bu muammolarning barchasi teksturali fon yordamida hal qilinadi. U tekstura namunasi sifatida kichik tasvirdan foydalanadi. Ko'p marta takrorlangan bo'lsa ham, chizma faqat bir marta yuklanadi.

Trepachev D.P. 2012-2020

Talabalarga: 6-yanvargacha ta'tildaman, ta'tilda imkon qadar javob beraman,
ba'zan bir necha kunga g'oyib bo'lishim mumkin

Layout JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsing Asosiy oʻquv qoʻllanma HTML Maʼlumotnomasi CSS havolasi OOP va MVC qoʻllanmasi Video darsliklari Asosiy qoʻllanma.

fon-ilova xususiyati

Mulk fon-ilova aylantirish usulini belgilaydi fon rasmi element: matn yoki matn bilan birga rasm ustida siljiydi.

Sintaksis

Selektor (fon-ilova: qattiq | aylantirish | mahalliy; )

Qiymatlar

Birlamchi qiymat: aylantiring.

Misol. O'tkazish qiymati

Endi mulk fon-ilova sozlang aylantiring. Elementni vertikal ravishda aylantiring - siz fon bilan birga matn aylantirilishini ko'rasiz:

tana (fon-ilova: aylantirish; fon-tasvir: url("bg.png"); ) #elem (kenglik: 400px; chekka: 0 avtomatik; matnni tekislash: oqlash; shrift-og'irligi: qalin; shrift o'lchami: 20px;)

Misol. O'tkazish qiymati

Va endi mulk fon-ilova sozlang belgilangan. Elementni vertikal aylantiring va matn fonda siljishini ko'rasiz:

tana (fon-ilova: qattiq; fon-tasvir: url("bg.png"); ) #elem (kenglik: 400px; chekka: 0 avtomatik; matnni tekislash: oqlash; shrift-og'irligi: qalin; shrift o'lchami: 20px;)