Предзагрузка страницы

Руководство css

Для кого

Для тех кто наполняет, наполнил и тем кому еще предстоит наполнить страницы сайта.

Зачем

Представим, что нам нужно внести изменения на сайте или наоборот добавить контент, но с определенным отображением, и тут у нас возникают проблемы:

  1. Как вообще вносить изменения на сайт? Ответ: тексты на сайтах отображаются с помощью специальных тегов языка разметки HTML (именно этот язык задает структуру отображения текста при выводе на экран - указывает где идет абзац, а где нумерованный список). Но какие тогда HTML теги использовать?
  2. Как изменить внешний вид текста: цвет, положение, размер и т.д.? Ответ: для этих целей используются CSS (Cascading Style Sheets — каскадные таблицы стилей), но снова вопрос: какие стили использовать, чтобы получить желаемый результат?

Да, конечно, какие-то задачи можно решить при помощи визуального редактора, встроенного в систему управления сайта (CMS), если таковая имеется, но не всегда можно добиться желаемого результата. Например, сделать рамку и расположить три картинки в ряд или вывести ненумерованный список со специальными маркерами синего цвета, пример:

example-css-guide

Решение

Для решения подобных задач нужно обратиться к руководству по css и попробовать подобрать нужный тег, класс, разумеется, если front-end специалист предусмотрел и подготовил соответствующее руководство с набором инструментов. Это может быть как внутренняя инструкция компании, которая выполнила разработку сайта, так и общедоступная инструкция в открытом доступе.

Как пользоваться

Для примера возьмем инструменты и руководство популярного общедоступного css фреймворка bootstrap. Почему именно бутстрап? Да потому что большая вероятность того, что Ваш сайт использует сей фреймворк, и Вы сможете испытать всю мощь руководства по css, если же нет, не беда, в следующей статье я расскажу как добавить bootstrap для вашего сайта.

Итак рассматривать будем то, что понадобится для наполнения содержания страниц, некоторые блоки данного руководства опустим. У нас остались следующее разделы:

  1. Типография
  2. Таблицы
  3. Формы
  4. Кнопки
  5. Картинки
  6. Вспомогательные классы

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

Давайте решим пару задач для лучшего понимания:

Задача №1: выровнять текст по центру.

Решение: переходим в раздел типография в подраздел классы выравнивания и находим нужный класс, в нашем случаи это text-center, теперь можно применить данный класс к элементу (html-тегу), который нужно выровнять по центру - мы пропишем нужный класс css к нужному тегу, например для абзаца (тег <p>) это будет выглядеть следующим образом:

<p class="text-center">
Текст, который выравнивается по центру.
</p>

example-css-guide

Задача №2: сделать изображение в форме круга.

Решение: переходим в раздел изображения в подраздел формы изображения выбираем нужный класс, в нашем случае это img-circle, и задаем нужному элементу данный класс. Мы успешно решили очередную задачу, не прибегая к сторонней помощи:

 <img src="/images/picture.jpg" alt="круглая картинка" class="img-circle" />

example-css-guide

Отсюда можно сделать вывод: имея хороший набор инструментов, всегда можно найти их применение и быстро решить поставленные задачи.

P.S. хороший front-end специалист должен сопровождать каждый проект вспомогательными классами и руководством как и где их применять. Соответственно каждая компания, создающая сайты, должна давать сопроводительное руководство по ccs-стилям, чтобы упростить работу специалистов, которые наполняют сайт компании.