Для чого потрібні таблиці стилів?
Коли веб-сторінку створюють у так званий традиційний спосіб, то її макет визначається в HTML розмітці. Таким чином, кожен раз, коли потрібно встановити колір якогось тексту червоним, треба написати <font color="red">. Для відображення товстої границі таблиці треба вказати <table border="2">.
За допомогою цього методу отримаємо статичний сайт, тобто такий, в якому кожна стаття має конкретну HTML сторінку. Зміна макету такого сайту - кошмар. Потрібно відшукати кожне входження HTML розмітки, яке вимагає редагування, а потім внести зміни одна за одною (наприклад, замінити <font color="red"> на <b> якщо ви вирішили, що ті елементи, які раніше відображалися червоним кольором, тепер будуть виводитися жирним шрифтом).
Як ви вже знаєте, SPIP є великим кроком до вирішення цієї ситуації, і вам більше не доведеться редагувати сотні HTML файлів, але тільки кілька шаблонів, і ваш макет автоматично оновиться по всьому сайту. Задача, однак, виглядає не повністю розв’язаною. Скажімо, наприклад, ви вирішили використовувати певний пастельний блакитний колір для багатьох елементів на вашому сайті, щоб створити на сайті графічну єдність: посилання, вставки, деякі елементи навігації тощо будуть відображатися цим кольором. У той день, коли ви захочете замінити цей блакитний салатовим, вам доведеться редагувати всі входження цього блакитного кольору в шаблонах, щоб встановити замість нього салатовий. Це може бути непростим завданням, і зміна способу відображення сторінок не буде швидкою.
Рішення полягає у використанні стилів. Таблиця стилів - це файл, в якому ви визначаєте графічні властивості елементів і те, де вони застосовуються. Можна відзначити дві великі переваги стилів :
— таблиця стилів є одним єдиним файлом, який ви можете застосувати до будь-якої кількості HTML файлів (і шаблонів SPIP);
— графічні властивості визначаються тільки один раз в таблиці стилів, не зважаючи на те, скільки разів ці властивості застосовуются в HTML-розмітці.
Як це зробити?
Таблиця стилів повинна бути оголошена, тобто пов’язана з HTML файлом (шаблоном SPIP, наприклад), за допомогою тегу <link> у розділі head HTML-файлу (<head></head>), аналогічно до title та <meta>-тегів, наступним чином:
<head>
...
<link rel="stylesheet" type="text/css" href="my_styles.css">
</head>В цьому прикладі файл my_styles.css містить визначення графічних властивостей, які ви хочете надати сторінці HTML. В інших заняттях цього розділу ми будемо вважати, що вибрали назву «my_styles» для цього файлу, а його розширення - «css». Власне кажучи, CSS або Cascading Style Sheets є назвою мови для стилів, так само, як HTML є мовою для створення Web-сторінок.
Примітка: таблиця стилів може застосовуватися до класичної, тобто «статичної», HTML-сторінки, а також в шаблонах SPIP. Це означає, що будь-який CSS прийом, який діє в класичному HTML, також може бути використаний в шаблонах вашого сайту.
Синтаксис мови CSS дуже простий, а декілька наступних прикладів допоможуть вам розібратися з ним і почати використовувати стилі.