|
|
cursive { АБВГД абвгд ABC abc |
|
|
|
|
(Zapf-Chancery)} (курсивні |
|
|
|
|
шрифти). |
|
|
|
|
fantasy { АБВГД абвгд ABC abc |
|
|
|
|
(Western)} (декоративні |
|
|
|
|
шрифти). |
|
|
|
|
monospace { АБВГД абвгд ABC abc |
|
|
|
|
(Courier, Andele Mono)} (шрифти |
|
|
|
|
однакової ширини) |
|
|
2 |
font-style |
normal, oblique (нахилений текст), italic |
Завдання накреслення |
|
(курсив) |
(курсив) |
|||
|
|
|||
|
|
normal |
|
|
3 |
font-variant |
small-caps (заміняє всі маленькі літери на |
Вигляд шрифта |
|
|
|
великі) |
|
|
4 |
font-weight |
normal, bold (жирний), bolder (дуже |
Завдання жирності |
|
жирний), leighter (тонкий) |
||||
|
|
|
||
|
|
px, pt, em,% |
|
|
5 |
font-size |
xx-small, x-small, small, medium, large, |
Завдання кегля (розміру) |
|
|
|
x-large, xx-large, smaller, larger |
|
Приклад: (зміна розмірів шрифту)
font-size : xx-small
font-size : x-small
font-size : small
font-size : medium
font-size : large
font-size : x-large
font-size : xx-large
Приклад 4. Задання властивостей шрифту за допомогою css
<html>
<head> <title> шрифт </title></head>
<body>
<h1 style="font family: Arial, Helvetika, Verdana" sans-serif; font-size: 150%; font-weight:light>Заголовок</h1>
<p> Звичайний текст
</body>
</html>
Примітка. Як ми вже знаємо, стилі можна також прописувати в контейнері <head>, що дозволяє один раз задати до будь-якого тега відповідне стильове оформлення і використовувати його багато разів:
<html>
<head> <title> шрифт </title>
<style>
H1 {font family: Arial, Helvetika, Verdana" sans-serif; font-size: 150%; fontweight:light}
</style>
</head>
<body>
<H1 >Заголовок</H1>
Звичайний текст
</body>
</html>
В результаті отримаємо web-сторінку, аналогічну до прикладу 2:
Приклад 5. (зміна параметрів шрифтів)
<html>
<head>
<title> текст </title>
</head>
<body>
<p style="font-family: Verdana, sans-serif; font-size: 120%; font-weight: light"> текст </p>
<p style="font-size: large; font-weight: bold"> текст </p>
<p style="font-family: Arial, sans-serif; font-size: x-small; font-weight: bold">
текст </p> |
|
<p style="font-variant: small-caps |
font-style: italic; font-weight: bold"> |
текст </p> |
|
</body> |
|
</html> |
|