Простые советы по CSS для владельцев веб-сайтов, сделанных своими руками

Одним из самых больших преимуществ WordPress является возможность создать красивый, привлекательный веб-сайт практически без знаний в области программирования. Благодаря сотням профессиональных тем и гибкому блочному редактору с функцией перетаскивания это отличное решение для владельцев веб-сайтов, сделанных своими руками.

Но что, если вы хотите пойти дальше и сделать более глубокие визуальные настройки? CSS — один из самых быстрых способов изменить внешний вид вашего сайта.

Что такое CSS?

CSS (каскадные таблицы стилей) определяет макет и визуальные эффекты вашего веб-сайта — цвета, шрифты, поля, размеры и т. д. С помощью нескольких основ CSS вы можете изменить внешний вид всех своих страниц и сообщений или отточить отдельные части и элементы. внести разовые изменения.

Базовый синтаксис CSS выглядит следующим образом:

Селектор — это элемент, который вы хотите стилизовать: заголовок, абзац, страница, изображение, ссылка и т. д.

Свойство — это категория, которую вы хотите изменить: например, цвет шрифта, размер, границу или фон. К каждому селектору можно применить несколько свойств.

Значение определяет свойство: конкретный цвет, конкретный размер шрифта, точный размер ширины границы и т. д.

Обратите внимание на формат: свойство и значение разделяются двоеточием и заключаются в фигурные скобки. За каждым значением следует точка с запятой.

На практике, чтобы изменить цвет заголовка выше, который является тегом <h1>, с черного на оранжевый, вы должны использовать:

• Селектор: h1
• Свойство: цвет
• Значение: оранжевый

Как применить CSS к вашему сайту

Если у вас нет большого (или вообще никакого) опыта работы с CSS, ничего страшного! Вы можете добиться многого, если поймете основы. А благодаря функции пользовательского CSS Jetpack вам не нужно беспокоиться об изменении файлов темы или поломке вашего веб-сайта.

Чтобы включить пользовательский CSS, перейдите в Jetpack → Настройки → Запись на панели управления вашего сайта. Прокрутите вниз до раздела « Улучшения темы » и включите параметр « Улучшить панель настройки CSS ».

Чтобы добавить CSS, перейдите в « Внешний вид» → «Настроить» → «Дополнительный CSS ». Здесь вы вводите фактический CSS, который хотите добавить. Чтобы помочь, редактор CSS Jetpack использует цвет, чтобы упростить различение селекторов, свойств и значений.

При добавлении или редактировании CSS вы можете предварительно просмотреть изменения перед сохранением, чтобы вы точно знали, как они будут выглядеть, прежде чем применять их на своем действующем веб-сайте. Кроме того, Jetpack хранит последние 25 изменений CSS, поэтому вы можете вернуться к предыдущему дизайну, если вам не нравится ваш новый вид. Узнайте больше об использовании пользовательского CSS.

Пять способов настроить свой сайт с помощью CSS

У каждого элемента на вашем веб-сайте есть селектор, поэтому вы можете использовать CSS, чтобы изменить что угодно. Если вы хотите научиться находить селекторы, это отличный учебник, но вот пять изменений, которые вы можете внести прямо сейчас, используя уже предоставленный CSS.

Типография

Одним из наиболее распространенных применений CSS является стилизация типографики или шрифтов вашего сайта. Чтобы изменить цвет и размер заголовков (Заголовок 1, Заголовок 2 и т. д.) на вашем сайте, используйте этот код и измените значения по желанию:

В приведенном выше примере просто изменяется заголовок 1. Если вы хотите изменить цвет и размер шрифта другого заголовка, например заголовка 3, поменяйте селектор h1 на h3 и внесите соответствующие изменения в размер и цвет:

Чтобы изменить цвет нескольких заголовков, разделите селекторы запятыми:

А чтобы сделать все ваши заголовки прописными, для большего эффекта используйте это:

Ссылки

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

(Не хотите подчеркивать свои ссылки? Просто удалите «text-decoration: underline;» ниже.)

Если вы хотите, чтобы ваша ссылка меняла цвет, когда кто-то наводит на нее курсор, добавьте «:hover» в селектор:

Списки

Если вы используете много маркированных списков в своих сообщениях и на страницах блога, попробуйте немного CSS, чтобы они еще больше выделялись на фоне остального контента.

Чтобы сделать точку маркера окружностью и изменить толщину, цвет и размер шрифта, используйте этот код:

Если вы просто хотите изменить одно из этих свойств, включите только ту строку, которая относится к тому, что вы хотите изменить.

Хотите еще больше возможностей? CSS-Tricks.com описывает все варианты стилей для списков (например, использование квадратов или изображений для маркеров), а также дополнительные советы и ярлыки.

Пункты меню

Многие темы предоставляют несколько вариантов главного меню, поэтому вы можете выбрать наиболее подходящий для своего сайта. Но что, если вы хотите еще больше настроить стиль меню?

В приведенном выше примере мы использовали CSS, чтобы добавить собственный зеленый фон к элементам меню и изменить цвет текста, когда пользователь наводит курсор на каждый из них:

Виджеты боковой панели

Виджеты боковой панели — отличный способ продемонстрировать полезный контент, поэтому вы можете захотеть, чтобы они выделялись на фоне остальной части вашего сайта. Используйте следующий код, чтобы добавить фон за виджетами боковой панели и отступы (дополнительный пробел) вокруг текста:

Примените CSS к определенным страницам, а не ко всему сайту:

Все приведенные выше фрагменты CSS применяются ко всему сайту — они будут изменять эти элементы на каждой странице и в каждом отдельном месте, где они появляются. Что, если вы хотите применить CSS только к одной конкретной странице или публикации?

WordPress присваивает каждой странице и публикует уникальный идентификатор, который вы можете найти на панели управления WordPress:

1. Перейдите на страницу или публикацию, которую вы хотите настроить, и нажмите « Редактировать страницу » на черной панели в верхней части панели инструментов.
2. В строке URL найдите что-то похожее на «?post=74». Номер
   Однако «74» будет меняться в зависимости от идентификатора вашей публикации или страницы.

Чтобы применить CSS к определенной странице или сообщению, добавьте номер в свой CSS вместе с «.page-id-». Чтобы изменить цвет шрифта заголовка 1 только на этой странице, вы должны использовать следующее:

Помните: предварительный просмотр — ваш друг!

Если у вас нет большого опыта работы с CSS, вы можете нервничать по поводу внесения изменений, которые могут испортить ваш сайт. Не волнуйся! Предварительный просмотр изменений будет отображаться в режиме реального времени по мере редактирования.

Поэкспериментируйте с кодом и внесите необходимые изменения. Нажмите «Сохранить и опубликовать» , когда будете довольны тем, как выглядит ваш обновленный CSS!

Существует также функция истории CSS, которая записывает каждый раз, когда вы сохраняете изменения. Это означает, что если вы передумаете, вы можете быстро вернуться назад. Для этого нажмите « Просмотреть полную историю» в нижней части настройщика. Выберите дату и время, к которым вы хотите вернуться, и нажмите кнопку « Восстановить эту версию» .

Дополнительные ресурсы CSS

• Шестнадцатеричный код определяет цвет, который вы хотите использовать при изменении шрифтов или фона. Если вы не уверены, какой из них использовать, цветовые коды HTML предоставляют отличное решение. Изучите их палитру цветов, чтобы найти идеальный оттенок, а затем скопируйте и вставьте сгенерированный шестнадцатеричный код.
• CSS-Tricks.com предлагает фрагменты кода CSS различной сложности: от новичка до эксперта. Вы также можете найти учебные пособия, видеоролики и руководства, чтобы узнать больше.
• W3Schools — удобный ресурс с примерами CSS и пошаговыми руководствами.
• WordPress.com предоставляет информацию об основах CSS и использовании медиа-запросов для настройки CSS на основе конкретных устройств.
• Upwork.com — партнер WordPress, предлагающий внештатных специалистов, которые могут помочь с проектами CSS.

Начните настраивать свой сайт WordPress

Лучший способ изучить основы CSS — начать экспериментировать. Весь код, указанный выше, можно настроить или настроить в соответствии с вашими потребностями — используйте его в качестве основы, а затем начните менять цвета, изменять размер шрифта или вносить любые другие изменения, которые вы хотите!

С Custom CSS Editor от Jetpack вы можете с головой погрузиться в настройку, не беспокоясь о поломке вашего сайта, благодаря инструментам предварительного просмотра и функциям отката. Для дополнительной защиты включите Jetpack Backup, который автоматически создает резервную копию вашей работы в режиме реального времени и включает восстановление одним щелчком мыши.

Узнайте больше о других функциях дизайна Jetpack и начните работу с Jetpack Custom CSS.