CSS: підключення до веб-документа
Каскадні таблиці стилів
CSS (англ. Cascade Style Sheets - каскадні таблиці стилів) - мова розмітки веб-сторінок, над яким у 1994 р. почав працювати Хокон Виум.
Синтаксис
CSS підключення до розмітки HTML здійснюється за допомогою парного тега , всередині якого міститься інструкція для поведінки елемента на веб-сторінці, яка має наступний синтаксис: p {text-indent: 5%;} Застосувавши цей стиль до тегу
протягом всього документа параграфи будуть мати відступи 5 % від початку рядка.
p {text-indent: 5%;}
Конструкція називається оголошенням стилю і обов'язково повинна бути поміщена в заголовну частину веб-документа, що містить технічну інформацію, між тегами . Структура даного оголошення стилю для тега
така:
- p - ідентифікатор.
- text-indent - властивість стилю.
- 5 % - значення властивості.
Це спеціальні терміни, визначення, використовувані в навчальних посібниках, які мають ходіння серед програмістів. Їх варто запам'ятати!
Робота зі шрифтом
Інформація у вигляді тексту - те, за чим будуть приходити 99 % відвідувачів майбутнього сайту в пошуку необхідних даних. Тому читабельність шрифту, його естетика і зручність при зоровому сприйнятті відіграють важливу роль для відвідуваності ресурсу. CSS підключення тут з'явиться тим дією, яке здатне відповісти перерахованим вимогам.
Для маніпуляцій зі шрифтом технологія має багатий інструментарій. Найнаочніше у вигляді таблиці надати ще один спосіб підключення шрифтів CSS для тега
, який вирівнює текст:
| ІДЕНТИФІКАТОР | ВЛАСТИВІСТЬ | МОЖЛИВЕ ЗНАЧЕННЯ | РЕЗУЛЬТАТ |
| p | align | left | текст притискається до лівого краю (значення за замовчуванням) |
| center | текст розташовується по центру сторінки | ||
| right | текст притискається до правого боку | ||
| justify | текст заповнює рядки по обидва боки (як у книгах) |
Приклад того, як буде відображено браузером кожне оголошення стилю:
Для роботи з текстом використовується деяка кількість стилів. З повним їх переліком, призначенням, їх властивостями і значеннями можна ознайомитися в довідниках CSS.
Зовнішні файли CSS
CSS підключення може здійснюватися за допомогою зовнішніх файлів. У цьому випадку крім основного HTML-документа створюється окремо документ зі стилями і розташовується в тому ж каталозі, що і сам HTML-документ. Їх кількість може бути будь-яким. Алгоритм підключення зовнішніх CSS файлів складається всього з двох кроків:
<script> (adsbygoogle = window.adsbygoogle ||[]).push({});
- В текстовому редакторі створити документ зі стилями, вказати розширення для нього .css. При цьому теги не зазначаються.
- У HTML-документі у заголовній частині документа (між тегами ) потрібно послатися на цей файл за допомогою наступної конструкції:
Замість style.css необхідно вказати свою адресу файлу. При цьому адресація може бути як абсолютної, так і відносної. Переваги очевидні:
- зовнішні файли можна застосувати до будь-якої кількості веб-сторінок в межах сайту;
- якщо задати абсолютну адресацію, то до декількох сайтів. Очевидно, що при цьому розмітка пишеться один раз і немає необхідності прописувати стиль для кожної сторінки;
- при використанні програмістом цього способу кінцевий користувач не зможе переглянути код CSS. Таким чином можна захистити свою творчість від плагіату.
Крім усього іншого, при роботі з кодом розмітки верстальник допускає помилки. Їх легше виявити і виправити в окремому файлі невеликого розміру, ніж зазвичай громіздкому коді HTML.
Використання технології jаvascript
При форматуванні тексту на веб-сторінці часто виникає необхідність визначити стиль для певного фрагмента, відмінний від навколишнього. Якщо цей спосіб застосовується неодноразово на сайті або у великому веб-документі, то зручно здійснювати підключення через CSS jаvascript допомогою конструкції:
<script>
document.write(" ");
Знову замість style.css прописується відносний або абсолютний адресу зовнішнього файлу з розширенням .css.
