Изменяем стиль заголовка h2 и продолжаем знакомство с Git

Добрый день, друзья!

В предыдущей статье мы разобрались как подключить git к WordPress проекту. Надеюсь, что вы не только разобрались, но и выполнили все необходимые действия, и, думаю, у вас все получилось.

Сегодня я хочу продолжить наше знакомство с git. Мы на конкретном практическом примере рассмотрим как работать с git и увидим первые преимущества по сравнению с нашим старым способом внесения изменения на сайт (без системы контроля версий).

Изменения, которые я хочу внести на сайт касаются стиля заголовка h2.

Вот как в статьях, на данный момент, выглядит текст, размещенный в тегах h2:

 

Текст в тегах h2 до изменения стилей

 

Как видите, не очень хорошо смотрится: между первой и второй строкой – маленький отступ, да и размер шрифта, думаю, надо немного уменьшить, а то получается крупнее даже, чем заголовок статьи в h1.

Давайте этим и займемся.

Буду давать вам не только готовое решение, какие изменения внести в каких файлах, но и постараюсь описать логику и действия, как я к этому прихожу. Потому что я тоже, в большинстве случаев, сразу не знаю на 100% где и что нужно править. К тому же, задачи у вас могут возникать не в точности такие же, как я описываю, но похожие. И, на будущее, гораздо полезней будет научиться самому “ловить рыбу”, чем пытаться найти блог, где её “уже словили”.

Итак, начнем. В прошлый раз мы закончили на том, что развернули (склонировали) наш проект из центрального репозитория на локалхост. Поэтому запускайте свой локальный сервер, который вы используете (Denwer, OpenServer и т.п.) и открывайте ваш сайт на локалхосте. Здесь мы можем экспериментировать сколько угодно.

Сформулируем для себя коротко задачу, что нам нужно сделать:

Задача. В статьях для заголовка h2 уменьшить размер шрифта и увеличить межстрочный интервал.

Открываем любую статью, в которой есть заголовок h2.

Смотрим исходный код этого заголовка.

 

Исходный код заголовка h2

 

1. Видим, что заголовок размещен просто в тегах h2, без всяческих классов.

2. Стили тега h2 в css-файле.

3. Текущий размер шрифта. Здесь можно задать другое значение и сразу же посмотреть на странице изменения. Но эти изменения нигде не сохранятся. Просто браузеры для удобства разработчиков предлагают такой динамический функционал. После того, как мы подберем необходимое нам значение нам нужно внести это значение в соответствующий css-файл и сохранить изменения.

4. screen.css – вот необходимый нам файл стилей и даже строка указана, в которой прописаны стили h2. Если навести на screen.css указатель мыши, то в подсказке будет указан абсолютный (полный) путь к файлу.

С размером шрифта все понятно – нужно просто подобрать устраивающее нас значение. У меня тут было указано 2em. Предпочитаю в пикселях. Подобрал размер 20px.

Теперь что делать с межстрочным интервалом? Я не знал как его задавать, поэтому – Google или Яндекс в помощь: “css межстрочный интервал”.

За межстрочный интервал отвечает свойство line-height. Его можно задавать и процентами, и множителем, и точным значением. Себе установил значение normal – расстояние между строк будет вычисляться автоматически.

Еще добавил свойство font-weight: bold, чтобы заголовок был жирным.

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

Теперь найдите css-файл, в который нужно внести изменения (у меня screen.css)  и откройте его в вашем любимом редакторе. Внесите в него нужные изменения – те свойства и значения, которые подобрали. И не забудьте сохранить, если нет автоматического сохранения.

По этому поводу немного отвлекусь для анонса. Сейчас я использую редактор PhpStorm. Так вот в нем настроено автоматическое сохранение изменений. С ним я уже отвык нажимать ctrl+s. Плюс, еще есть пункты меню для удобной работы с Git, но об этом всем я буду писать в следующих статьях. Пока с Git будем работать из консоли – это тоже надо уметь делать.

Итак, сохранили изменения?

У меня получился такой стиль для h2:

Теперь посмотрите как отразились эти изменения на вашем сайте. Для обновления кеша браузера, что бы подтянулись новые стили, используйте сочетание Ctrl+F5.

Обращаю внимание, что эти изменения коснутся всех заголовков h2, которые не имеют каких-то классов. Т.е. все, что заключено просто в теги <h2></h2> теперь будет выглядеть согласно новому стилю.

Если вы работаете “по старинке”, то вам осталось просто закинуть измененный css-файл на сервер. Но мы работаем по новому! Мы подружились с git. =)

Поэтому нам нужно подтвердить наши изменения локально (сделать коммит – commit); потом отправить (“толкнуть”, “запушить” push) их в центральный репозиторий; и затем подтянуть (pull) на сервер.

1. Commit

Заходим в консоль на локальном компьютере и переходим в корень сайта.

Выполняем команду:

параметр -a  указывает git, чтобы он автоматически отследил измененные файлы (иначе нам пришлось бы сначала выполнить команду git add)

параметр –m -  это сообщение к коммиту, это вы уже знаете.

2. Push

Далее – команда для отправки изменений в центральный репозиторий:

У вас будет запрошен пароль вашего пользователя (bitbucket, github или какое хранилище вы используете).

Все, теперь все изменения лежат в центральном хранилище и доступны будут вам в любом месте и на любом устройстве. Но, они еще не вылиты на сервер хостинга. Затянем мы их туда в пункте 3.

Вот одно из главных удобств работы с глобальным хранилищем. Например, вы выполняли какую-то объемную задачу на работе и не успели её доделать. Вы можете залить текущие изменения в репозиторий, а потом дома подтянуть их себе на локальную машину. При этом рабочая версия сайта остается неизменной. Выполняете задачу до конца и опять “толкаете” в центральное хранилище. При этом, над сайтом могут одновременно работать несколько человек и оперативно получать ваши наработки.

На рабочий же сервер будет выливаться только стабильная версия сайта.

3. Pull

Эта команда выполняется уже на сервере хостера. Зайдите в PuTTy или терминал WinSCP. Как всегда, перейдите в корень вашего сайта. И выполните команду:

Введите пароль.

Теперь изменения затянуты на рабочий сервер. Заходите на сайт, Ctrl+F5 и проверяйте все ли ок.

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

С чем нас и поздравляю!

Всем успехов и до новых встреч!

Понравилась статья? Не забудьте поделиться с друзьями и коллегами:

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

3 комментария к записи “Изменяем стиль заголовка h2 и продолжаем знакомство с Git”

  1. Андрей

    А как второго человека подключить к проекту?

    • Алексей Ершов

      Дать доступ в центральном хранилище (github, bitbucket или какое используете).

      • Андрей

        А мы должны на разных ветках работать?
        Не получается сливать изменения.
        Я могу изменения отправалять.
        У второго получается только получить, свои он не может отправить в bitbucket

Оставить комментарий

Для размещения кода в комментарии используйте теги <pre> </pre>, например:


Подписаться, не комментируя