CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида и форматирования документов, написанных на языках разметки, таких как HTML или XML. CSS позволяет отделить содержание веб-страницы от её визуального представления, обеспечивая гибкость и удобство в управлении стилями.
Подписывайтесь на мой канал в Телеграмм, чтобы ничего не пропустить.
Вот подборка свойств CSS, начинающихся на букву "d", с их описанием, значениями и примерами:
1. direction
Описание:
Свойство direction задает направление текста и других элементов, которые зависят от направления письма. Это полезно при поддержке языков с правосторонним написанием (например, арабский или иврит).
Использование:
Используется для управления направлением текста и других элементов на странице.
Значения:
- ltr — текст идет слева направо (по умолчанию).
- rtl — текст идет справа налево.
- initial — устанавливает значение по умолчанию (обычно ltr).
- inherit — наследует значение родительского элемента.
Пример:
2. display
Описание:
Одно из самых важных свойств CSS, которое определяет, как элемент должен быть отображен на странице. Это может быть блочный элемент, строчный, гибкий контейнер и т.д.
Использование:
Используется для изменения поведения элементов на странице.
Значения:
- block — элемент отображается как блочный (с новой строки).
- inline — элемент отображается как строчный.
- inline-block — элемент ведет себя как строчный, но может иметь блочные свойства (например, ширину и высоту).
- none — элемент не отображается на странице.
- flex — элемент становится контейнером flexbox.
- grid — элемент становится контейнером grid.
- inherit — наследует значение родителя.
Пример:
3. dominant-baseline
Описание:
Свойство dominant-baseline используется в SVG для управления выравниванием текста по вертикали относительно базовой линии.
Использование:
Применяется для графических элементов SVG, чтобы контролировать, как текст внутри элемента будет выравниваться относительно базовой линии.
Значения:
- auto — браузер сам выбирает базовую линию.
- text-bottom, text-top — выравнивание текста по верхней или нижней части текста.
- central, middle — выравнивание по центру.
- hanging — текст выравнивается по верхней линии, как в некоторых восточных письмах.
Пример:
4. drop-initial
Описание:
Это свойство CSS используется для создания эффектов с первыми буквами текста, например, стилизования или увеличения размера первой буквы в абзаце. Однако данное свойство не является частью стандарта и редко используется на практике.
Использование:
Может использоваться для создания декоративных эффектов с первой буквой абзаца, но чаще это достигается через свойство ::first-letter.
Значения:
Значения этого свойства могут варьироваться в зависимости от реализации и поддержки со стороны браузеров.
Пример:
Хотя это свойство не широко поддерживается, аналогичный эффект можно получить с помощью ::first-letter:
5. display-inside (устаревшее)
Описание:
Свойство display-inside было частью ранних версий спецификации CSS для управления внутренней моделью отображения элемента. Однако его использование было упразднено, и его функции были поглощены свойством display.
Использование:
На практике не используется. Заменено стандартным свойством display.
Значения:
Не используется.
Пример:
Используйте стандартное свойство display для определения поведения контейнера:
6. display-outside (устаревшее)
Описание:
Как и display-inside, свойство display-outside было частью ранних версий спецификации CSS, предназначенной для управления внешней моделью отображения элемента. Однако это свойство больше не используется, и его функциональность была объединена в стандартное свойство display.
Использование:
Сейчас не используется. Вместо него применяют стандартное свойство display, которое позволяет управлять как внешним, так и внутренним отображением элементов.
Значения:
Не используется.
Пример:
Используйте стандартное свойство display, чтобы задать поведение элемента:
7. display (в разрезе display: flex и display: grid)
Описание:
Свойство display также используется для создания сложных макетов с помощью технологий Flexbox и Grid.
Использование:
- flex — элемент становится flex-контейнером, что позволяет организовать дочерние элементы в гибкую структуру.
- grid — элемент становится контейнером для сетки Grid Layout, что дает возможность точно управлять размещением дочерних элементов.
Значения:
- flex — элементы располагаются в одной строке или столбце, в зависимости от направления оси.
- grid — элементы располагаются в сетке с возможностью указания количества столбцов и строк.
Примеры:
- Flexbox:
- Grid Layout:
8. d (атрибут для SVG)
Описание:
Атрибут d используется в SVG для описания формы пути (<path>). Он содержит команды и параметры для построения сложных фигур, таких как линии, дуги, кривые Безье и т.д.
Использование:
Применяется для создания сложных векторных форм внутри элемента <path> в SVG.
Значения:
Атрибут d принимает строку, содержащую команды для рисования:
- M — перемещение к точке.
- L — линия.
- C — кривая Безье.
- Z — замыкает путь.
Пример:
В примере выше создается квадрат, описанный серией команд M, H, V, и Z.
9. drop-shadow
Описание:
Функция drop-shadow() применяется в качестве значения для свойства filter и позволяет добавлять тень к изображению или любому другому элементу. В отличие от box-shadow, она применяется на уровне фильтрации и может учитывать прозрачные части изображений.
Использование:
Применяется для создания теней, которые следуют за формой элемента, включая его прозрачные зоны (например, PNG с прозрачным фоном).
Значения:
- offset-x — смещение тени по оси X.
- offset-y — смещение тени по оси Y.
- blur-radius — радиус размытия тени.
- color — цвет тени.
Пример:
10. display: contents
Описание:
Значение contents для свойства display делает так, что элемент "исчезает" из визуального DOM, но его дочерние элементы остаются видимыми и продолжают участвовать в потоке документа. Это полезно для структурирования HTML, не влияя на визуальное отображение.
Использование:
Применяется для «исчезновения» контейнеров, оставляя только их дочерние элементы видимыми.
Значения:
- contents — визуально удаляет элемент, оставляя дочерние элементы на своих местах.
Пример:
В этом примере тег <span> не будет отображаться на странице, но текст внутри тега <strong> останется видимым и будет участвовать в потоке документа.
11. direction (SVG)
Описание:
Свойство direction также может применяться в SVG для управления направлением написания текста. Это свойство используется аналогично тому, как оно применяется в HTML/CSS, и задает направление текста в графических элементах SVG.
Использование:
Используется для задания направления текста в элементах SVG.
Значения:
- ltr — текст пишется слева направо.
- rtl — текст пишется справа налево.
Пример:
На этом заканчивается список CSS-свойств на букву "D" и "E". Если у вас возникли вопросы или необходимо больше примеров, пишите в комментариях.
12. empty-cells
Описание:
Свойство empty-cells управляет отображением или скрытием пустых ячеек в таблицах.
Использование:
Применяется для таблиц, чтобы контролировать, отображать ли пустые ячейки или скрывать их.
Значения:
- show — пустые ячейки таблицы отображаются (по умолчанию).
- hide — пустые ячейки скрываются.
- inherit — наследует значение от родителя.
Пример:
Если Вам интересно, что еще можно найти на канале QA Helper, прочитайте статью: Вместо оглавления. Что вы найдете на канале QA Helper - справочник тестировщика?
Не забудьте подписаться на канал, чтобы не пропустить полезную информацию: QA Helper - справочник тестировщика
Пишите в комментариях какой пункт было бы интересно рассмотреть более подробно.
Обязательно прочитайте: Что должен знать и уметь тестировщик
Также будет интересно почитать: Вопросы которые задают на собеседовании тестировщикам