Сокращённые формы записи CSS

« Предыдущая запись
 
  Следующая запись »
 

В своё время я начинал учиться верстать, и учился отчасти у программы Macromedia Dreamweaver (ныне Adobe Dreamweaver). И всё было хорошо, кроме того, что в большинстве случаев (если не во всех - прим.ред.) она не делает сокращённой записи CSS-свойств. И вот сейчас, с вершины своей практики, иногда дико наблюдать несокращённые версии записи, поскольку они порой могут увеличить код в полтора-два раза.

mycssi thumb Сокращённые формы записи CSS

Сокращённой формой записи обладают следующие css-свойства:

  • background
  • margin
  • padding
  • border
  • font
  • list-style
  • outline

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

 

Свойство background

Свойство background собирается из следующих CSS-свойств: background-attachment, background-color, background-image, background-position, background-repeat. Формат записи свойства следующий:
background: background-attachment || background-color || background-image || background-position || background-repeat

Однако это не мешает менять местами некоторые свойства, а некоторые и выкидывать. Например,

background-attachment: scroll;
background-color: #FFF;
background-image: url(img/sony.gif);
background-position: top left;
background-repeat: no-repeat;
/*пять строчек выше идентичны одной ниже*/
background: scroll #FFF url(image.jpg) top left no-repeat;

Все свойства можно опускать и менять местами (насколько помню - все). Например, если нам надо прописать только картинку-бэкграуд и е повторяемость, то строка превращается в:

background: url(image.jpg) no-repeat;

 Особенности:

  • Если параметр или свойство background-color имеет код цвета с одинаковыми символами (например, #FFFFFF или #000000), то цвет можно переписать не шестью, а тремя символами (например, #FFF или #000).
  • Читал, что если в url свойства background-image использовать кавычки (одинарные или двойные, не важно), то могут возникнуть проблемы с отображением в некоторых браузерах. Если честно, то на практике отличий никаких не видел. Быть может для старинных браузеров это актуально (не приписывая туда 6 ишак и скорее всего даже 5,5), то сейчас, вроде как, всё равно.

 

Свойства margin и padding

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

Свойство margin собирается из следующих CSS-свойств: margin-top, margin-right, margin-bottom, margin-left. А вот формат записи может быть различен. Самый полный будет выглядеть следующим образом:
margin: margin-top || margin-right || margin-bottom || margin-left

Запомнить порядок очень просто, потому что тут всё как в часах: начиная с полудня (top) двигаемся по часовой стрелке (top, right, bottom, left).

Сам margin может принимать от 1 до 4 значений. Про 4 значения понятно, а что с остальными? Если значение одно, то всем четырём сторонам одинаковый отступ будет. Если два - то первое значение задаёт верхний и нижний отступ, а второе - левый и правый. Если три - первое значение для верхнего отступа, второе - правого и левого,  третье для нижнего. Запись из трёх значений используется очень редко.

margin-top: 15px;
margin-right: 0;
margin-bottom: 5px;
margin-left: 20px;
/*четыре строчки выше идентичны следующей: */
margin: 15px 0 5px 20px;
margin: 15px 0 15px 0;
/*смело заменяются на*/
margin: 15px 0;
margin: 15px 15px 15px 15px;
/*идентичны*/
margin: 15px;
margin: 15px 5px 10px 5px;
/*могут быть заменены на*/
margin: 15px 5px 10px;

Особенности:

  • Internet Explorer до версии 5.5 не воспринимает эти два свойства у inline элементов.
  • Если параметр равен 0, то единицу измерения можно не указывать.
  • Не забываем, что margin может использовать отрицательные значения, а padding - нет.
  • И не забываем, что margin может принимать слева и справа значение auto.

 

Свойство border

Border собирается из нескольких CSS-свойств, которые перечислять не буду, а приведу в примере. Формат записи свойства следующий:
border: border-width || border-style || border-color

border-top-width: 1px;
border-top-style: solid;
border-top-color: #000;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000;
/* 12 строк легко заменяются на 4 */
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
/* однако в данном случае легче заменить на одну строку */
border: 1px solid #000;

В принципе, на практике используются только 14-17 строки, если надо задать границу какой-то одной границе или всем, но разные, и 19 строка, если надо задать везде одинаковые границы.

Особенности:

  • Internet Explorer до версии 5.5 не воспринимает эти два свойства у inline элементов.
  • Если цвет не указан, то он берётся из значения CSS-свойства color.
  • Если нужна рамка со всех сторон и только с одной стороны она должна отличаться, то можно использовать следующий способ:
    border: 1px dotted black;
    border-bottom: 1px solid #000;

 

Свойство font

Свойство font собирается из следующих CSS-свойств: font-style, font-variant, font-weight, font-size, line-height, font-family. Помимо CSS-свойств по спецификации CSS2 можно добавлять следующие системные значения: caption, icon, menu, message-box (в IE4+ messagebox), small-caption (в IE4+ smallcaption), status-bar (в IE4+ statusbar). Правда большого смысла в их использовании не вижу. Формат записи свойства следующий:
font: font-style || font-variant || font-weight || font-size[/line-height] || font-family | CSS2FontConstant

В отличие от background, в font нельзя всё переставлять местами как хочется. Если кратко, то следует придерживаться следующих правил:

  • Первые три свойства (font-style, font-variant, font-weight) могут менятся между собой местами, а также не указываться вовсе.
  • font-size[/line-height] и font-family всегда идут после первых трёх и именно в этой последовательности
  • font-size самый обязательный параметр и его указывать необходимо всегда. А вот line-height можно не указывать вовсе
  • Крайне желательно указывать и font-family, поскольку по спецификации он должен быть указан обязательно, из-за чего, собственно, некоторые браузеры могут воспринимать ваш код не так как надо. Например, вместо font: italic 150%; надо писать font:italic 150% Tahoma,Verdana;
font-family: Tahoma, Verdana;
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 150%;
line-height: 18px;
/* идентичны строке */
font:italic normal bold 150%/18px Tahoma,Verdana;

 

Свойства list-style и outline

Формат записи свойств следующий:
list-style: list-style-type || list-style-position || list-style-image
outline: outline-color || outline-style || outline-width

Если установить для list-style-type и list-style-image значения none, то у списка будет отсутствовать какой-либо маркер. Пример: ul { list-style: none; }.

Outline, по большому счёту, нужен для того, чтобы убирать пунктирную рамку вокруг элементов в огнелисе и некоторых ишаках (подробнее в статье по ссылке)

 

Вот пожалуй и всё. Если есть дополнения, исправления, замечания, пожелания, буду рад услышать icon smile Сокращённые формы записи CSS . А пока надо продержаться только пятницу и выходные! Так что живём icon smile Сокращённые формы записи CSS


1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 5, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 13 на запись

"Сокращённые формы записи CSS"

  1. Медвед
    05/02/2010 at 17:55 Постоянная ссылка Цитировать

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

    было бы интересно прочитать про правилах валидности кода, я лично не понимаю некоторые ошибки на которые мне указывает валидатор, постоянно показывает на тег img (ну тут понял надо alt) показывает на закрывающую скобку и тд =)

  2. а мне вот приходилось видеть такие книжки =) При этом многие работают в дриме, некоторые по нему учатся, а дрим почти не делает сокращений, увы. Ну и, собственно, в чужих вёрстках частенько встречаю размахаистые записи. Сам кстати до недавнего времени не пользовал сокращения font, хотя стоило бы. Так что думаю польза в посте всё таки есть =)

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

  3. Я с самого начала приучил себя писать все в сокращенной форме, так как лень было каждый раз один и тот же селектор и значения прописывать :)

  4. Ага, и правильно =). А я вот изначально учился через Дримвивер, а он кратко почти никогда не записывает. Лишь потом, разбирая какой-то чужой код, я наткнулся на краткие записи и с тех пор стал их использовать. Но всё равно жаль, что не сразу =)

  5. Закраласт ошибка:

    margin: margin-top || margin-right || margin-bottom || margin-left

    Запомнить порядок очень просто, потому что тут всё как в часах: начиная с полудня (top) двигаемся по часовой стрелке (top, left, bottom, right).

    Двигаемся по часовой стрелке: top, right, bottom, left.

  6. точно, очепятка. большое спасибо!

  7. Может добавить еще то, что при опускании одного из значений (цвет, толщина, стиль) правила border- данное свойвство принимает значение по умолчанию, т.е игнорирует изменения данного свойвства правилом, указанным выше по листингу.
    А вообще, как мне видится с моей любительской колокольни, сайт shublog если не заглядывать в верстку(а я честно не заглядывал) сделан на славу, запоминающийся и дизайном и, главное, содержанием. Можно даже не поверить, что автору 23года. Молодец!

  8. ух, большое спасибо за лестный отзыв!=) Правда, если честно, то вёрстка здесь довольно ушлёпская. Дело в том, что я взял готовый шаблон в интернете, который был настолько криво свёрстан, что словами не передать. Более или менее я привёл его в порядок и русифицировал, посему вроде бы ничего смотрится.
    Хотя я думаю в некотором будущем дизайн менять, надо свой делать. В этом меня не устраивает под какое разрешение заточен сайт (там вроде 800 на 600, может чуть-чуть выше, но не 1024) довольно маленькая ширина центральной части и мне сейчас категорически не хватает второй панели. Так что своих минусов хватает =)

  9. Раз зашел разговор про русификацию-вопрос: умение понимать технический английский обязательное условие для того чтобы стать востребованным web программистом?

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

  11. Спасибо за поучительную статью! +++

  12. Всегда пожалуйста =)

  13. Евгений
    09/02/2013 at 9:37 Постоянная ссылка Цитировать

    Хорошая статья, очень полезна, мне была. Поставил в закладки. :)

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии