Управління шрифтом в HTML

Категорії статей: HTML ; 11.07.2009

Управління шрифтом в HTML
HTML, верстка, шрифт

Для управління шрифтом на веб-сторінці можна використовувати тег <font>(із закриваючим тегом </font>) і встановленими для нього наступними атрибутами:
size - задає розмір шрифту в умовних одиницях, може набувати значень від 1 до 7;
color - задає колір шрифту (детальніше про колір буде написано нижче);
face - задає ім'я шрифту, оскільки заздалегідь невідомо які шрифти встановлені у користувача на комп'ютері, і можна перерахувати, через кому, декілька назв шрифтів, в порядку зменшення пріоритетності.

І якщо на компьютері користувача немає першого шрифта то використвується другий, якщо немає другого то третій і т.д. Якщож немає ні одного із списку, то використовується станадртний шрифт.

Наприклад

Код
<font size="5" color="#0080C0" face="Arial Cyr, Arial, Times New Roman">
Якийсь текст.
</font>

Отримаємо в браузері:

Якийсь текст.

Тег <basefont> задає поточний розмір шрифту в документі наступним чином

Код
<basefont size="6">

Для збільшення або зменшення шрифту на одну умовну одиницю можна використовувати теги <big> (</big>) і <small> (</small>).
Виділити текст курсивом можна використовуючи тег <i> (</i>) або тег <em> (</em>). Відмінність цих тегів в тому, що тег <em> виділяє фрагмент тексту (визначає важливість даного тексту), а тег <i> - це явна вказівка на курсив. Наприклад

Код
<p align="center">Розробка <i> Web-сайтів</i></p>

Отримаємо в браузері:

Розробка Web-сайтів

Зробити текст текст напівжирним можна за допомогою тега <b>(</b>). Також можна використовувати тег <strong>(</strong>). Знову ж таки, як і з тегом <em> тег <strong> розроблявся для визначення важливості укладеного в нього тексту.

Код
<p align="center">Розробка <b>Web-сайтів</b></p>

Отримаємо в браузері:

Розробка Web-сайтів

Для виділення необхідного фрагмента тексту підкресленням можна використовувати тег <u>(</u>). Проте підкреслений текст користувачами інтернету асоціюється з гіперпосиланнями, тому використовувати подібне оформлення без крайньої необхідності не варто.

Тег <strike>(</strike>) оформляє текст закресленим. Скорочений запис цього тега: <s>(</s>).
Наприклад

Код
<p align="center"><font size="4" color="#0080C0" face="Arial Cyr, Arial, Times New Roman">
<b>Розробка <i>Web-сайтів</i></b></font>
<br>
<i>Нова ціна: від 1000 крб.</i>
<br>
<strike>Стара ціна: від 2000 крб.</strike>
</p>

Отримаємо в браузері:

Розробка Web-сайтів
Нова ціна: від 1000 крб.
Стара ціна: від 2000 крб.

Задання коліру елементів

Задати колір елементів на веб-сторінці можна різними способами. Перший і, напевно, найпоширеніший - це визначення кольору за допомогою шістнадцяткової система числення, який в загальному випадку виглядає таким чином
#AABBCC
де AA - це інтенсивність червоної складової кольору;
BB - це інтенсивність зеленої складової кольору;
CC - це інтенсивність синьої складової кольору.
Кожна із складових кольору може набувати значень від 0 до FF в шістнадцяткової системі числення (тобто від 0 до 255 в десятковій системі числення). Значення 0 відповідає відсутності даної складової, значення FF відповідає максимальній інтенсивності, даній складовій кольору. Наприклад

Код
<font color="#FF0000">цей текст буде червоного кольору</font>

Відповідно, значення #000000 - дасть чорний колір, значення #FFFFFF - білий.
Другий варіант завдання кольору - це використання назви кольорів, таких як

  • "black" - чорний колір;
  • "white" - білий колір;
  • "green" - зелений колір;
  • "yellow" - жовтий колір;
  • "fuchsia" - бузковий колір і так далі
Назв кольорів дуже багато, тому я привів лише декілька для прикладу.
Як задати колір для потрібного фрагмента тексту було показано вище, тепер поглянемо, як задати колір для всього тексту і фону веб-сторінки .

Атрибут text тега <body> задає колір тексту на веб-сторінці, атрибут bgcolor задає колір фону сторінки. Наприклад

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Встановлення кольорів на веб-сторінці</title>
</head>
<body text="#0000ff" bgcolor="#80FFFF">

<p>Цей текст буде синього кольору</p>
<p><font color="#FF0000">Цей текст буде червогого кольору</font></p>

</body>
</html>

По зовнішнім джерелам

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.66MB | 0.01Sec ad Google