<MyRusakov.ru />

Joomla 3 с Нуля до Гуру

Joomla 3 с Нуля до Гуру

Видеокурс «Joomla 3 с Нуля до Гуру» поможет Вам повысить свой уровень в веб-разработке и научит создавать удобные и эффективные сайты на Joomla 3. Курс подходит как для опытных вебмастеров, так и для новичков, кто ещё только начинает.

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

После планирования начинается техническая реализация и создание собственного адаптивного шаблона.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Переменные в CSS

Переменные в CSS

Кто уже давно занимается вёрсткой, много раз чувствовали, что CSS-код труден для правок. Например, Вам захотелось поменять цветовую гамму на всей странице. Что для этого нужно? Поменять у всех блоков один цвет на другой. Неудобно? Согласен, для этого придумали SASS и LESS, однако, это так себе выход. Например, Вам хочется заменить всю цветовую гамму через JavaScript, или увеличить ширину нескольких блоков в 2 раза? Очевидно, что работа эта требует написание однообразного кода. К счастью, относительно недавно появилась возможность задавать переменные прямо в CSS, и браузеры их без проблем обрабатывают. Об этом мы поговорим в этой статье.

Давайте разберём следующий код:

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --bgcolor: #aaa;
      --color: #c00;
      --width: 200px;
    }
    p {
      background-color: var(--bgcolor);
      color: var(--color);
      width: var(--width);
    }
    div {
      background-color: var(--bgcolor);
      color: var(--color);
      width: calc(var(--width) * 2);
    }
  </style>
</head>
<body>
  <div>Заголовок</div>
  <p>Некоторый текст...</p>
  <div>Подвал</div>
</body>
</html>

Переменные в CSS объявляются в псевдоэлементе root (хотя можно и прямо в самих элементах объявлять переменные). Использование же их очень простое: вместо конкретного значения свойства пишется var(имя_переменной). Особенно интересно использование переменных вместе с функцией calc(). Благодаря этому можно увеличивать или уменьшать множество элементов на сайте, сохраняя при этом все пропорции.

Безусловно, переменные в CSS работают только в современных браузерах (хотя бы 2016-го года).

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (2):

Jo-jo Jo-jo 09.06.2017 02:25:15

Ну хоть когда-то что-то годное подъехало!

Ответить

dizzark dizzark 13.02.2018 13:19:11

Доброго времени суток! данные схемы напрочь отвергаются спецификациями и валидаторами CSS. Есть ли способ использования переменных в соответствии со спецификацией?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.