1. вступ
2. Навіщо потрібно дотримуватися правила верстки CSS WordPress
3. Структура CSS WordPress
4. Синтаксис структури css wordpress
5. Правила верстки CSS WordPress: CSS селектори
6. Синтаксис для селекторів css wordpress
7. Синтаксис для властивостей css wordpress
8. Вказівка ​​кольору в css wordpress
9. Синтаксис для значень css wordpress
10. висновки
11. Корисні посилання

вступ

Для створення і зміни зовнішнього вигляду сайту WordPress служить спеціальний файл шаблону, зазвичай званий style.css . У цьому файлі (їх може бути декілька) автор шаблону задає каскадні таблиці стилів CSS цього шаблону. Для CMS WordPress немає якихось своїх особливих стилів CSS. Однак, є кілька «корпоративних» правил, які потрібні для однаковості CSS файлів в раках співпраці розробників і поширення продуктів WordPress.

Навіщо потрібно дотримуватися правила верстки CSS WordPress

Правила верстки CSS WordPress не виходять за рамки стандартного CSS кодування, але мають свої особливості для додання єдиних видів для всіх сайтів, створених на WordPress.

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

Правила перераховані в цій статті прості і стосуються правильного синтаксису при складанні файлу каскадних стилів.

Структура CSS WordPress

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

Нагадаю на фото, що таке селектор, властивість і значення.

Синтаксис структури css wordpress

• Вирівнювати властивості потрібно кнопкою [Tab], кнопку «пробіл» не чіпаємо;
• Між секціями потрібно вставляти 2 порожні рядки. Після блоку потрібно вставити 1 порожній рядок;
• Будь-яка назва селектора писати на окремому рядку. Цю рядок закінчувати коми, краще фігурною дужкою «відкрито»;
• Властивість разом зі значенням розміщувати на нових рядках і закінчувати точка-кома;
• Фігурна дужка, що закриває значення, повинна розташовуватися зліва на одному вертикальному рівні з відступом селектора відкриття.

Правила зовсім простенькі, але вимагають демонстрації.

Правила верстки CSS WordPress: CSS селектори

Селектор css це опис елемента (можна групи елементів), до яких застосовується дане правило стилю.

Чи не коректне розташування селектора призводить до ігнорування стилів і впливає на швидкість завантаження таблиці стилів.

Синтаксис для селекторів css wordpress

• Імена селекторів повинні бути малі;
• Для селектор застосовувати читаються назви, що описують елементи до яких застосовуються.

Синтаксис для властивостей css wordpress

• За властивістю повинні слідувати двокрапка з пропуском;
• Всі властивості і значення писати в нижньому регістрі. Винятки становлять імена шрифтів і унікальні властивості;

Вказівка ​​кольору в css wordpress

• Для вказівки кольору використовуйте шістнадцятковий код.
• Стандарт RGBA (), застосовується тільки для вказівки непрозорості. В інших випадках RGB-формат не застосовувати.
• Не використовувати для кольору заголовних букв.
• Також скорочуйте значення кольору, коли це можливо: наприклад, замість #DDDDDD вказуйте #ddd.

Для вказівки кольору фону використовувати не цифри, а стенографічні значення. (Для довідки https://codex.wordpress.org/CSS_Shorthand.). Крім товщини шрифту.

Наприклад: замість цифрового розміру шрифту вказуємо (medium, small, large і т.д.), замість цифр кольору вказуємо: red, blue і т.д. (Тільки для фону).

Синтаксис для значень css wordpress

CMS WordPress рекомендовані наступні висновки значень для властивостей.

• Перед значенням двокрапку, далі пробіл, потім значення;
• Завжди значення закінчувати крапкою з комою без пробілу;
• Кілька значень укладаємо в прості дужки;
• Для властивостей значень застосовуються не подвійні, а одинарні лапки. Подвійні лапки застосовувати, як виняток, наприклад, коли вказуєте подвійні назви шрифтів;
• Товщину шрифтів, по можливості, вказувати тільки числовими значеннями. Наприклад, вказувати 400, а не normal, або 700, а не bold;
• Чи не вказувати одиниць для нульових значень. Не потрібно писати: 0px. Досить вказати значення 0.
• Для стандарту RGBA, значення, розділяються комами і пробілами або перекладом рядка.
• Висота лінії line-height краще вказувати в кратних числах, а не в пікселях.

висновки

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

Корисні посилання

• Сервіс перевірки CSS від W3C (формат CSS3): http://jigsaw.w3.org/css-validator/

© Wordpress-abc.ru

Інші статті по темі

• Записи не знайдені

Статті пов'язані з теми: