основи css

Коли таблиць стилів ще не існувало, для завдання розміру і гарнітури шрифту застосовувався тег font. Однак, в даний момент використання даного тега не рекомендується. Нижче наведені приклади використання даного тега:

Мінімальний розмір тексту
Макс-й розмір тексту
Helvetica
Arial
червоний

Набагато зручніше і правильніше для цих цілей скористатися листом стилів. У всякому разі, ви будете впевнені, що ваш сайт буде правильно відображатися у всіх браузерах.

Створимо файл з назвою 03.css і розмістимо його в тому ж каталозі, що і наш файл прикладу (оскільки, прикладів буде багато, то, кожному файлу прикладу відповідатиме свій лист стилів). У таблиці стилів визначимо розмір, колір і вигляд шрифту для всієї HTML-сторінки - в тегу BODY

Як виглядає сторінка без CSS: Приклад №2
Як виглядає сторінка з CSS: Приклад №3

Фрагмент зміненого HTML-коду сторінки (розміщений тільки МЕТА-тег, що включає файл таблиці стилів; в саму ж сторінку зміни не вносилися):

Як то кажуть, відчуйте різницю! Всього одна строчка файлу таблиці стилів миттю змінила весь вигляд HTML-сторінки (якщо б сайт містив десятки, сотні, тисячі сторінок, то, все одно, зміни б відобразилися на всіх сторінках сайту).

Розберемо докладніше рядок CSS-файлу:

  • BODY - вказує браузеру, що форматування відноситься до всього тіла HTML-сторінки (тобто все, що знаходиться між тегами і );
  • <> (Фігурні дужки) - всі атрибути форматування стилю описуються всередині фігурних дужок і розділяються між собою крапкою з комою (;);
  • font-family: - задає вигляд шрифту (назви шрифтів перераховуються після двокрапки через коми). При цьому браузер намагається відобразити перший шрифт (Verdana), якщо такого шрифту немає на комп'ютері користувача, то браузер намагається відобразити наступний шрифт (Tahoma) і т.д .;
  • color: - вказує колір шрифту (при цьому можливі різні варіанти написання: gray; # 808080);
  • font-size: - вказує розмір шрифту (також можливі різні варіанти: pt, px, pc, mm.);

"Пограйте" з різними параметрами значень і подивіться як миттєво змінюється ваша сторінка.

За допомогою стилів можна робити невеликі "фокуси", які будуть видні користувачам, які відвідують ваш сайт, але "непомітні" пошуковим системам (по крайней мере, на час написання даного матеріалу). Як відомо, пошукові системи досить високо ранжируют текст, укладений в заголовок першого рівня (тег

). Але, текст, укладений в цей тег виглядає не завжди прийнятно - він дуже великий і жирний. Це можна змінити, наприклад, за допомогою атрибута style.

Форматування заголовка першого рівня: Приклад №4 - перший заголовок відображається "за замовчуванням", другий, відформатований за допомогою атрибута style.

Неважко зрозуміти, що лист стилів задав заголовку першого рівня зелений колір і встановив розмір шрифту 130% від основного розміру, який був заданий у 8pt.

За допомогою атрибута font-size (розмір шрифту) можна задавати розмір шрифту в наступних одиницях:

У вебмайстрів "ходу" останні два варіанти. Зверніть увагу, що при завданні нецілого значення необхідно в якості розділової знака ставити крапку, а не кому - 2.2 mm.

При завданні гарнітури шрифтів (атрибут font-family:), можна задавати будь-які шрифти, але для підстраховки (на випадок, якщо на комп'ютері користувача не виявиться потрібного шрифту) рекомендують включати стандартні типи гарнітур:

  • cursive (курсив);
  • fantasy (екстравагантна гарнітура);
  • monospace (стандартна гарнітура друкарської машинки);
  • sans-serif (гарнітура з зарубками);
  • serif (гарнітура без зарубок).

Колір шрифту (атрибут color:) можна задавати в шестнадцатиричном вигляді (# FCD34F), або англійською назвою стандартного кольору (red). Слід акуратно підходити до завдання кольору в шістнадцятковому вигляді, тому що далеко не кожен колір, заданий подібним чином, буде відображатися однаково на різних моніторах. Набагато краще користуватися безпечної палітрою кольорів. яка однаково відображається на всіх моніторах.

16 кольорів стандарту VGA: