WORDPRESS 21 Форматирование поста

Привет, сегодня поговорим про wordpress 2форматирование поста, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое wordpress 2форматирование поста , настоятельно рекомендую прочитать все из категории Системы управления контентом CMS.

Сегодня я расскажу вам как форматировать все элементы поста, для этого вам понадобится только файл style.css. Откройте его в редакторе и приступим.

Шаг 1

Избавьтесь от большинства марджинов и паддингов — введите следующий код над body{} вstyle.css:

• Обратите внимание, мы поставиили margin: 0; вместо margin: 0 0 0 0;. Когда все параметры одинаковы, ставьте одно число. Тоже самое и для padding.
• Сохраните файл. Обновите браузер. Не волнуйтесь, сейчас вы сможете добавить марджины и паддинги именно там, где вы хотите чтобы они отобразились, а не там, где браузеры разместят их по умолчанию.

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

Шаг 2

Придаем стиль H1-заголовку, вставьте эти строки под body{}:

• font-family: Georgia, Sans-serif; меняет шрифт H1-заголовка с Arial (доставшемуся ему от body) на Georgia. Об этом говорит сайт https://intellect.icu . Если в системе не установлен Georgia, браузер будет отображать Sans-serif;
• font-size: 24px; ну здесь все понятно без обьяснений. Хотя обратите внимание на то, что когда вы устанавливаете размер шрифта 12px внутри body{}, тэги H1 и H2 не следуют этому изменению. Дело в том, что для тэгов заголовка есть свои собственные правила. Чтобы производить изменения над ними, нужно устанавливать отдельные параметры их стилизации.
• padding: 0 0 10px; означает 10-пикселевый нижний паддинг. Это добавит промежуток между заголовком блога и его описанием. Сохраните, обновите браузеры, вот результат:

Шаг 3

Вставьте следующий код под #container{} (сохраняйте изменения и обновляете браузеры после введения каждого блока кода, чтобы видеть изменения шаг за шагом):

Вы добавили 10-пикселевые отступы сверху и снизу к каждому DIV-у с классом post.

.post h2 — это не общее правило. Оно направленно специально на H2-подзаголовки внутри post DIV. На H2-подзаголовки в сайдбаре это не влияет. Это называется наследование стилей.

Мы увеличили междустрочный интервал внутри блока поста.

Шаг 4

Вставьте эти строки под a:hover {}:

10-пикселевый верхний отступ для каждого тэга параграфа.

Шаг 5

Вставьте под .entry {}:

Помните тэг параграфа с классом postmetadata? Стилизовать отдельный тэг параграфа и DIV — это почти одно и то же. Вы можете назначить рамку (border), отступы (margin и padding) и фон (background) к любому из тегов.

К тэгу параграфа postmetadata вы добавили серую рамку и 10-рх верхний отступ к нему.

border-top означает только верхнюю часть рамки. border-left означает только левую часть рамки и т.д. Только border, без -top, -right, -bottom или -left означает рамку со всех сторон. Например, border: 1px solid #ccc; значит, что всем четрым сторонам рамки вы применили серый цвет и ширину 1 пиксель.

Шаг 6

Вставьте этот код под p.postmetadata {}:

Контрольный пример: для DIV-а navigation, который включает ссылки Следующая страница и Предыдущая страница, мы только что:

• добавили 10-пиксельный верхний отступ
• изменили размер его шрифта до 14 пикселей
• выделили шрифт жирным
• увеличили междустрочный интервал до 18 пикселей

На сегодня все. Если что-то не понятно или я плохо объяснил — пишите в комментариях.

На этом все! Теперь вы знаете все про wordpress 2форматирование поста, Помните, что это теперь будет проще использовать на практике. Надеюсь, что теперь ты понял что такое wordpress 2форматирование поста и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Системы управления контентом CMS