Стилі, що визначає SPIP
Як ви вже знаєте, стилі дозволяють централізувати управління графічними елементами сайту і робити це набагато легше за допомогою CSS-файлів, ніж при визначенні їх в HTML-розмітці. Це робить використання CSS стилів хоча й не обов’язковим, але дуже корисним і зручним. У SPIP стилів є додаткова функція: вони використовуються для редагування графічних визначень елементів, що не визначені в HTML-розмітці (у вашому шаблоні)! Справді, SPIP автоматично генерує величезну кількість різних форматів відображення. Так типографські ярлики (гіперпосилання, підзаголовки, жирним курсивом стилі, таблиці і т.д.) перетворюються в HTML-розмітку для відображення на екрані. Це також відноситься до автоматичних форм (повідомлень на форумах, підписів петицій, і т.д.).
Щоб ви могли змінити параметри цих стилів, SPIP дає їм конкретні і фіксовані імена (ви можете знайти їх в списку «SPIP and Style Sheets»). Наприклад, {{{subheadings}}} генерує не просто тег <h3>, але тег <h3 class="spip">. Яка в цьому користь? Цей тег має конкретне ім’я в атрибуті class. Це ім’я визначає, до якого «класу» належать підзаголовки, тобто ряд HTLM елементів, які успадковують графічні властивості, що визначені в таблиці стилів.
Ну, і як я можу змінити відображення всіх SPIP підзаголовків? Дуже просто - все, що вам потрібно зробити, це відкрити файл my_styles.css (якщо ви дали йому саме це ім’я) в будь-якому текстовому редакторі і додати наступні рядки:
h3.spip {
color: red;
font-size: 18px;
}Тепер перезавантажте сторінку, і увсі SPIP підзаголовки будуть відображатися червоними, немов за помахом чарівної палички. Зверніть увагу, що інші <h3> теги на вашій сторінці, якщо такі є, не стануть червоними. Якщо ви не бачите подібного результату, перевірте, як ви оголосили таблицю стилів в шаблоні (всередині тегу <head>, як було описано в попередній статті) і перезавантажте сторінку.
Дозвольте коротко пояснити синтаксис цієї декларації:
- h3.spip перед фігурними дужками, означає, що декларація буде поширюватися тільки на <h3> теги, атрибут class яких дорівнює «spip». Будь ласка, зауважте: а ні <h3> теги без цього атрибуту, а ні теги з цим атрибутом, але те, що не є <h3> тегами, не зазнають змін.
- Фігурні дужки містять список графічних визначень, пов’язаних з вказаним. Зверніть увагу, що усі властивості, які не визначені в цьому списку, отримають свої значення від початкового тегу. В даному випадку,<h3> тег завжди буде виводити текст жирним шрифтом, бо нічого в нашому визначенні стилю не говорить про зворотне.
- Властивості, перераховані і в фігурних дужках, розділяються або закінчуються комою. Властивість має ім’я, яке іде перед двокрапкою, і одне або кілька значень. В нашому наборі визначається колір тексту - червоний і розмір шрифту - 18 пікселів.
Вижливо: якщо ви додаєте свої власні стилі, ви повинні відстежувати, щоб ім’я класу відповідало тому визначенню, яке ви зробили в таблиці стилів.
Як ви можете помітити, мова CSS дуже проста і використовує той самй тип лексики, як і класична HTML-розмітка. Роблячи свій шлях в CSS ви будете зустрічати багато знайомих термінів, наприклад,border, width, height тощо).
Управління кешем
Таблиця стилів визначається в окремому файлі (в нашому прикладі - на ім’я my_styles.css), і це має велике значення. Фактично, цей файл, на відміну від шаблону сторінки, не керується SPIP і не потребує цього. Як наслідок,якщо ви змінюєте свою таблицю стилів, вам не потрібно очищувати кеш SPIP, щоб побачити зміни - ви тільки повинні перезавантажити сторінку у вашому браузері. Це робить редагування макету ще простішим.
Нагадаємо, що ваша таблиця стилів має бути оголошеною в вашому HTML файлі (тобто він має містити посилання на неї), тобто код <link rel="stylesheet" type="text/css" href="mes_styles.css"> мусить бути «у кеші», щоб браузера мав можливість взрахувати його.