Свойства CSS по алфавиту. Все на "F"

CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида и форматирования документов, написанных на языках разметки, таких как HTML или XML. CSS позволяет отделить содержание веб-страницы от её визуального представления, обеспечивая гибкость и удобство в управлении стилями.

Подписывайтесь на мой канал в Телеграмм, чтобы ничего не пропустить.

Вот подборка свойств CSS, начинающихся на букву "F"

1. flex

• Описание: Устанавливает параметры гибкости (flex-grow, flex-shrink, flex-basis) для элемента в контейнере flexbox.
• Использование: Применяется к дочерним элементам контейнера с display: flex или display: inline-flex для управления их размерами.
• Значения:<flex-grow> — коэффициент роста элемента (по умолчанию 0).
  <flex-shrink> — коэффициент сжатия элемента (по умолчанию 1).
  <flex-basis> — базовый размер элемента (может быть в пикселях, процентах, auto и т.д.).
  
• Пример:

2. flex-basis

• Описание: Устанавливает базовый размер элемента до применения гибкости (flex-grow или flex-shrink).
• Использование: Применяется в flexbox-контейнерах для задания начального размера элемента.
• Значения:auto — размер элемента определяется его содержимым.
  <длина> — конкретное значение (например, 100px, 50%).
  content — размер элемента определяется содержимым (не поддерживается в некоторых браузерах).
  
• Пример:

3. flex-direction

• Описание: Определяет направление расположения элементов внутри flexbox-контейнера.
• Использование: Применяется к контейнеру с display: flex или display: inline-flex.
• Значения:row — элементы располагаются в строку (по горизонтали, слева направо).
  row-reverse — элементы располагаются в строку, но в обратном порядке.
  column — элементы располагаются в колонку (по вертикали, сверху вниз).
  column-reverse — элементы располагаются в колонку, но в обратном порядке.
  
• Пример:

4. flex-flow

• Описание: Сокращенное свойство для задания flex-direction и flex-wrap.
• Использование: Применяется к flexbox-контейнеру для настройки направления и переноса элементов.
• Значения: Комбинация значений свойств flex-direction и flex-wrap.Пример: row nowrap, column wrap.
  
• Пример:

5. flex-grow

• Описание: Определяет, насколько элемент может увеличиваться относительно других элементов в контейнере.
• Использование: Используется для управления распределением свободного пространства между элементами.
• Значения:<число> — коэффициент роста (например, 0, 1, 2 и т.д.).
  По умолчанию 0 (элемент не растет).
  
• Пример:

6. flex-shrink

• Описание: Определяет, насколько элемент может уменьшаться при нехватке пространства в контейнере.
• Использование: Используется для управления сжатием элементов в flexbox-контейнере.
• Значения:<число> — коэффициент сжатия (например, 0, 1, 2 и т.д.).
  По умолчанию 1 (элемент может сжиматься).
  
• Пример:

7. flex-wrap

• Описание: Определяет, будут ли элементы в flexbox-контейнере переноситься на новую строку или оставаться на одной.
• Использование: Применяется к flexbox-контейнеру для управления переносом элементов.
• Значения:nowrap — элементы не переносятся.
  wrap — элементы переносятся на новую строку.
  wrap-reverse — элементы переносятся на новую строку, но в обратном порядке.
  
• Пример:

8. float

• Описание: Определяет, будет ли элемент "всплывать" влево или вправо относительно родительского контейнера.
• Использование: Используется для создания обтекания текста или других элементов вокруг "плавающего" элемента.
• Значения:left — элемент будет выровнен влево.
  right — элемент будет выровнен вправо.
  none — элемент не будет всплывать (по умолчанию).
  
• Пример:

9. font

• Описание: Сокращенное свойство для задания всех параметров шрифта (размер, семейство, стиль, жирность и т.д.).
• Использование: Применяется для задания внешнего вида текста.
• Значения: Комбинация значений следующих свойств: font-style, font-variant, font-weight, font-size, line-height, font-family.
• Пример:

10. font-family

• Описание: Определяет семейство шрифта для текста.
• Использование: Используется для задания шрифта текста.
• Значения:<семейство шрифтов> — например, Arial, Georgia, Times New Roman.
  generic-family — общее семейство, например, serif, sans-serif, monospace.
  
• Пример:

11. font-feature-settings

• Описание: Позволяет управлять дополнительными особенностями шрифтов, такими как лигатуры, стилистические альтернативы и другие функции OpenType.
• Использование: Применяется для активации или деактивации определённых функций шрифта.
• Значения:normal — использование встроенных настроек шрифта.
  <строка> — конкретные настройки функций (например, "liga" 1 для включения стандартных лигатур).
  
• Пример:

12. font-kerning

• Описание: Определяет, должна ли применяться кернинг (расстояние между символами) в шрифте.
• Использование: Используется для управления расстоянием между символами, если шрифт поддерживает кернинг.
• Значения:auto — кернинг включён, если это поддерживается шрифтом.
  normal — активирует стандартный кернинг.
  none — отключает кернинг.
  
• Пример:

13. font-size

• Описание: Устанавливает размер шрифта для текста.
• Использование: Применяется для управления размером текста на странице.
• Значения:<длина> — в пикселях (px), пунктах (pt), процентах (%), em, rem и т.д.
  xx-small, x-small, small, medium, large, x-large, xx-large — относительные размеры.
  larger, smaller — относительно родительского элемента.
  
• Пример:

14. font-size-adjust

• Описание: Позволяет сохранять читаемость текста, устанавливая соотношение высоты малых строчных букв x-height к высоте шрифта, если основной шрифт недоступен.
• Использование: Применяется при необходимости подстройки размера шрифта при замене основного шрифта.
• Значения:none — не применять автоматическую подстройку.
  <число> — коэффициент, определяющий соотношение.
  
• Пример:

15. font-stretch

• Описание: Определяет степень сжатия или расширения шрифта.
• Использование: Применяется для выбора варианта шрифта (если шрифт поддерживает разные степени растяжения).
• Значения:normal — стандартное растяжение.
  ultra-condensed, extra-condensed, condensed, semi-condensed — более узкие.
  semi-expanded, expanded, extra-expanded, ultra-expanded — более широкие.
  
• Пример:

16. font-style

• Описание: Устанавливает стиль шрифта, например, обычный или курсив.
• Использование: Используется для задания наклона текста.
• Значения:normal — обычный стиль.
  italic — курсив.
  oblique — наклонный стиль.
  
• Пример:

17. font-variant

• Описание: Определяет использование варианта шрифта, например, малых прописных букв (small-caps).
• Использование: Применяется для стилистических изменений текста.
• Значения:normal — обычный текст.
  small-caps — текст отображается малыми прописными буквами.
  
• Пример:

18. font-variant-caps

• Описание: Управляет отображением текста в различных вариантах заглавных букв.
• Использование: Применяется для стилистического форматирования текста.
• Значения:normal — обычный текст.
  small-caps — малые заглавные.
  all-small-caps — все символы становятся малыми заглавными.
  petite-caps — миниатюрные заглавные.
  all-petite-caps — все символы становятся миниатюрными заглавными.
  unicase — унифицированный стиль для заглавных и строчных букв.
  titling-caps — заглавные буквы для заголовков.
  
• Пример:

19. font-weight

• Описание: Определяет толщину шрифта.
• Использование: Используется для изменения жирности текста.
• Значения:normal — обычная толщина (400).
  bold — жирный (700).
  lighter — тоньше родительского шрифта.
  bolder — толще родительского шрифта.
  <число> — от 100 до 900 (например, 100 — тонкий, 900 — очень жирный).
  
• Пример:

20. filter

• Описание: Применяет графические эффекты, такие как размытие, яркость или контрастность, к элементам.
• Использование: Используется для стилизации изображений, текста или других элементов.
• Значения:none — эффекты не применяются.
  blur(px) — размытие.
  brightness(%) — яркость.
  contrast(%) — контрастность.
  grayscale(%) — оттенки серого.
  invert(%) — инверсия цветов.
  sepia(%) — сепия.
  hue-rotate(deg) — сдвиг оттенка.
  
• Пример:

font-variant (дополнительные значения)

Свойство font-variant является сокращением и может включать несколько настроек, связанных с различными аспектами типографики. Полный список возможных значений включает:

21. font-variant-ligatures

• Описание: Управляет отображением лигатур (специальных соединений между буквами, поддерживаемых шрифтом).
• Значения:normal — стандартные лигатуры включены.
  none — лигатуры отключены.
  common-ligatures — включает стандартные лигатуры.
  no-common-ligatures — отключает стандартные лигатуры.
  discretionary-ligatures — включает стилистические лигатуры.
  no-discretionary-ligatures — отключает стилистические лигатуры.
  historical-ligatures — включает исторические лигатуры.
  no-historical-ligatures — отключает исторические лигатуры.
  contextual — включает контекстные лигатуры.
  no-contextual — отключает контекстные лигатуры.
  
• Пример:

22. font-variant-numeric

• Описание: Управляет отображением чисел (например, стилями цифр, такими как верхний или нижний индекс, пропорциональные или моноширинные цифры).
• Значения:normal — стандартное отображение чисел.
  lining-nums — цифры выровнены по линии базиса.
  oldstyle-nums — цифры в старинном стиле.
  proportional-nums — пропорциональные цифры.
  tabular-nums — моноширинные цифры (удобны для таблиц).
  diagonal-fractions — отображение дробей в виде косой черты.
  stacked-fractions — отображение дробей в виде вертикальной записи.
  ordinal — отображение чисел в виде порядковых (например, 1st, 2nd).
  slashed-zero — отображение нуля с косой чертой.
  
• Пример:

23. font-variant-east-asian

• Описание: Управляет отображением символов восточноазиатских языков.
• Значения:normal — обычное отображение.
  japanese — японская стилистика.
  full-width — символы принимают полный размер.
  proportional-width — символы принимают пропорциональный размер.
  ruby — используется для отображения ruby-аннотаций (маленький текст над символами, часто используется в японском языке).
  
• Пример:

24. font-variant-alternates

• Описание: Управляет доступом к альтернативным формам символов, доступным в шрифте (например, стилистическим или историческим).
• Значения:normal — стандартные символы.
  <функция> — имя альтернативной формы (если поддерживается шрифтом).
  
• Пример:

5. font-variant-position

• Описание: Определяет расположение текста, например, верхний или нижний индекс.
• Значения:normal — стандартное положение текста.
  sub — нижний индекс.
  super — верхний индекс.
  
• Пример:

Объединение нескольких свойств

Свойство font-variant позволяет объединять несколько указанных выше настроек. Например:

Это объединяет использование малых заглавных букв (small-caps) и цифр, выровненных по линии базиса (lining-nums).

Если Вам интересно, что еще можно найти на канале QA Helper, прочитайте статью: Вместо оглавления. Что вы найдете на канале QA Helper - справочник тестировщика?

Не забудьте подписаться на канал, чтобы не пропустить полезную информацию: QA Helper - справочник тестировщика

Пишите в комментариях какой пункт было бы интересно рассмотреть более подробно.

Обязательно прочитайте: Что должен знать и уметь тестировщик

Также будет интересно почитать: Вопросы которые задают на собеседовании тестировщикам