В этой короткой статье мы рассмотрим различные сокращения в CSS, с которыми вы столкнетесь в своей повседневной работе.
border
border - свойство, позволяющее установить толщину, стиль, цвет границы вокруг какого-либо элемента.
border позволяет вам установить ширину, стиль и цвет границы в одном свойстве. Так например:
border : 1px solid black ;
эквивалентен следующим трем правилам:
border-width : 1px ;
border-style : solid ;
border-color : black ;
или даже:
border-left-width : 2px ;
border-left-style : solid ;
border-left-color : black ;
В большинстве случаев используется комбинированное свойство border. Более подробные параметры, вероятно, будут использоваться только в том случае, если вы хотите переопределить более раннее объявление границы.
margin , padding
Краткая запись обоих этих свойств очень похожа:
div .box {
margin-top : 10px ;
margin-right : 15px ;
margin-bottom : 20px ;
margin-left : 25px;
}
Такое правило можно было бы также записать как:
div .box {
margin : 10px 15px 20px 25px ;
}
Эти типы свойств также могут принимать менее четырех значений, а именно:
- То же значение применяется ко всем четырем сторонам - margin: 2px;
- Первое значение применяется к верху и низу, второе слева и справа - margin: 2px 5px; .
- Первое и третье значения применяются к верху и низу соответственно, второе значение применяется к левому и правому - margin: 2px 5px 1px; .
Шрифт
Вы можете указать размер шрифта, толщину, стиль, семейство и высоту строки, используя одну строку сокращения. Рассмотрим следующий CSS:
font-weight : bold ;
font-style : italic ;
font-variant : small-caps ;
font-size : 1.5em ;
line-height : 200%;
font-family : Georgia , "Times New Roman ", serif ;
Вы можете указать все это, используя следующую строку:
font: bold italic small-caps 1.5em/200% Georgia, "Times New Roman", serif;
Обратите внимание, что порядок многих из них на самом деле не имеет значения, хотя вы должны убедиться, что font-size / line-height и font-family находятся в позициях, показанных выше. Кроме того, font-size и font-family следует указывать. В противном случае это сокращение может не работать в некоторых браузерах.
Следует также отметить, что если font-weight , font-style или font-variant не заданы, их значения по умолчанию normal .
Фон - background
Еще одно очень полезное сокращенное свойство - background . Вместо того чтобы использовать background-color, background-image, background-repeat, background-attachment, и background-position указать фон элемента, вы можете использовать только background :
background-color : # fff000 ;
background-image : url (image .gif );
background-repeat : no-repeat ;
background-position : top left ;
background-attachment : fixed ;
можно сжать до
background : # fff000 url (image .gif ) no-repeat top left fixed ;
Помните, что когда вы задаете два значения для position , они должны находится рядом.
Список
Вы можете указать тип, положение и изображение маркера списка в одной строке. Следующие свойства CSS:
list-style-type : circle ;
list-style-position : inside ;
list-style-image : url (bullet .gif );
Эквивалентны:
list-style : circle inside url (bullet .gif );
Обратите внимание, что если какое-либо из значений не указано, предполагаются следующие значения по умолчанию:
list-style-type : circle ;
list-style-position : outside ;
list-style-image : none ;
Цвет
При указании шестнадцатеричных значений цвета можно использовать сокращение, если оба шестнадцатеричных значения одинаковы для каждого цветового канала. Например, # 000 эквивалентно от руки
# 000000 . Давайте посмотрим и на более сложный пример: # 6c9 это то же самое, что # 66cc99 .