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.
FONT-FAMILY NI O’RNATISH.
Quyidagi misolda, elementning font-family xossasi qanday qilib o’rnatilishi ko’rsatilgan. Ixtiyoriy font family nomida mumkin bo’lgan qiymat bo’lishi mumkin.
html>
style = "font-family:georgia,garamond,serif;">
Bu matnga georgia, garamond yoki serif shriftlaridan birortasi avtomatik ravishda belgilanadi,
bu shriftlardan qaysi birini olishi sizning
sistemangizda ulardan qaysi biri bor ekanligiga bog'liq.
style = "font-style:italic;">
Bu matnga italic shriftini belgilaydi.
style = "font-variant:small-cups;">
Bu matnga small-cups shriftini belgilaydi.
style = "font-weight:bold;"> Bu shrift qalin yozuvda
style = "font-weight:bolder;"> Bu shrift qalinroq yozuvda
style = "font-weight:500;"> Bu shrift 500 qalinlikda
style = "font-weight:lighter;"> Bu shrift ingichka qalinlikda
style = "font-weight:900;"> Bu shrift 900 qalinlikda
style = "font-weight:100;"> Bu shrift 100 qalinlikda
style = "font-size:20px;"> Bu shrift o'lchami 20 pixelda
style = "font-size:small;"> Bu shrift kichik yozuvda
style = "font-size:large;"> Bu shrift katta yozuvda
style = "font-size:x-large;"> Bu shrift x-large yozuvda
style = "font-size:xx-large;"> Bu shrift xx-large yozuvda
style = "font-size:x-small;"> Bu shrift x-small yozuvda
style = "font-size:xx-small;"> Bu shrift xx-small yozuvda
style = "font-size-adjust:0.91;">
Bu matn font-size-adjust qiymatidan foydalandi.
Agar bu ishlashda ko'rinmasa sizning kompyuteringiz foydalanilgan shriftning
kengaytirilgan versiyasiga ega bo'lmasligi mumkin.
textning barcha xossalaroga bir marta murojaat qilish
style = "color:red;">
Bu matn qizil rangda yozilgan.
style = "direction:rtl;">
Bu matn o'ng tarafdan chap tarafga ifodalangan.
style = "letter-spacing:5px;">
Bu matn harflari o'rtasida bo'sh joylar mavjud.
style = "word-spacing:10px;">
Bu matn so'zlari o'rtasida bo'sh joylar mavjud.
style = "text-indent:5cm;">
Bu matn birinchi qatori 1 sm lik abzasga
ega bo'ladi va bu qator uning haqiqiy o'rnida qoldiriladi. Bu CSS ning text-indent xossasidan qilinadi.
style = "text-align:right;">
bu matn o'ng tomondan o'rnatilgan.
style = "text-align:center;">
bu matn o'rtadan o'rnatilgan.
style = "text-align:left;">
bu matn chap tomondan o'rnatilgan.
style = "text-align:justify;"> Bu justify
style = "text-decoration:underline;"> Bu matnnning tagiga chizilgan.
style = "text-decoration:line-through;"> Bu matnnning ustiga chizilgan.
style = "text-decoration:overline;"> Bu matnnning ustiga chizilgan.
style = "text-decoration:blink;">
bu matn blink (ko'z qisish0) xususiyatiga ega bo'ladi.
style = "text-decoration:none;"> None
style = "text-transform:capitalize;"> bu kapital qilingan
style = "text-transform:uppercase;"> bu matn katta harflarda yozilgan
style = "text-transform:lowercase;">
BU MATN KICHIK HARFLARDA YOZILGAN.
bu matn siniq qatorga ega.
style = "text-shadow:4px 4px 8px blue;">
agar sizning brouzeringiz text-shadow ni qo'llab quvvatlasa, bu matn soyaga ega bo'ladi.
style = "border:0px;" src = "1.jpg" />
style = "border:5px dashed red;" src = "pictures/2.jpg" />
style = "border:1px solid red; height:200px;" src = "pictures/1.jpg">
/>
style = "border:1px solid blue; height:40%;" src = "pictures/1.jpg">
style = "border:1px solid red; width:100px;" src = "pictures/1.jpg">
/>
style = "border:1px solid blue; width:5%;" src = "pictures/1.jpg">
style = "border:1px solid blue; width:25%;" src = "pictures/1.jpg">
style = "border:10px solid green; -moz-opacity:0.1; filter:alpha(opacity=5);" src = "pictures/1.jpg">
style = "border:10px solid green; -moz-opacity:0.9; filter:alpha(opacity=90);" src = "pictures/1.jpg">
href = ""> Link
href = ""> Link
href = ""> Link
border-style:dotted; border-width:3px; border-color:green; padding:2px;
border-style:solid; border-width:5px; border-color:red; padding:5px;
