—»     —»   Учимся стенографическим обозначениям CSS
  Раздел: Подсказки, CSS/Style Sheets   Комментариев: 1  

Учимся стенографическим обозначениям CSS



Объявляя конкретные параметры CSS, у вас есть выбор – подписывать параметры полностью, либо укорачивать параметр, и включать в него сразу несколько других.

Давайте научимся использовать стенографические обозначения, и познакомимся с некоторыми примерами. Мы постараемся максимально развернуто объяснить вам о том, что это такое.

Учимся стенографическим обозначениям CSS

Пример стенографических обозначений

Объявление параметра фонового изображения довольно часто встречается в CSS. Объявление фона в стенографическом обозначении может выглядеть примерно так:

.element {  
background: #fff url(../images/bg-image.png) no-repeat fixed 20px 20px;
}

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

.element {  
background-color: #fff;
background-image: url(../images/bg-image.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20px 20px;
}

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

Простой пример стенографических обозначений

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

Поля и отступы – отличные примеры параметров, которые в процессе разработке используются очень часто. И очень часто их используют в стенографических обозначенияx. К тому же, их не так сложно понимать:

.element {  
padding: 20px;
}

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

Мы также можем сделать следующее:

.element {  
padding: 20px 10px;
}

В данном примере мы подробно объявляем верхний и правый отступы. Нижний и левый отступы, хотя и не объявлены точно, будут иметь такие же значения, как верхний и правый (именно в этом порядке). Итак, блок будет иметь верхний и нижний отступы равные 20 пикселям, а левая и правая стороны будут иметь отступы равные 10 пикселям.

И, опять же, давайте рассмотрим полный вариант объявления данных параметров:

.element {  
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}

Границы и параметр CSS3 border-radius будут работать примерно таким же образом, за исключением того, что параметр закругленных углов связан с углами, а не сторонами.

Более сложные стенографические обозначения

Существуют также и более сложные вариации стенографических обозначений, но (за некоторыми исключениями) которые вряд ли вызовут проблемы, если хорошо научиться ими пользоваться. Пример с фоном, который мы приводили ранее, как раз является одним из таких обозначений.

Давайте сразу выделим значения, с которыми у вас могут возникнуть недопонимания:

* list-style
* font
* border
* outline

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

* animation
* border-image

Так что же делает эти значения более сложными? Так как эти параметры принимают различные типы значений (иногда ключевые слова, иногда какие-то пункты и так далее), внесение конкретных значений в стенографические обозначения зачастую может привести к неожиданным результатам.

Вот пример использования параметра background:

.element {  
background-color: blue;
background: url(../images/bg-image.png) no-repeat;
}

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

Не попадайтесь в ловушки

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

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

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

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

Завершение

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

Конечно же, если вы новичок, то лучше использовать полные значения, чтобы сначала понять, где и что подходит. Но в большинстве случаев гораздо удобнее и продуктивнее использовать стенографические обозначения.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 5882   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 9 апреля 2012 @ 18:52
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Эх, раньше тоже использовал метод полной записи, потом как прочитал книгу по CSS - "Большая книга CSS", Дэвида Макфарланда - стал лучше понимать процесс создания CSS, всякие фишки по совместимости и методы написания кода...
Теперь все время использую "стенографический" метод laughing


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930