Css fonts. Css shriftlari

Toshkent axborot texnologiyalari universiteti Samarqand filiali Kompyuter injiniringi fakulteti Kompyuter injiniringi yoʻnalishi 2 kurs ki21-02-gurux talabasi Otamurodov Ogʻabekning Wep dasturlashga kirish fanidan qayta topshirish uchun bajargan amaliy topshirigʻi

CSS – FONTS. CSS SHRIFTLARI.

Bu bo’limda qanday qilib mundarija shriftlari o’rnatilishi o’rgatiladi, HTML

Da bor elementlar orqali. Elementning quyidagi shrift xosalari bilan o’rnatishingiz

Mumkin.

• 
  Font-family xossasi shriftning yuzini o’zgartirishda foydalaniladi.
  

• 
  Font-style xossasi italic yoki oblique shriftlarini yasashda foydalaniladi.
  

• 
  Font-variant xossasidan small-caps effektini yaratishda foydalaniladi.
  

• 
  Font-weight xossasidan shrift ko’rinishlarining qalin yoki ingichka o’sishi
  

Yoki kamayishida foydalaniladi.

• 
  Font-size xossasidan shriftning o’lchami o’sishi yoki kamayishida
  

Foydalaniladi.

• 
  Font xossasidan qisqalikda foydalaniladi, boshqa shriftlar xossalari
  

Nomerlarini aniqlaydi.

Ish jarayonini tezlashtirish uchun 2017-yilning 5 ta eng yaxshi CSS protsessorlari.

CSS protsessorlari CSS dasturchilari ishini yanada qiziqarli qilish uchun maxsus ishlab chiqilgan. Ular qayta ishlatish imkoniyati bilan oson tahrirlanadigan va ishonchli kod yozish imkonini beradi.

Boshqacha qilib aytadigan bo’lsak, CSS preprotsessori yangi xususiyatlarga ega CSS-ga qo’shimcha: o’zgaruvchilar, kengaytmalar, importlar va boshqalar.

Ushbu maqolada men 2017 yilning eng yaxshi 5 ta CSS preprotsessorlari haqida gapiraman.

1. 
   Sass
   

SASS – bu ulkan hamjamiyat va kuchli funksionallikka ega eng mashhur preprotsessor. U faqat Ruby bilan birgalikda ishlaydi va o’rganish juda oson. Bootstrap, Foundation va materialize kabi ko’pgina front-end ramkalar SASS yordamida qurilgan.
SASS ikkita sintaksisga ega:

.sass
.scss

2. 
   Stylus
   

Stylus CSS-ni dinamik ravishda yaratish uchun yana bir ajoyib preprotsessordir. Agar siz jingalak qavslar, vergullar va nuqta-vergullarni qoldirmoqchi bo’lsangiz, bu siz uchun bo’lishi mumkin. Eng yaxshi tanlov. Stylus Node.js tomonidan quvvatlanadi va uni o’rnatish va ishlatish juda oson. U to’yinganlik () kabi ko’plab maxsus funktsiyalarga ega. Boshqa yetakchi kompilyatorlar tomonidan taqdim etilgan barcha funksiyalardan ham foydalanishingiz mumkin.

03.Kamroq

Less, shuningdek, Less.js yoki Less CSS sifatida ham tanilgan, yana bir yetakchi CSS preprotsessoridir. Agar sizga o’zgaruvchilar, ichki uslublar va boshqalar kabi standart funktsiyalar kerak bo’lsa, bu ajoyib tanlovdir. Ushbu Javascript kutubxonasi dastlab Ruby-da yozilgan.
04 Stylecow
Stylecow – bu npm yordamida o’rnatilishi mumkin bo’lgan Node-da yozilgan preprotsessor. Unda plaginlarni osongina yaratishingiz mumkin bo’lgan kuchli API mavjud.

05. CSS Crush

PHP da o’rnatilgan preprotsessorga aylanadi ajoyib variant PHP dasturchilari uchun, chunki u ko’plab platformalarda ishlaydi. CSS-Crush barcha odatiy protsessor xususiyatlariga ega (o’zgaruvchilar, ichki uslublar va boshqalar).
CSS preprotsessorlari qanday paydo bo’lgan
Ushbu texnologiyaning xususiyatlarini yaxshiroq tushunish uchun veb-sahifalarning vizual ko’rinishining rivojlanish tarixiga qisqacha to’xtalib o’tamiz.

Internetdan ommaviy foydalanish endigina boshlanganida, uslublar jadvallari mavjud emas edi. Hujjatlar faqat brauzerlarga bog’liq edi. Ularning har birining o’ziga xos uslublari bor edi, ular ma’lum teglarni qayta ishlash uchun ishlatilgan. Shunga ko’ra, qaysi brauzerda ochganingizga qarab, sahifalar boshqacha ko’rinardi. Natijada tartibsizlik, tartibsizlik, ishlab chiquvchilar uchun muammolar.

1994 yilda norvegiyalik olim Xokon Li bezatish uchun ishlatilishi mumkin bo’lgan uslublar jadvalini ishlab chiqdi. Ko’rinish HTML hujjatidan alohida sahifalar. G’oya W3C konsorsiumi vakillariga yoqdi va darhol uni takomillashtirishga kirishdilar. Bir necha yil o’tgach, CSS spetsifikatsiyasining birinchi versiyasi nashr etildi. Keyin u doimo takomillashtirildi, takomillashtirildi ... Lekin kontseptsiya bir xil bo’lib qoldi: har bir uslubga ma’lum xususiyatlar beriladi.

CSS jadvallaridan foydalanish har doim muammoli bo’lib kelgan. Misol uchun, tartib dizaynerlari ko’pincha xususiyatlarni saralash va guruhlashda qiyinchiliklarga duch kelishdi va meros ham unchalik oddiy emas.

Va keyin 2000-yillar keldi. Professional front-end ishlab chiquvchilari egiluvchan bo’lgan belgilar bilan tobora ko’proq shug’ullana boshladilar dinamik ish uslublar bilan. O’sha paytda mavjud bo’lgan CSS yangi brauzer funktsiyalari uchun prefiks va kuzatuvni qo’llab-quvvatlashni talab qildi. Keyin JavaScript va Ruby bo’yicha mutaxassislar oldindan protsessorlarni – CSS uchun yangi xususiyatlarni qo’shadigan qo’shimchalarni yaratish bilan shug’ullanishdi.

Yangi boshlanuvchilar uchun CSS: Preprotsessorlarning xususiyatlari

Ular bir nechta funktsiyalarni bajaradilar:

Brauzer prefikslari va xakerlarini birlashtirish;

Sintaksisni soddalashtirish;
Ichki o’rnatilgan selektorlar bilan xatosiz ishlash imkoniyatini yaratish;
Uslublar mantiqini yaxshilash.
Mashhur CSS protsessorlari. Sass
2007 yilda ishlab chiqilgan. Dastlab, u HTML shablonini yaratish mexanizmi Haml ning tarkibiy qismi edi. Ruby on Rails ishlab chiquvchilari CSS elementlari ustidan yangi nazoratni o’zlashtirib, uni hamma joyda tarqata boshladilar. Sass hozirda har qanday preprotsessorga kiritilgan juda ko’p funktsiyalarga ega: o’zgaruvchilar, joylashtirish selektorlari, miksinlar (keyinchalik, siz ularga argumentlar qo’sha olmadingiz).

Sassda o’zgaruvchilarni e’lon qilish

O’zgaruvchilar $ belgisi bilan e’lon qilinadi. Siz ularda xususiyatlarni va ularning to’plamlarini saqlashingiz mumkin, masalan: “$borderSolid: 1px qattiq qizil;”. Ushbu misolda biz borderSolid deb nomlangan o’zgaruvchini e’lon qildik va unda 1px qattiq qizil qiymatini saqladik. Endi, agar CSS-da biz 1px kenglikdagi qizil chegara yaratishimiz kerak bo’lsa, xususiyat nomidan keyin ushbu o’zgaruvchini belgilang. E’lon qilingandan so’ng, o’zgaruvchilarni o’zgartirib bo’lmaydi. Bir nechta o’rnatilgan funktsiyalar mavjud. Masalan, #FF5050 qiymati bilan $redColor o’zgaruvchisini e’lon qilaylik. Endi CSS kodida, ba’zi bir elementning xususiyatlarida biz shrift rangini o’rnatish uchun foydalanamiz: p ( rang: $redColor; ). Rang bilan tajriba qilishni xohlaysizmi? Qoraytirish yoki yoritish funksiyalaridan foydalaning. Bu shunday amalga oshiriladi: p ( rang: qorong’i($redColor, 20%); ). Bu redColorni 20% engilroq qiladi.

Xulosa
Agar izlayotgan bo’lsangiz eng yaxshi css preprotsessor, siz Internetda juda ko’p turli xil variantlarni topasiz. Menimcha, yangi boshlanuvchilar uchun eng yaxshi variantlar SASS va Stylus.

Mutlaqo barcha tajribali maket dizaynerlari preprotsessorlardan foydalanadilar. Hech qanday istisno yo’q. Agar siz ushbu faoliyatda muvaffaqiyat qozonishni istasangiz, ushbu dasturlar haqida unutmang. Bir qarashda, ular yangi boshlanuvchilarda sokin dahshatga olib kelishi mumkin – bu allaqachon dasturlashga juda o’xshash! Darhaqiqat, siz CSS protsessorlarining barcha xususiyatlarini taxminan bir kunda va agar urinib ko’rsangiz, hatto bir necha soat ichida aniqlashingiz mumkin. Kelajakda ular hayotingizni sezilarli darajada soddalashtiradi.