Начало
Сокращения в CSS: пишите код компактнее
Краткость - сестра таланта . Это выражение смело можно применять и к CSS . Ведь уменьшая размер CSS - файла, мы увеличиваем скорость загрузки страниц, делаем работу с кодом более удобной и снижаем количество времени на разработку. Да и вообще, если есть возможность сделать что-то быстрее и компактнее, почему бы ей не воспользоваться!
Начнем с мелочей:
Сокращения шестнадцатеричных кодов цвета
Как Вы знаете, каждому цвету соответствует определенный 16-ричный код. Оказывается, если все 6 знаков данного кода одинаковы, то его можно сократить до 3-х знаков. Например:
Черный →#000000→ #000
Думаю суть понятна...
Ноль - он и в Африке ноль
Неважно, в каких единицах будет НОЛЬ! От этого его значение не изменится.
Например, вместо margin:0px; - лучше написать margin:0;
Аналогично и с другими стилевыми правилами.
Если описание класса(или id) включает менее 2-х свойств, то рациональнее записать его в одну строку
Например, вместо этого:
color:#333
}
Лучше написать так:
По возможности группируйте стили
Если какие либо элементы имеют одинаковые свойства, не обязательно писать стиль для каждого из них. Можно просто объединить их с помощью запятой.
Например вместо этого:
.test1 {color:#333}
лучше написать так:
В конце последнего свойства, можно не ставить точку с запятой
color:#333;
text-decoration:underline
}
Обратите внимание, что после свойства text-decoration:underline нет точки с запятой.
В CSS существуют ряд свойств, имеющих как полные, так и сокращенные формы записи. Давайте кратенько по ним пройдемся:
Сокращенное свойство BACKGROUND
То что записано в обычной форме
background-color:#ffee8c ;
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right
}
Можно записать одной строчкой:
После ключевого слова background , перечисляем через пробел значения свойств. Последовательность особого значения не имеет. Если чего-то не указать, автоматически подставится значение по умолчанию.
Сокращенное свойство BORDER
То , что записано в обычной форме
border-width:30px;
border-style:solid;
border-color:#333;
}
Можно записать одной строчкой
В данном сокращении, важно строго соблюдать порядок свойств.
border-width затем через пробел border-style затем border-color .
Аналогичным образом действуют сокращения и для border-bottom, border-left, border-top, border-right.
Например:
Если какое либо свойство не указано, устанавливается значение по умолчанию.
Сокращенное свойство FONT
Полная форма
font-style: italic;
font-variant: normal ;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif
}
Сокращенная форма
Как видите, после ключевого слова font , через пробел перечисляются значения свойств в таком порядке:
font-style_ font-variant _font-weight_font-size_font-family
Если какое либо свойство не указать, установится значение по умолчанию.
Сокращенное свойство LIST-STYLE
Полная форма:
list-style-type:square;
list-style-position: inside;
list-style-image: url(galka.gif)
}
Сокращенная форма:
Опять же, значения свойств перечисляются через пробел. В данном случае порядок роли не играет.
Сокращения для свойств, имеющих значения право, лево, верх, низ
У таких свойств как margin, padding и border имеются уточнения, типа справа(right), слева(left), сверху(top), снизу(bottom)...
Например:
означает рамка слева толщиной в 10 пикселей.
Либо
означает отступ снизу 20 пикселей.
Так вот, если имеются четыре значения для всех сторон, например:
border-right:15px;
border-bottom:10px;
border-left:15px
то сократить эту запись можно используя перечисление значений свойств через пробел ПО ЧАСОВОЙ СТРЕЛКЕ.
Если значения право/лево , либо верх/низ совпадают, то можно еще больше сократить запись:
В данном случае, первое значение, это величина верх/низ, а второе - лево/право.
Если , все значения совпадают, то можно еще более укоротить запись.
Например:
означает рамку со всех сторон, толщиной 10 пикселей.
Вот так. Надеюсь Вы узнали что-то новенькое :)
