Скорочення css, оптимізуємо css код
Багаторазовий набір стильових властивостей забирає багато часу, але в css є ряд властивостей, які містять кілька різних властивостей. Завдяки цим універсальним властивостям можна трохиоптимізувати css код.
Властивість background
Існує велика кількість властивостей керуючих параметрами фонового зображення. Однак набирати в стильовому файлі всі властивості по черзі, особливо такі довгі, як background-position, background-attachment, background-image і т. д., нерозумно: адже на це піде багато часу. Тому краще використовувати скорочений варіант – властивість background .
Всі фонові властивості (background-attachment, background-color, background-image, background-position, background-repeat) можна записати в одній властивості background. Значення властивостей можуть бути розташовані у будь-якому порядку.
Властивість font
Для тексту існує універсальна властивість font. Воно поєднує такі властивості: font-style, font-variant, font-weight, font-size, /line-height, font-family. Проте є кілька моментів:
- Обов'язково потрібно включати, дотримуючись порядку включення, останні дві властивості: font-size, font-family (родина). Інші властивості можна опустити та перераховувати у будь-якому порядку.
- Між значеннями властивостей ставиться пробіл. Кома ставиться тільки, щоб розділити шрифти.
- Якщо призначаєте line-height (міжрядковий інтервал), то перед розміром шрифту (font-size) необхідно поставити слеш, наприклад:
Властивість border
Для кордонів слід використовувати універсальну властивість border. Властивість border поєднує в собі властивості, які набувають значення товщини, кольору та стилю (порядоквключення значення немає). Ця властивість впливає на всі чотири сторони рамки, тому до нього не можна застосовувати множинні значення для вибіркового на певні сторони рамки.
Властивості padding та margin
Щоб встановити величину поля ( margin ) кожного краю елемента, необхідно використовувати властивість margin . Для всіх відступів (padding) слід використовувати властивість padding. Порядок, в якому діють множинні значення властивостей полів (margin) та відступів (padding), ви можете побачити в таблиці нижче.
