Својство ЦСС Фонт се користи за контролу изгледа текстова. Коришћењем својства ЦСС фонта можете променити величину текста, боју, стил и још много тога. Већ сте научили како да подебљате или подвучете текст. Овде ћете такође знати како да промените величину фонта користећи проценат.
Ово су неки важни атрибути фонта:
1) Боја ЦСС фонта
Боја ЦСС фонта је самостални атрибут у ЦСС-у иако се чини да је део ЦСС фонтова. Користи се за промену боје текста.
Постоје три различита формата за дефинисање боје:
- По имену боје
- По хексадецималној вредности
- Би РГБ
У горњем примеру смо дефинисали све ове формате.
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> Тестирајте одмах Излаз:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) Величина ЦСС фонта
ЦСС својство величине фонта се користи за промену величине фонта.
Ово су могуће вредности које се могу користити за подешавање величине фонта:
| Вредност величине фонта | Опис |
|---|---|
| кк-мала | користи се за приказ изузетно мале величине текста. |
| к-мала | користи се за приказ изузетно мале величине текста. |
| мали | користи се за приказ мале величине текста. |
| средње | користи се за приказ средње величине текста. |
| велики | користи се за приказ велике величине текста. |
| к-велики | користи се за приказ изузетно велике величине текста. |
| кк-велики | користи се за приказ изузетно велике величине текста. |
| мањи | користи се за приказ релативно мање величине текста. |
| већи | користи се за приказ релативно веће величине текста. |
| величина у пикселима или % | користи се за подешавање вредности у процентима или у пикселима. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>Тестирајте одмах
Излаз:
Ова величина фонта је изузетно мала.
Ова величина фонта је изузетно мала
Ова величина фонта је мала
Ова величина фонта је средња.
Ова величина фонта је велика.
Ова величина фонта је изузетно велика.
Ова величина фонта је изузетно велика.
Ова величина слова је мања.
Ова величина фонта је већа.
Ова величина фонта је подешена на 200%.
Ова величина фонта је 20 пиксела.
4) ЦСС стил фонта
Својство ЦСС стила фонта дефинише тип фонта који желите да прикажете. Може бити курзив, коси или нормалан.
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> Тестирајте одмах Излаз:
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) Варијанта ЦСС фонта
Својство варијанте ЦСС фонта одређује како да подесите варијанту фонта елемента. Може бити нормално и са малим словима.
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> Тестирајте одмах Излаз:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Тежина ЦСС фонта
ЦСС својство тежине фонта дефинише тежину фонта и одређује колико је фонт подебљан. Могуће вредности тежине фонта могу бити нормалне, подебљане, подебљане, светлије или бројчане (100, 200... до 900).
Овај фонт је подебљан.
Овај фонт је маснији.
Овај фонт је лакши.
Овај фонт има тежину од 100.
Овај фонт има тежину од 200.
Овај фонт има тежину од 300.
Овај фонт има тежину од 400.
Овај фонт има тежину од 500.
Овај фонт има тежину од 600.
Овај фонт има тежину од 700.
Овај фонт има тежину од 800.
Овај фонт има тежину од 900.
Тестирајте одмахИзлаз:
Овај фонт је подебљан.
Овај фонт је маснији.
Овај фонт је лакши.
јава веза мискл
Овај фонт има тежину од 100.
Овај фонт има тежину од 200.
Овај фонт има тежину од 300.
Овај фонт има тежину од 400.
Овај фонт има тежину од 500.
Овај фонт има тежину од 600.
Овај фонт има тежину од 700.
Овај фонт има тежину од 800.
Овај фонт има тежину од 900.