<
  • Главная
Статьи

Правила верстки CSS WordPress: каскадні таблиці стилів CSS на WordPress

  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.

Якщо ви розробник або прагнете створити свою тему WordPress потрібно «підкоритися» єдиними правилами WordPress спільноти і створювати свої CSS стилі, дотримуючись цих правил.

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

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

Структура 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

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

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

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



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью