Один из наиболее эффективных способов написания CSS — использование сокращений. Использование сокращений может сделать ваши файлы CSS меньшими и более читабельными. Понимание сокращений свойств CSS также является одним из основных навыков фронтенд-разработчиков. Сегодня мы систематически суммируем сокращения свойств CSS.
цветовая аббревиатура
Аббревиатура цвета является самой простой. Когда значение цвета находится в шестнадцатеричном формате, если значение каждого цвета одинаково, его можно записать как:
| цвет: #113366 |
можно сократить как
| цвет: #136 |
Аббревиатуры могут использоваться везде, где используются шестнадцатеричные значения цвета, например, цвет фона, цвет границы, тень текста, тень блока и т. д.
размер коробки
Здесь в основном используются два атрибута: поля и отступы. В качестве примера мы возьмем поле, и отступы такие же. Поле имеет четыре направления: вверх, вниз, влево и вправо, и в каждом направлении есть поле:
| поле-верх: 1 пиксель; поле справа: 1 пиксель; маржа-кнопка: 1px; поле слева: 1 пиксель; |
Эти четыре значения можно сократить вместе:
| поле: 1 пиксель 1 пиксель 1 пиксель 1 пиксель; |
Порядок сокращений: сверху->справа->снизу->слева. Направление по часовой стрелке. Если противоположные стороны имеют одинаковое значение, их можно опустить:
| маржа:1px;//Поля в четырех направлениях одинаковы, что эквивалентно марже:1px 1px 1px 1px; Margin:1px 2px;//Верхнее и нижнее поля имеют размер 1 пиксель, а левое и правое поля имеют размер 2 пикселя, что эквивалентно марже: 1px 2px 1px 2px. маржа:1px 2px 3px;//Правое поле и левое поле одинаковы, что эквивалентно марже:1px 2px 3px 2px; Margin:1px 2px 1px 3px;//Обратите внимание, что хотя верхнее и нижнее поля здесь равны 1 пикселю, здесь нельзя использовать сокращения. |
граница
Граница — относительно гибкий атрибут. Он имеет три податрибута: ширина границы, стиль границы и цвет границы.
| ширина границы: число + единица измерения; стиль границы: нет || пунктир || двойная || вставка || выступ || граница-цвет: цвет; |
Его можно сократить в порядке ширины, стиля и цвета:
| граница: 5 пикселей сплошная # 369; |
Иногда границу можно написать проще и некоторые значения можно опустить, но обратите внимание, какие из них необходимы. Вы также можете это протестировать:
| border:groove red; //Угадайте, какая ширина этой границы? border:solid; //Как это будет выглядеть? граница:5px; //Это нормально? граница: 5 пикселей красный // Это нормально? ? граница:красная; //Это нормально? ? ? |
Как видно из приведенного выше кода, ширина границы по умолчанию составляет 3 пикселя, а цвет по умолчанию — черный. В сокращении border требуется border-style.
Вы также можете использовать сокращения для каждого края:
| border-top:4px сплошной #333; правая граница: 3 пикселя, сплошной #666; border-bottom:3px сплошной #666; левая граница: 4 пикселя, сплошной # 333; |
Вы также можете использовать сокращения для каждого атрибута:
| border-width: 1px 2px 3px; //Можно использовать до четырех значений, правила сокращений аналогичны сокращению размера поля, то же самое ниже стиль границы: сплошная пунктирная канавка; Цвет границы: красный, синий, белый, черный; |
контур
Контур аналогичен границе, разница в том, что граница влияет на блочную модель, а контур — нет.
| ширина контура: число + единица измерения; стиль контура: нет || пунктир || двойная || вставка || выступ || контур-цвет: цвет; |
Можно сократить как:
| контур: 1 пиксель, сплошной красный; |
Аналогично, в сокращении контура также требуется Outline-style, а два других значения являются необязательными. Значение по умолчанию такое же, как и border.
фон
Фон является одним из наиболее часто используемых сокращений и содержит следующие свойства:
| цвет фона: цвет || #hex || RGB(% || 0-255) || фоновое изображение: URL (); фоновый повтор: повтор || повтор-x || повтор-y || без повтора; фоновая позиция: XY || (сверху||снизу||центр) (слева||справа||центр); фоновое вложение: прокрутка || исправлена; |
Аббревиатура фона может значительно повысить эффективность CSS:
| фон: #fff url(img.png) без повтора 0 0; |
Аббревиатура фона также имеет некоторые значения по умолчанию:
| фон: прозрачный нет, повторная прокрутка вверху слева; |
Значения свойств фона не наследуются. Вы можете объявить только одно из них, а к остальным значениям будет применено значение по умолчанию.
шрифт
Аббревиатура шрифта также является наиболее часто используемой, а также одним из способов написания эффективного CSS.
Шрифт содержит следующие свойства:
| стиль шрифта: обычный || наклонный || вариант шрифта: нормальный || маленькие прописные; шрифт: нормальный || жирный || светлее || размер шрифта: (число+единица измерения) || (xx-маленький - xx-большой); высота строки: нормальная || (число+единица); семейство шрифтов:имя,"больше имен"; |
Каждый атрибут шрифта также имеет значение по умолчанию. Очень важно запомнить следующие значения по умолчанию:
| стиль шрифта: нормальный; вариант шрифта: нормальный; вес шрифта: нормальный; размер шрифта: наследовать; высота строки: нормальная; семейство шрифтов: наследовать; |
На самом деле сокращение шрифта требует наибольшей осторожности среди этих сокращений. Небольшая небрежность может привести к неожиданным последствиям. Поэтому многие люди не согласны с использованием сокращения шрифта.
Но вот небольшой мануал, думаю он поможет вам лучше понять аббревиатуру шрифта:
.jpg)
стиль списка
Пожалуй, наиболее часто используемый атрибут списков:
| стиль списка: нет |
Он очищает все стили списков по умолчанию, такие как числа или точки.
list-style также имеет три атрибута:
| тип списка: нет || круг || квадрат || нижняя буква || нижняя буква || позиция в стиле списка: внутри || снаружи || наследовать изображение в стиле списка: (url) || нет || наследовать |
Атрибуты list-style по умолчанию следующие:
| стиль списка: диск снаружи нет |
Следует отметить, что если изображение определено в стиле списка, приоритет изображения выше, чем у типа списка-стиля, например:
| стиль списка: круг внутри URL (../img.gif) |
В этом примере, если img.gif существует, ранее установленный символ круга отображаться не будет.
PS: На самом деле, list-style-type имеет множество полезных стилей. Заинтересованные студенты могут обратиться к: https://developer.mozilla.org/en/CSS/list-style-type.
border-radius (угловой радиус)
Border-radius — это новый атрибут CSS3, используемый для реализации закругленных границ. Текущий недостаток этого атрибута заключается в том, что каждый браузер поддерживает его по-своему. IE пока не поддерживает его. Gecko (firefox) и webkit (safari/chrome) должны использовать частные префиксы -moz- и -webkit- соответственно. Что еще более сбивает с толку, так это то, что если атрибут border-radius одного угла в двух браузерах написан по-разному, вам придется написать большое количество частных атрибутов:
| -moz-border-radius-bottomleft:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; граница-нижний левый радиус: 6 пикселей; граница-верхний левый радиус: 6 пикселей; граница-верхний-правый-радиус:6 пикселей; |
Ох, ты уже ослеплен? Это сделано только для того, чтобы добиться ситуации, когда верхний левый угол не закруглен, а остальные три угла закруглены. Поэтому для обозначения радиуса границы Шэнфэй настоятельно рекомендует использовать аббревиатуру:
| -moz-border-radius:0 6px 6px; -webkit-border-radius:0 6px 6px; граница-радиус:0 6px 6px; |
Это намного проще. PS: К сожалению, последняя версия Safari (4.0.5) пока не поддерживает это сокращение... (спасибо @fireyy)
Вот и все. Есть ли еще какие-нибудь атрибуты, которые можно сократить? Приглашаем всех обсудить это вместе.