Вам бонус- начислено 1 монета за дневную активность. Сейчас у вас 1 монета

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

Лекция



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

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

Шаг 1

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

?
1
2
3
4
body, h1, h2, h3, h4, h5, h6, blockquote, p {
margin: 0;
padding: 0;
}
  • Обратите внимание, мы поставиили margin: 0; вместо margin: 0 0 0 0;. Когда все параметры одинаковы, ставьте одно число. Тоже самое и для padding.
  • Сохраните файл. Обновите браузер. Не волнуйтесь, сейчас вы сможете добавить марджины и паддинги именно там, где вы хотите чтобы они отобразились, а не там, где браузеры разместят их по умолчанию.

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

Шаг 2

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

?
1
2
3
4
5
h1 {
font-family: Georgia, Sans-serif;
font-size: 24px;
padding: 0 0 10px;
}
  • 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-пикселевый нижний паддинг. Это добавит промежуток между заголовком блога и его описанием. Сохраните, обновите браузеры, вот результат:

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

Шаг 3

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

?
1
2
3
.post {
padding: 10px 0 10px 0;
}

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

?
1
2
3
4
.post h2 {
font-family: Georgia, Sans-serif;
font-size: 18px;
}

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

?
1
2
3
.entry {
line-height: 18px;
}

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

Шаг 4

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

?
1
2
3
p {
padding: 10px 0 0 0;
}

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

Шаг 5

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

?
1
2
3
4
p.postmetadata {
border-top: 1px solid #ccc;
margin: 10px 0 0 0;
}

Помните тэг параграфа с классом 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 {}:

?
1
2
3
4
5
6
.navigation {
padding: 10px 0 0 0;
font-size: 14px;
font-weight: bold;
line-height: 18px;
}

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

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

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

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

Из статьи мы узнали кратко, но содержательно про wordpress 2форматирование поста
создано: 2014-10-18
обновлено: 2021-03-13
132466



Рейтиг 9 of 10. count vote: 2
Вы довольны ?:


Найди готовое или заработай

С нашими удобными сервисами без комиссии*

Как это работает? | Узнать цену?

Найти исполнителя
$0 / весь год.
  • У вас есть задание, но нет времени его делать
  • Вы хотите найти профессионала для выплнения задания
  • Возможно примерение функции гаранта на сделку
  • Приорететная поддержка
  • идеально подходит для студентов, у которых нет времени для решения заданий
Готовое решение
$0 / весь год.
  • Вы можите продать(исполнителем) или купить(заказчиком) готовое решение
  • Вам предоставят готовое решение
  • Будет предоставлено в минимальные сроки т.к. задание уже готовое
  • Вы получите базовую гарантию 8 дней
  • Вы можете заработать на материалах
  • подходит как для студентов так и для преподавателей
Я исполнитель
$0 / весь год.
  • Вы профессионал своего дела
  • У вас есть опыт и желание зарабатывать
  • Вы хотите помочь в решении задач или написании работ
  • Возможно примерение функции гаранта на сделку
  • подходит для опытных студентов так и для преподавателей



Комментарии


Оставить комментарий
Если у вас есть какое-либо предложение, идея, благодарность или комментарий, не стесняйтесь писать. Мы очень ценим отзывы и рады услышать ваше мнение.
To reply

Системы управления контентом CMS

Термины: Системы управления контентом CMS