вход

Немного о CSS свойстве border

Немного о CSS свойстве border

Странно сознавать, что после нескольких лет разработки CSS стилей и чтения дизайн блогов и книг по CSS, я до сих пор не все знаю о некоторых общих свойствах CSS.

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

И вот однажды я наткнулся на необычное использование некоторых свойств CSS. Посмотрите на следующий фрагмент кода CSS:

#mainview_box {
	border-color: black white white black;
}

Моя первая реакция была такой: "Это должно быть не так. Это не должно работать. С каких это пор для задания цвета для каждой границы используется сокращенная запись, да еще в таком виде? "Но потом я быстро понял, что возможно эта запись правильная, но применяется она на практике раз в десять лет, и поэтому это кажется для меня неправильным. Поскольку я привык всегда задавать границы определённым образом.

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

#mainview_box {
	border: solid 1px black;
}

Я очень редко использую полное описание, и в частности такие свойства как : border-color , border-style , border-left-style. В 99% случаях я использую

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

Конечно же в стандарте приведено описание того, что можно использовать задание цвета для каждой границы. В этом случае запись должна следовать правилу назначения цветов : сверху, справа, снизу, слева (по часовой стрелке, начиная сверху).

Свойства border-style и border-width.

Такой прием работает также и с такими свойствами, как border-style и border-width, определяющих стиль и ширину для каждой из границ целевого элемента.

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

#mainview_box {
	border-width: 2px 1px;
	border-style: solid dashed;
}

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

Имейте в виду...

Вы не можете использовать набор составных обявлений для каждой границы (хотя это было бы логично). Указанный прием относиться только к трем свойствам, упомянутым выше. Таким образом, следующие объявления будут считаться недействительными:

#mainview_box {
	/* это ошибка! */
	border: solid dashed 1px 2px black white white black;
}

Не очень практично ...?

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

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → Немного о CSS свойстве border

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.