Сайтостроение Урок 4 CSS

В прошлом уроке мы разобрались с тегами, которые помогают вам красиво оформлять статьи на сайте. Сегодня мы разберёмся со стилями, которые вы получили вместе с установкой темы Вордпресс и возможно они требуют правки.

Где хранится информация о размере шрифта, его цвете, ширине колонок и т.п. на сайте?

Для этого дела (не только в Вордпресс) используется отдельный файл (style.css). Давайте откроем его. В админке: Внешний вид — редактирование. Вот этот непонятный текст и есть описание ваших стилей.
Описание каждого стиля выглядит как

Потом при выводе текста имя стиля указывается в теге DIV и он подхватывает из этого файла установленные параметры.

Какие параметры как обозначаются в файле style.css?

• width — ширина блока
• height — высота блока
• font-size- размер шрифта в этом блоке (например 12px)
• color — цвет шрифта в этом блоке. Указывается кодом из # и 6 символов. (например #645454) Если указано # и 3 символа, то их нужно повторить дважды чтобы найти нужный цвет в любом редакторе (то есть #666 это #666666)
• Float — обтекание (К какой стенке прижаться) Если укажете прижаться вправо текст будет обтекать слева.
• background — тут можно указать фоновую картинку или цвет заливки
• margin — отступы, насколько блок отступает от стенок и других блоков в порядке: верхний, правый, нижний, левый
• padding — тоже отступы, но текста внутри блока (верхний, правый, нижний, левый)

Как определись какой стиль отвечает за определённый блок?

И так у вас есть на сайте некоторый текст оформление которого вы хотите изменить, но не знаете какой стиль его определяет.

Для начала выясним в каком стиле находится нужный текст.

1. Правой клавишей мышки (В браузере Хром) по своему сайту — просмотр кода страницы.  (Ctrl +F) -» Найти»  — вставляем в поиск  кусок искомого текста. У нужного места вычисляем внутри какого блока Div он находится. Рядом с открывающим тегом DIV написано имя стиля.

2. Найдём этот стиль в файле CSS. Заходим в Админке:  внешний вид — редактор. Снова (Ctrl +F) и ищем название этого самого стиля (без приписок).

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

 

Примеры использования:

Как изменить размер шрифта в посте?

В простом случае размер шрифта определяется в стиле body, но это может быть и не так. Тогда найдите нужный стиль как было рассказано выше.

Админка: внешний вид — редактор. Найдите строку типа :

(Цифра может быть другая.) Это и есть размер шрифта. Меняйте эту цифру, сохраняйте файл и всё готово.

Как изменить ширину боковой колонки?

Скорее всего ширина боковой колонки определяется в стиле sidebar (но могут быть и варианты).  Так же при изменении ширины колонки нужно помнить, что сайт не резиновый и боковая колонка вместе с основным контентом должны влезать на сайт (А учитывая отступы ещё и должно оставаться место)

Поэтому если вы увеличиваете параметр ширины

В одном месте, уменьшите его в другом.

Ширина контента скорее всего определяется в стиле content. Просто убавьте в одном и прибавьте в другом. Общую ширину можно подсмотреть в стиле

header или container. Ну или просто найдите максимальную цифру у параметра width.

Редактировать:

Вы можете подписаться на новые посты этого блога: