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

В 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"; }

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Добавить комментарий

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

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

CSS flexbox

CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси. Flexbox состоит из

 
Препроцессор Sass

Препроцессор Sass

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass

 
Программируемый язык стилей LESS

Программируемый язык стилей LESS

LESS (Leaner Style Sheets, компактная таблица стилей) — это динамический язык стилей, который разработал Alexis Sellier. Он создан под влиянием языка стилей Sass, и, в

 
CSS-фреймворки

CSS-фреймворки

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

 

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: