Свойството CSS Font се използва за контролиране на външния вид на текстовете. Чрез използването на CSS свойството за шрифт можете да промените размера на текста, цвета, стила и други. Вече научихте как да направите текст удебелен или подчертан. Тук ще знаете също как да промените размера на шрифта си с помощта на процент.
Това са някои важни атрибути на шрифта:
1) Цвят на CSS шрифта
Цветът на CSS шрифта е самостоятелен атрибут в CSS, въпреки че изглежда, че е част от CSS шрифтовете. Използва се за промяна на цвета на текста.
Има три различни формата за определяне на цвят:
- По име на цвят
- По шестнадесетична стойност
- Чрез RGB
В горния пример сме дефинирали всички тези формати.
java формат низ
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) Размер на CSS шрифта
CSS свойството размер на шрифта се използва за промяна на размера на шрифта.
Това са възможните стойности, които могат да се използват за задаване на размера на шрифта:
| Стойност на размера на шрифта | Описание |
|---|---|
| хх-малък | използвани за показване на изключително малкия размер на текста. |
| х-малък | използва се за показване на изключително малък размер на текста. |
| малък | използва се за показване на малък размер на текста. |
| среден | използва се за показване на текст със среден размер. |
| голям | използва се за показване на голям текст. |
| x-голям | използва се за показване на изключително голям размер на текста. |
| хх-голям | използва се за показване на изключително голям размер на текста. |
| по-малък | използвани за показване на сравнително по-малък размер на текста. |
| по-голям | използвани за показване на сравнително по-голям текст. |
| размер в пиксели или % | използва се за задаване на стойност в проценти или в пиксели. |
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>Тествайте сега
Изход:
Този размер на шрифта е изключително малък.
Този размер на шрифта е изключително малък
Този размер на шрифта е малък
Този размер на шрифта е среден.
Този размер на шрифта е голям.
Този размер на шрифта е изключително голям.
imessage игри за android
Този размер на шрифта е изключително голям.
Този размер на шрифта е по-малък.
Този размер на шрифта е по-голям.
Този размер на шрифта е зададен на 200%.
Този размер на шрифта е 20 пиксела.
4) CSS стил на шрифта
Свойството CSS Font style определя какъв тип шрифт искате да показвате. Може да е курсив, наклонен или нормален.
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) Вариант на CSS шрифт
Свойството за вариант на шрифта на CSS указва как да зададете вариант на шрифт на елемент. Може да е нормално и с малки букви.
подниз низ java
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) Тегло на CSS шрифта
Свойството за тегло на шрифта на CSS определя теглото на шрифта и указва колко удебелен е даден шрифт. Възможните стойности на теглото на шрифта могат да бъдат нормални, удебелени, по-удебелени, по-светли или число (100, 200..... до 900).
Този шрифт е удебелен.
Този шрифт е по-удебелен.
Този шрифт е по-светъл.
Този шрифт е с тегло 100.
Този шрифт е с тегло 200.
Този шрифт е с тегло 300.
Този шрифт е с тегло 400.
Този шрифт е с тегло 500.
Този шрифт е с тегло 600.
Този шрифт е с тегло 700.
Този шрифт е с тегло 800.
Този шрифт е с тегло 900.
Тествайте сегаИзход:
Този шрифт е удебелен.
ubuntu build есенциален
Този шрифт е по-удебелен.
Този шрифт е по-светъл.
Този шрифт е с тегло 100.
Този шрифт е с тегло 200.
Този шрифт е с тегло 300.
Този шрифт е с тегло 400.
Този шрифт е с тегло 500.
Този шрифт е с тегло 600.
Този шрифт е с тегло 700.
Този шрифт е с тегло 800.
е празна java
Този шрифт е с тегло 900.