Как вы можете использовать CSS — советы и рекомендации по веб-дизайну для начинающих

Даже вы можете научиться использовать CSS для оформления своих веб-страниц с помощью этих советов по CSS для начинающих.

Вам не нужно ничего знать о компьютерном коде. Все, что вам нужно знать, это как копировать и вставлять.

Но сначала, что такое CSS?

Каскадные таблицы стилей (CSS) — это код языка таблиц стилей, который разработчики тем используют для описания и изменения представления или внешнего вида HTML-документа.

Что делает CSS?

Проще говоря, файл CSS делает HTML-страницы красивыми.

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

Неважно, какую платформу для ведения блога вы используете.

В настройках темы у вас будет опция « Пользовательский CSS » или « Дополнительный CSS ».

Возможно, вы никогда не смотрели на этот вариант.

Или, если да, вы можете подумать, что научиться программировать слишком сложно.

Но это очень легко.

Я ничего не знаю о веб-разработке или синтаксисе CSS, но я могу изменить атрибут стиля за считанные секунды.

Все, что вам нужно сделать, это использовать инструменты разработчика веб-браузера Chrome или Firefox и изучить несколько простых трюков и советов по CSS.

Давайте посмотрим, насколько это просто.

Почему вы хотите научиться редактировать CSS своего блога?

Вероятно, у вас много настроек в теме вашего блога.

Но есть много мелких элементов, которые могут отсутствовать.

Даже в премиальных темах для WordPress некоторые опции недоступны в стандартных опциях.

Вот почему вы можете помочь своему CSS работать лучше, внося свои собственные правки и изменения.

Изменяя внешнюю таблицу стилей, она может ссылаться на все ваши HTML-страницы.

Если вы измените заголовки HTML на одной странице, тег HTML изменится на всех ваших страницах.

Ссылка называется псевдоэлементом.

Это означает, что если вы измените внешний вид заголовка H2, он изменит все заголовки H2 на вашем сайте.

Но вам не нужно знать все об этих осложнениях.

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

Давайте начнем с нескольких простых советов по CSS для начинающих.

Как легко изменить встроенный CSS

Первый шаг — открыть свой блог в Firefox, Chrome или Microsoft Edge.

В приведенных ниже примерах я использовал Firefox. Я нахожу его немного более удобным в использовании, чем Chrome.

Но оба работают одинаково.

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

Теперь откройте Инструменты разработчика, Инспектор, из меню Инструменты в Firefox или меню Вид в Chrome.

Щелкните Инспектор, чтобы открыть панель инструментов.

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

Наведите курсор на страницу, чтобы выбрать элемент. Или вы можете нажать на отдельные элементы в списке.

Вы увидите, что каждый выбранный вами элемент будет выделен синим цветом в представлении браузера вашей веб-страницы.

Теперь вы готовы внести изменения во внешний вид вашей страницы.

Использование селектора CSS

В моем примере я собираюсь изменить внешний вид элемента заголовка H2.

Вы можете изменить элемент H1, основной текст или подпись к изображению.

Я хочу начать с изменения размера шрифта. Все, что вам нужно сделать, это щелкнуть размер шрифта тега стиля и изменить число.

Я изменил размер с 33px до 56px. Вы можете видеть, что размер заголовка теперь больше.

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

Вы можете сколько угодно экспериментировать с любым HTML-элементом.

Все, что вы видите в панели браузера, является лишь предварительным просмотром того, как будут выглядеть ваши изменения в правиле CSS.

Теперь я хочу изменить цвет текста.

Если вы нажмете на цветную точку между цветовой меткой и номером, вы откроете селектор цвета.

Теперь просто выберите цвет, который хотите использовать.

Изменить цвет атрибута HTML очень просто. Здесь я изменился с черного на синий.

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

Текущее значение — 1,2, что является слишком большим расстоянием между строками. Я хочу, чтобы линии были ближе друг к другу.

Итак, я поменяю его на 1.0.

Это выглядит намного лучше.

Я внес три изменения в то, как мой заголовок H2 выглядит в режиме предварительного просмотра. Я изменил размер шрифта, цвет и межстрочный интервал.

Теперь пришло время добавить эти изменения на мой живой сайт.

Как получить код для своего сайта

Вам нужно скопировать строки кода, которые вы изменили.

Выберите и скопируйте весь код. Убедитесь, что вы скопировали все строки, включая последнюю скобку.

Теперь вставьте его в текстовый редактор. Вы можете использовать Блокнот на ПК или текстовый редактор на Mac.

Другое изменение, которое мы внесли, касалось цвета. Нам также нужно скопировать эту строку.

Вам нужно только скопировать строку для цвета.

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

Скопируйте строку.

Теперь добавьте строку в текстовый редактор.

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

Теперь вы готовы добавить эти три изменения на свой работающий сайт.

Добавьте код на свой сайт

Перейдите к параметрам темы и выберите параметры CSS.

В темах WordPress он находится в настройщике тем и называется «Дополнительный CSS» или «Пользовательский CSS».

На других блог-платформах он будет называться примерно так же.

Теперь скопируйте весь код из текстового редактора и вставьте его на вкладку Customizer.

Как только вы вставите код, программа предварительного просмотра покажет вам сделанные вами изменения.

Нажмите опубликовать, и вы сделали это.

Вот сравнение до и после моих изменений.

Вы можете сделать гораздо больше

Мои советы по CSS для начинающих. Пошаговое введение в редактирование HTML CSS-стили — это только начало.

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

Легко добавлять границы или тени к изображениям, перемещать текст влево или вправо или изменять ширину основного текста.

Вы можете перемещать поля, уменьшать или увеличивать отступы и изменять выравнивание.

Есть сотни опций, которые вы можете редактировать.

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

Любые изменения, которые вы вносите, являются предварительными и отображаются только в этом окне браузера.

Неважно, что вы пытаетесь сделать, работает это или нет.

Думайте об этом как о игровой площадке, на которой вы можете узнать, сколько еще вы можете сделать для оформления своего веб-сайта или блога.

Будьте любопытны, и вы получите удовольствие от изучения этого нового навыка с помощью этих советов по CSS для начинающих.

Большой бонусный совет с инструментами разработчика

Теперь, когда у вас открыт фрейм инструментов разработчика, вы можете сделать одну очень удобную вещь.

Вы можете проверить скорость своего сайта.

Все, что вам нужно сделать, это нажать на вкладку «Сеть».

Затем нажмите CTRL+R.

Вы увидите время скорости при полной загрузке страницы красным цветом в строке внизу, отмеченной стрелкой.