Использование сокращений может помочь уменьшить размер CSS-файлов и облегчить их чтение. Основные правила использования сокращений CSS следующие:
цвет
Шестнадцатеричные значения цвета, если значения каждых двух цифр одинаковы, можно сократить вдвое, например: #000000 можно сократить до #000; можно сократить до #369;
Размер коробки
Обычно существует четыре метода письма:
свойство:value1; означает, что все ребра имеют значение value1;
свойство:значение1 значение2 означает, что значение верхнего и нижнего значений равно значению1, а значение правого и левого — значение2;
свойство: значение1 значение2 значение3; означает, что значение верхнего значения — значение1, значение правого и левого — значение2, а значение нижнего — значение3.
property:value1 value2 value3 value4 Четыре значения последовательно представляют верх, право, низ и лево;
Удобный способ запоминания — по часовой стрелке, вверху справа, внизу слева. Ниже приведены примеры конкретных применений полей и отступов:
маржа: 1em 0 2em 0,5em;
граница
Свойства границы следующие:
ширина границы: 1 пиксель;
стиль границы: сплошной;
цвет границы:#000;
Его можно сократить до одного предложения: border:1px Solid #000;
Синтаксис: цвет рамки: ширина;
Фоны
Свойства фона следующие:
цвет фона:#f00;
фоновое изображение: URL (background.gif);
фоновое повторение: без повторения;
фоновое вложение: исправлено;
фоновая позиция: 0 0;
Его можно сократить до одного предложения: background:#f00 url(background.gif) no-repeat fix 0 0;
Синтаксис: фон: цветное изображение повторяет позицию прикрепления;
Вы можете опустить одно или несколько значений атрибута. Если они опущены, в качестве значения атрибута будет использоваться значение по умолчанию браузера. Значение по умолчанию:
цвет: прозрачный
изображение: нет
повторить: повторить
вложение: прокрутка
позиция: 0% 0%
шрифты
Свойства шрифта следующие:
стиль шрифта: курсив;
вариант шрифта: маленькие прописные;
шрифт-вес: жирный;
размер шрифта: 1em;
высота строки: 140%;
семейство шрифтов: «Lucida Grande», без засечек;
Его можно сократить до одного предложения: шрифт: курсив маленькими прописными жирным шрифтом 1em/140% "Lucida Grande", без засечек;
Обратите внимание: если вы сокращаете определение шрифта, вы должны определить как минимум два значения: размер шрифта и семейство шрифтов.
Списки
Чтобы отменить точки и серийные номера по умолчанию, вы можете написать list-style:none;,
Свойства списка следующие:
тип списка-стиля: квадрат;
позиция в стиле списка: внутри;
список-стиль-изображения:url(image.gif);
Его можно сократить до одного предложения: list-style:square Inside url(image.gif);