Любой, у кого есть сайт WordPress, в какой-то момент столкнется с ситуацией, когда потребуется изменить часть кода. Это не значит, что он должен стать веб-разработчиком и писать JavaScript и PHP как профессионал. Скорее всего, ему придется повозиться с HTML и базовым CSS, которые есть основы любой веб-страницы.
У меня есть статья для начинающих по наиболее распространенным HTML-кодам. В этой статье я хочу изложить вам основы CSS и познакомить вас с некоторыми самыми простыми CSS кодами. Это поможет вам настроить вид сайта так, как вы этого захотите.
Что такое CSS — очень кратко
Если HTML является «скелетом» содержимого вашей страницы, то CSS — это оболочка, которая сообщает браузеру, как должна выглядеть страница.
Вне WordPress вполне возможно создать целый веб-сайт, используя только HTML и CSS (и, возможно, немного JavaScript для небольшого дополнения).
Основы CSS: спецификация
CSS состоит из трех основных частей: селектора, свойства и значения.
Давайте посмотрим пример кода CSS:
background-color: red;
}
Селектор
Селектор в примере выделен красным цветом. Селектор — это аббревиатура, указывающая браузеру, на какой объект настроены изменения.
Например, вы можете настроить изменения на все абзацы на сайте с помощью p {}.
Любой код, который применяется к селектору, помещается в фигурные скобки.
Во многих случаях селекторы элементов будут соответствовать тегам HTML, с помощью которых вы создаете веб-страницу. Например, p {}, нацеленный на <p> или h2 {} на < h2>.
Классы ( .class ) — это определенный тип селектора, «нацеленый» для элементы всего сайта. Селектор класса отмечается точкой перед самим селектором.
Обратите внимание, что у базовых селекторов нет точки или другого индикатора. Это означает, что они являются базовыми HTML.
Идентификаторы ( #id ) в CSS работают точно так же, как класс. Они обозначаются знаком # перед селектором. На странице важно иметь только один экземпляр элемента с уникальным идентификатором. Если таких элементов 2 или больше — это считается ошибкой.
к оглавлению ↑Свойство
Свойство в примере выделено зеленым цветом. Свойство указывает параметр селектора, который вы пытаетесь изменить. Это может быть шрифт, цвет фона, отступы, поля, граница или любое другое из сотен доступных свойств, которые работают в CSS.
Время, которое вы тратите на написание CSS, значительно сократится, если вы познакомитесь со множеством различных свойств элементов.
Значение
Итак, теперь у нас есть селектор («где»), свойство («что»), теперь нам нужно указать «сколько». Значение выделено в примере синим цветом.
Значения CSS разнообразны и, очевидно, они должны иметь смысл в сочетании со свойствами. Вот несколько примеров значений и контекста, в котором они используются:
header {
background-color: red;
padding: 50px;
font-family: Arial, sans-serif;
text-align: center;
border: 4px solid red;
z-index: 999;
}
Если свойство представляет собой что-то вроде background-color, то по тексту понятно, что значение является цветом. CSS распознает множество цветов по их имени, вы можете увидеть их все здесь, но гораздо более вероятно, что вы захотите называть цвет по его кодам RGB или HEX. Как это:
header {
background-color: #F00505; /* RED */
}
Выше я упоминал, что весь код CSS заключен в фигурные скобки. Однако внутри этих фигурных скобок каждая строка настройки стиля должна заканчиваться точкой с запятой (;). Это указывает браузеру, что конкретный стиль завершен.
В CSS интервалы не имеют значения, за исключением удобочитаемости, но наличие точки с запятой не подлежит обсуждению.
Кроме того, между свойством и значением вы помещаете обычное двоеточие ( ; ). Интервал здесь не имеет значения. У вас могут быть пробелы с одной стороны, с обеих сторон или без них, и CSS все равно будет отображаться.
На большинстве сайтов и тем, предлагающих минимизацию CSS, все пробелы удаляются.
Если вам нужно включить документацию в код CSS, вы можете сделать это с помощью комментариев. Комментарии CSS открываются и закрываются символами / * и * /.
Комментирование кода важно не только для того, чтобы вы позже вернулись к CSS, но и для последующих разработчиков. Как правило, комментарии CSS используются для обозначения того, что делает конкретный фрагмент.
к оглавлению ↑Свойства CSS — еще примеры
Рассмотрим ниже еще несколько свойств элементов.
Свойство display: none;
Это свойство CSS скрывает от отображения любой элемент, на который вы нацеливаетесь. Например, если вам нужна страница без меню заголовка, например, вы просто поместите этот код на страницу:
.header-nav {
dispaly:none;
}
Свойства margin и padding
Margin — это отступы вокруг элемента. Они могут быть и отрицательными. При большем левом поле элемент сдвигается вправо. Большее верхнее поле смещает элемент вниз.
Отрицательный margin делает обратное. Например, отрицательное верхнее поле подтянет элемент вверх.
Padding — это отступы содержимого внутри элемента.
Вы можете использовать margin-top, margin-left, margin-right или margin-bottom, чтобы изменять отступ на одной стороне. Padding тоже имеет свои padding-left и так далее. 🙂
h2 {
margin-bottom:25px;
padding-left:15vh;
}
к оглавлению ↑
Основы CSS: иерархия, размещение
CSS означает «каскадная таблица стилей». Файл стилей имеет расширение «.CSS» .
Понятие «каскадная» означает, что файл читается сверху вниз, и если для одного и того же элемента написано более одного правила CSS, то правило, расположенное ниже, переопределит правила над ним.
Давайте рассмотрим пример:
/* каскадирование стилей */
header {
background-color: red; /*красный*/
}
header {
background-color: blue; /*синий*/
}
Элемент заголовка будет синим, потому что оба правила CSS пытаются сделать то же самое, но то, которое пытается сделать его синим, находится ниже.
Поэтому при написании правил CSS желательно размещать самые общие стили в верхней части файлов «.CSS», а более конкретные стили — внизу.
Если ваш CSS находится в нескольких таблицах стилей (а это почти всегда, особенно в WordPress), — то важно понимать, в каком порядке они читаются браузером. Это поможет при устранении неполадок: почему определенные CSS не работают.
к оглавлению ↑«Вес» селекторов CSS. Что это значит?
Не только порядок CSS в таблице стилей влияет на его работу. Важно то, как построен селектор. Вот что я имею в виду под «построенным». Давайте посмотрим пример HTML кода:
<body>ALL THAT CSS IS FIGHTING OVER LITTLE OLD ME! I'M YELLOW
</body>I WOULD BE BLUE
В этом примере у нас есть несколько HTML-элементов (<body>, <div> и h1)
Также есть классы ( et_pb_section, other_section и main_title )
И некоторые идентификаторы ( page-container и main-content )
Элементы, классы и идентификаторы представлены в CSS по-разному.
# = идентификатор (id),
. = класс
h1 = элемент
Следующий CSS полностью нацелен на текст заголовка h1. Очевидно, что текст может быть только одного цвета.
#page-container #main-content h1 {
color: yellow;
}
body h1 {
color: blue;
}
#main-content h1 {
color: green;
}
#main-content .et_pb_section h1 {
color: orange;
}
h1.main_title {
color: red;
}
h1 {
color: black;
}
По правилам, которые вы узнали выше о том, как таблицы стилей «каскадируются», можно подумать, что текст будет черным. Поскольку это последнее объявленное правило. Но на самом деле текст будет желтым. И вот почему:
В CSS элементы, идентификаторы и классы имеют разный «вес» или, другими словами, разные значения («важность»). Представите, что каждому селектору CSS присваивается некий двоичный номер:
Селекторы, созданные только из элемента, имеют значение 0001.
Селекторы сделанные только из класса имеют 0010
Селекторы из id имеют 0100
И если стиль добавлен непосредственно в HTML код (<h1 style = ”color: red”>) — то его номер 1000.
«Каскадный аспект» CSS вступает в силу только в том случае, если два правила CSS имеют одинаковое значение (одинаковый «вес»).
В противном случае правило наивысшего значения имеет приоритет над другими, даже если оно отображается выше в таблице стилей.
Снова посмотрите на пример CSS с их значениями в комментариях. Вы увидите, что, самое большее значение имеет правило установки текста h1 желтым.
#page-container #main-content h1 {
color: yellow; /* 0201 */
}
body h1 {
color: blue; /* 0002 */
}
#main-content h1 {
color: green; /* 0101 */
}
#main-content .et_pb_section h1 {
color: orange; /* 0111 */
}
h1.main_title {
color: red; /* 0011 */
}
h1 {
color: black; /* 0001 */
}
Но если CSS, добавленный в HTML, «весить» 1000, то как нам переопределить его в таблице стилей?
Интересный вопрос. 🙂 Нам поможет тег !Important.
к оглавлению ↑Тег !important
Тег !Important можно добавить в конец значения CSS, чтобы переопределить все остальное.
!Important «заявляет», что строка, в которой он находится, должна переопределить любой другой стиль для этого селектора. Даже если селектор является просто элементом, он переопределит классы, идентификаторы и встроенный CSS.
h1 {
color: black !important; /* 1001 Сейчас заголовок будет черным!!! */
}
Обязательно обратите внимание, что тег !Important находится между значением свойства и точкой с запятой.
Трудно переоценить важность тега !Important для CSS. Это один из наиболее часто используемых элементов CSS. Но он также является одним из наиболее часто «проблемных» тегов.
Видите ли, если вы хотите, чтобы определенный элемент всегда имел определенный цвет, вы можете использовать для этого !Important.
Но если вы не пытаетесь переопределить встроенный стиль из таблицы стилей, есть очень мало причин для использования тега !Important. Это «агрессивный шаг», и людям, которые пишут код после вас, сложно вносить изменения. Вместо этого рекомендую лучше создавать более сложный селектор.
Чтобы текст не был желтым без тега !Important в нашем примере можно сделать вот так:
#page-container #main-content .et_pb_section h1.main_title {
color: black; /* 0221 I'M STILL THE WINNER AND NO !IMPORTANT TAG WAS NEEDED */
}
Чем большее значение («вес») селектора — тем сложнее его переопределить. Поэтому из уважения до разработчиков, которые могут прийти после вас, используйте только тот селектор, который необходим для выполнения задачи.
Если селектор CSS, который вы пытаетесь переопределить, является элементом, используйте класс.
Если это элемент и класс, используйте два класса.
Если это два класса, используйте идентификатор… И так далее.
Это будет гарантировать, что код всегда работает, независимо от того, где он находится в каскаде.
Это также гарантирует, что любой, кто пытается переопределить ваши стили, может это сделать.
к оглавлению ↑Куда добавить CSS для сайта WordPress с Divi
Пользователи WordPress могут выбирать между различными методами добавления CSS на веб-сайты.
1.Файл style.css дочерней темы ( Divi например)
Если вы новичок в WordPress и Divi, термин «дочерняя тема» может показаться вам чуждым. «Дочерняя тема» представляет собой набор файлов, которые при объединении образуют «вторичную тему» по отношению к родительской теме, в данном случае — к теме Divi.
Чтобы узнать больше о дочерних темах, почему они важны и как их настроить, рекомендую прочитать пост в блоге
к оглавлению ↑2.Вкладка «Дополнительные стили» в настройках отображения темы
Стили можно добавить во вкладку «Дополнительные стили». Для этого в админпанели WordPress перейдите в вкладку «Внешний вид», выберите опцию «Настроить» и откройте вкладку «дополнительные стили»:
3. В настройках темы Divi
В настройках темы Divi есть опция «Пользовательский CSS»:
4. В настройках страницы Divi Builder.
Еще cпособ добавить CSS на сайт для пользователей Divi — использовать настройки страницы Divi Builder:
5. В настройках разделов, строк, модулей Divi Builder.
Можно добавлять стили CSS для конкретных элементов страницы в Divi: разделов, строк, модулей. Для этого выберите настройки модуля, строки или раздела и во вкладке «Расширенный» сможете ввести код CSS:
Итоги
Поняв основы CSS, вы можете сделать гораздо больше, чем просто менять цвета и показывать / скрывать элементы.
Если вы только изучаете CSS и управление веб-сайтом с помощью кода — то усвоение этих конкретных основ поможет вам комфортно читать, понимать и настраивать код CSS. Даже если вы никогда раньше не открывали редактор кода.
Задавайте вопросы, пишите комментарии.
Удачи.
Александр Коваль
