CSS-властивості для шрифтів:
Властивість
|
Опис
|
Значення
|
Приклад
запису
|
font-family
|
Сімейство
шрифта
|
Serif - шрифти з «зарубками»
Sans-serif -
шрифти рубані,
Monospace - моноширинні шрифти
|
body {font-family: Verdana, Helvetica, Arial,
sans-serif;}
|
font-style
|
Стиль шрифта
|
Normal (звичайний)
Italic (курсивний)
Oblique (похилий)
Inherit (наслідування
батьківської властивості)
|
h2 {font-family: "Times New Roman", serif; font-style:
italic;}
|
font-variant
|
Трансформація
букв шрифта в зменшені заголовні букви
|
Normal
small-caps
inherit
|
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
|
font-weight
|
Ширина ліній шрифта ("Жирність")
|
Normal (нормальний)
Bold (жирний)
Bolder (збільшення жирності)
Lighter (зменшення жирності)
100 (жирність в
числовому значенні)
200
300
400
500
600
700
800
900
inherit
|
H1{font-family: arial, verdana, sans-serif; font-weight:
bold;}
|
font-size
|
Розмір шрифта
|
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
розмір %
inherit
|
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
|
Властивість сімейство шрифту FONT-FAMILY
Шрифти з тими чи іншими ознаками, об'єднуються в сімейства. Існує три основні сімейства:
- Serif - шрифти з характерними "зарубками", найяскравіший представник - "Times New Roman";
- Sans-serif - шрифти рубані, без зарубок, наприклад Arial або Verdana;
- Monospace - моноширинні шрифти (з однаковою відстанню між символами, на зразок друкарської машинки), такі як "Courier New";
Властивість font-family містить список взаємозамінних
шрифтів, розділених комами, що належать одному сімейству. Якщо ім'я шрифту
складається більш ніж з одного слова, то його потрібно вказувати в лапках.
В кінці списку зазвичай вказується назва сімейства: якщо перший шрифт списку не
встановлений на комп'ютері, з якого виконується доступ до сайту, шукається
наступний шрифт списку, поки не буде знайдений відповідний.
Приклад запису:
body {
font-family:
Verdana, Helvetica, Arial, sans-serif;
}
Family-name
При вказанні шрифтів для
web-сайту опис починається з пріоритетного шрифту, а потім перераховуються альтернативні. В кінці списку вказується родове ім'я. Тоді сторінка, як мінімум, буде відображена шрифтом того ж сімейства, якщо відсутні всі специфіковані конкретні шрифти
Приклад
застосування властивості font-family з зовнішнім підключеням css:
Властивість стиль шрифту FONT-STYLE
Властивість font-style дозволяє виділити текст
курсивним, похилим шрифтом або навпаки надати тексту стандартний вигляд. Дану
властивість має всього три значення:
- normal - стандартний текст, що має звичайне написання, тобто не курсивне і не похиле
- italic - курсивне накреслення
- oblique - похиле накреслення
Приклад
застосування властивості font-style з зовнішнім підключеням css:
Властивість FONT-VARIANT
Ця властивість використовується
для вибору варіанту написання букв нижнього регістра. Може приймати два
значення:
- normal - значення за замовчуванням, текст відображається звичайним чином.
- small-caps - букви нижнього регістра відображаються як зменшені заголовні.
Вага шрифту FONT-WEIGHT
Властивість font-weight описує, наскільки
товстим, або "важким", має відображатися шрифт. Шрифт може бути normal або bold. Деякі браузери підтримують навіть числові значення 100-900 (у сотнях) для
опису ваги шрифту.
Одиниці виміру в css
px, em, %, ex - відносні одиниці, а всі інші - абсолютні.
PX
Піксель px - це сама
базова, абсолютна і остаточна одиниця виміру.
Переваги: чіткість і зрозумілість
Недоліки: інші одиниці виміру - є більш потужніші, вони є відносними
і дозволяють встановлювати співвідношення між різними розмірами
EM
Вимірюване
значення залежить від розміру шрифту поточного елементу (він встановлюється
через атрибут розмір шрифту). Коли він явно не заданий використовується розмір
тексту який закладений в браузері. Тому 1em спочатку дорівнює розміру шрифту
закладеному в браузері за замовчуванням.
EX
Цей аргумент
визначається як висота символу «х» в
нижньому регістрі. Екс прив'язаний до розміру шрифту заданого в браузері за
замовчуванням, якщо у батьківського елементу заданий атрибут «Розмір шрифту» то
він прив'язаний до нього.
%
Відсоткові
одиниці виміру залежить від розмірів батьківського елементу.
Як правило, за замовчуванням для більшості браузерів
1em = 12pt = 16px = 100% = medium
Одиниці «px» і «pt», не дуже підходять для веб-документів, так як
не масштабуються, що змушує використовувати «em» і
"%", які масштабуються, а значить краще підходять для мобільних додатків
Властивість FONT-SIZE
Ця властивість регулює
розмір шрифту. В якості одиниць виміру найкраще використовувати пікселі, тому
це універсальний спосіб і у всіх браузерах. Приклад запису:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Є одна відмінність у вказаних одиницях виміру: 'px' і 'pt' дають абсолютне
значення розміру шрифту, а '%' і 'em' - відносні. Багато користувачів не можуть читати дрібний текст,
з різних причин. Щоб зробити
web-сайт доступним для всіх, потрібно використовувати відносні значення, такі
як '%' або 'em'.
Скорочений запис FONT
Використовуючи
скорочений запис font, можна вказувати всі властивості шрифту в одному стильовому правилі.
Наприклад,
опис властивостей шрифту для <p>:
p {font-style: italic; font-weight: bold; font-size: 30px;
font-family: arial, sans-serif;}
Скорочений запис:
p {font: italic bold 30px arial, sans-serif;}
Створити файл font.html з зовішньою таблицею стилів font.css у якій прописати правила оформлення:
1. Для заголовків:
2. Для абзацу: колір #666666, розмір шрифта 12 px, сімейство шрифта: serif (приорітетний Times New roman), товщина шрифта: normal,
3. Колір фону сторінки: #999999,
1. Заголовки
1.1 Рекомендації по використанню заголовків і підзаголовків
1.1.1 Використання заголовка h1
1.1.2 Використання підзаголовків (h2-h6)
Завдання для самостійного виконання:
Створити файл font.html з зовішньою таблицею стилів font.css у якій прописати правила оформлення:
1. Для заголовків:
- Н1: колір: синій, розмір шрифта 20px, сімейство шрифта sans serif (приорітетний Arial), стиль шрифта: курсивний
- H2: колір: голубий, розмір шрифта: 2em, сімейство шрифта sans serif (приорітетний Helvetica), стиль шрифта: зменшення жирності
- H3: розмір шрифта: 100%, сімейство шрифта serif (приорітетний garamound), стиль шрифта: жирний
2. Для абзацу: колір #666666, розмір шрифта 12 px, сімейство шрифта: serif (приорітетний Times New roman), товщина шрифта: normal,
3. Колір фону сторінки: #999999,
Текст для файлу можна скопіювати:
1. Заголовки
Заголовки є одним з найважливіших інструментів для структурування тексту.
1.1 Рекомендації по використанню заголовків і підзаголовків
Ось деякі рекомендації з використання заголовків в HTML-сторінці.
1.1.1 Використання заголовка h1
Якщо в размітці не використовуються теги <section> чи <article>, то не рекомендується, щоб на одній сторінці містилось декілька заголовків верхнього рівня. Всередині тегів <section> і <article> може бути своя ієрархія заголовків.
1.1.2 Використання підзаголовків (h2-h6)
При використанні підзаголовків не рекомендується пропускати рівні заголовків, тобто після заголовка h1 повинен йти підзаголовок h2 і тільки потім підзаголовок h3.
1. Заголовки
Заголовки є одним з найважливіших інструментів для структурування тексту.
1.1 Рекомендації по використанню заголовків і підзаголовків
Ось деякі рекомендації з використання заголовків в HTML-сторінці.
1.1.1 Використання заголовка h1
Якщо в размітці не використовуються теги <section> чи <article>, то не рекомендується, щоб на одній сторінці містилось декілька заголовків верхнього рівня. Всередині тегів <section> і <article> може бути своя ієрархія заголовків.
1.1.2 Використання підзаголовків (h2-h6)
При використанні підзаголовків не рекомендується пропускати рівні заголовків, тобто після заголовка h1 повинен йти підзаголовок h2 і тільки потім підзаголовок h3.
|)
ВідповістиВидалитиДякую )
ВідповістиВидалити