5. Matnni formatlash(1)

Shrift xossalari (stillari)
CSS 2.1
font-family
font-size
font-weight
font-style
font-variant
font
CSS 3
font-stretch
font-variant-ligatures
font-variant-position
font-variant-caps
font-variant-numeric
font-variant-alternates
font-variant-east-asian
font-size-adjust
font-kerning
font-feature-settings
font-language-override
QODIRBEK MAXAROV

font-family
body {
font-family: Arial;
}
span {
font-family: Courier, monospace;
}
p {
font-family: "Indie Flower", Verdana, sans-serif;
}
...
Sarlavha
Sarlavha
va span
Lorem ipsum dolor sit amet consectetur
adipisicing elit.

Shriftlar
Shriftlarni yuklab olish uchun tavsiya qilinadigan saytlar:
https://fonts.google.com/
https://www.fontsquirrel.com/
https://www.fontspring.com/
QODIRBEK MAXAROV

Shriftlar
Shriftlarni yuklab olish uchun tavsiya qilinadigan saytlar:
https://fonts.google.com/
https://www.fontsquirrel.com/
https://www.fontspring.com/
QODIRBEK MAXAROV

Shriftlar
Shriftlarni yuklab olish uchun tavsiya qilinadigan saytlar:
https://fonts.google.com/
https://www.fontsquirrel.com/
https://www.fontspring.com/
QODIRBEK MAXAROV

Shrift
Formatlari:
.ttf
.svg
.eot
.woff
.woff2
QODIRBEK MAXAROV

QODIRBEK MAXAROV

Shriftni online ishlatish (Google Fonts)
Ulashda:
yoki
<br> @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Martel+Sans:wght@400;600;700;800;900&family=Open+Sans&family=PT+Mono&family=Rock+Salt&display=swap');<br>
Ishlatishda:
font-family: 'Indie Flower', cursive;
font-family: 'Martel Sans', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'PT Mono', monospace;
font-family: 'Rock Salt', cursive;
QODIRBEK MAXAROV

@font-face qoidasi
@font-face {
font-family: 'Font name';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.woff2') format('woff2'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
...
p {
font-family: 'Font name', other_fonts_or_types;
}

font-family
@font-face {
font-family: 'Indie Flower';
src: url('fonts/indie-flower/IndieFlower-Regular.ttf') format('truetype');
}
body {
font-family: Arial;
}
span {
font-family: Courier, monospace;
}
p {
font-family: 'Indie Flower', cursive;
}
...
Sarlavha
Sarlavha
va span
Lorem ipsum dolor sit amet consectetur
adipisicing elit.

font-family
@font-face {
font-family: 'Indie Flower';
src: url('fonts/indie-flower/IndieFlower-Regular.ttf') format('truetype');
}
body {
font-family: Arial;
}
span {
font-family: Courier, monospace;
}
p {
font-family: 'Indie', cursive;
}
...
Sarlavha
Sarlavha
va span
Lorem ipsum dolor sit amet consectetur
adipisicing elit.

Shrift oilalari
serif
Shriftlar: Times, Times New Roman, Georgia
sans-serif
Shriftlar: Arial, Arial Black, Verdana, Trebuchet MS, Helvetica, Geneva
monospace
Shriftlar: Courier, Courier New, Andale Mono
cursive
Shriftlar: Apple Chancery, Zapf-Chancery, Comic Sans
fantasy
Shriftlar: Impact, Western

Shrift stillari
font-size – shrift o'lchami
Qiymatlari: o’lcham | foiz| xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | inherit
font-weight – shrift qalinligi
Qiymatlari: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
font-style – shrift ko'rinishi
Qiymatlari: normal | italic | oblique | inherit
font-variant – shrift ko'rinishi (katta kichik harflar, css3 da font-variant-X qoidalar)
Qiymatlari: normal | small-caps | inherit
QODIRBEK MAXAROV

font qisqa stil formati
font: [font-style || font-weight || font-stretch || font-variant] font-size [/line-height] font-family;
h1 {
font: 18pt "Times New Roman", Georgia, serif;
}
h2 {
font: bold small-caps 1.25em sans-serif;
}
h3 {
font: oblique bold 1.5em/1.8em Georgia, sans-serif;
}
h4 {
font: italic bold 1.5em/1em Georgia, sans-serif;
}

Matn stillari
line-height – qator uzunligi
Qiymatlari: son | uzunlik | foiz | normal | inherit
QODIRBEK MAXAROV
text-indent – birinchi qatordan qoldiriladigan joy
Qiymatlari: uzunlik | foiz | inherit

Matn stillari
text-align – matnni o'zi joylashgan sohadagi gorizontal joylashuvi
Qiymatlari: left | right | center | justify | inherit
text-decoration – matnga qo'shimcha dekoratsiya berish
Qiymatlari: text-decoration-line text-decoration-color text-decoration-style;
text-decoration-line: none | underline | overline | line-through
text-decoration-color:
text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit
text-transform – matnni transformatsiya qilish usuli
Qiymatlari: none| capitalize| lowercase | uppercase | inherit
QODIRBEK MAXAROV

Matn stillari
.my1 {
text-decoration: overline red solid;
text-transform: capitalize;
}
.my2 {
text-decoration: underline red wavy;
text-transform: lowercase;
}
.my3 {
text-decoration: line-through red dashed;
text-transform: uppercase;
}
...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
QODIRBEK MAXAROV

Matn stillari
letter-spacing – belgilar orasidagi masofa
Qiymatlari: uzunlik | normal | inherit
word-spacing – so'zlar orasidagi masoga
Qiymatlari: uzunlik | normal | inherit
QODIRBEK MAXAROV

Matnda soya
text-shadow – matnga soya berish uchun ishlatiladi (vergul bilan bir nechta qiymat berish mumkin)
Qiymatlari: 'horizontal offset' 'vertical offset' 'blur radius' 'color' | none
.s1 {
color: green;
text-shadow: .2em .2em silver;
}
.s2 {
color: green;
text-shadow: -.1em -.3em .1em silver;
}
.s3 {
color: green;
text-shadow: -.1em -.1em silver, 0 0 0.5em red;
}
QODIRBEK MAXAROV

Ro'yxatlar stillari
list-style-type – marker turi
Qiymatlari: none | disc | circle | square | decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-latin | upper-latin | lower-roman | upper-roman | lower-greek
list-style-position – marker joylashuvi
Qiymatlari: inside | outside
list-style-image – marker o'rniga rasm qo'yish
Qiymatlari: url(location) | none
QODIRBEK MAXAROV

Ro'yxatlar stillari
.lgi {
list-style-type: lower-greek;
list-style-position: inside;
}
.lgo {
list-style-type: decimal-leading-zero;
list-style-position: outside;
}
.lgc {
list-style-type: none;
list-style-image: url('images/uz.png');
}
QODIRBEK MAXAROV

Rasmli shriftlar
https://fontawesome.com/
https://fontello.com/
https://icofont.com/
https://icomoon.io/
QODIRBEK MAXAROV

Rasmli shriftlar
.my1 {
font-size: 34pt;
color: purple;
}
.my2 {
font-size: 16pt;
color: #34aa34;
}
.my3 {
font-size: 70pt;
color: blue;
}
...
...
QODIRBEK MAXAROV