web-разработка

Значения стилевых свойств

В CSS значения стилевых свойств бывают в виде: строк, чисел, процентов, размеров, цвета, адреса и ключевого слова. Рассмотрим их подробнее.

1. Строки

Любые строки необходимо брать в двойные или одинарные кавычки. Если внутри строки требуется оставить одну или несколько кавычек, то можно комбинировать типы кавычек или добавить перед кавычкой слэш. Пример:
'Сайт "it-black.ru"'
"Сайт 'it-black.ru'"
"Сайт \"it-black.ru\""

2. Числа

Значением может выступать целое число, содержащее цифры от 0 до 9 и десятичная дробь, в которой целая и десятичная часть разделяются точкой. Пример:
p {
    font-weight: 500; /* Жирное начертание */
    line-height: 1.5; /* Межстрочный интервал */
   }

3. Размеры

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

Относительные единицы

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

Абсолютные единицы

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

4. Проценты

Проценты применяются в тех случаях, когда надо изменить значение относительно родительского элемента или когда размеры зависят от внешних условий. Так, ширина таблицы 100% означает, что она будет подстраиваться под размеры окна браузера и меняться вместе с шириной окна. Пример:
table {
    width: 100%; /* Ширина таблицы в процентах */
    background: #f0f0f0; /* Цвет фона */
   }

5. Цвет

Цвет в стилях можно задавать тремя способами: по шестнадцатеричному значению, по названию и в формате RGB.
В статье «Как использовать цвета» мы рассматривали все возможные способы задания цвета. Если вы ещё не читали данную статью, тогда советуем изучить её.

6. Адреса

Адреса (URI, Uniform Resource Identifiers, унифицированный идентификатор ресурсов) применяются для указания пути к файлу, например, для установки фоновой картинки на странице.
Для этого применяется ключевое слово url(), внутри скобок пишется относительный или абсолютный адрес файла. При этом адрес можно задавать в необязательных одинарных или двойных кавычках. Пример:
body { 
    background: url('https://it-black.ru/images/error_404.png') no-repeat; /* абсолютный адрес */
   }
   div { 
    background: url(images/error_404.png) no-repeat; /* относительный адрес */
    padding-left: 20px;
    margin-left: 200px;
   }

7. Ключевые слова

В качестве значений активно применяются ключевые слова, которые определяют желаемый результат действия стилевых свойств. Ключевые слова пишутся без кавычек. Пример:
Правильно: P { text-align: left; }
Неверно: P { text-align: "left"; }
2023-11-17 23:37 Самоучитель по CSS