SPIP

[ar] [ast] [bg] [br] [ca] [co] [cpf] [cs] [da] [de] [en] [eo] [es] [eu] [fa] [fon] [fr] [gl] [id] [it] [ja] [lb] [nl] [oc] [pl] [pt] [ro] [ru] [sk] [sv] [tr] [uk] [vi] [zh] Espace de traduction

Télécharger

Додайте свій стиль!

Juin 2015 — mis à jour le : Juillet 2015

Toutes les versions de cet article :

У попередній статті ми представили переваги стилів в загальному вигляді. Тепер ми пояснимо додаткові переваги стилів, а саме ті, що безпосередньо пов’язані з SPIP.


Стилі, що визначає 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"> мусить бути «у кеші», щоб браузера мав можливість взрахувати його.


Voir le squelette de cette page Site réalisé avec SPIP | Espace de traduction | Espace privé