CSS ::first-letter полезен или ... 🤯? #css #css3 #javascript #js #learning #course #shorts #html

Не использовали CSS псевдоэлемент ::first-letter, потому что не знаете зачем или как? Давайте разберемся!

Он применяет стили к первой букве, первой строки элемента, без необходимости использовать лишний тег.

Вы можете использовать CSS стили, представленные на экране:
Шрифтовые: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height и font-family.

Фоновые: background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment и background-blend-mode.

Отступы: margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left.

И прочие: border, border-style, border-color, border-width, border-radius, border-image, color, text-decoration, text-shadow, text-transform, letter-spacing, word-spacing, line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align.

Самый яркий пример для его использования - это буквица. Когда первая буква раздела или главы делается крупной.

Но есть несколько CSS ограничений для его использования:
Первое - он применяется только для CSS3 блочных элементов. Для display: inline-flex, inline-table или flex это не сработает.
Второе - перед ним не должно быть изображений image или инлайн таблиц inline-table.
Третье - если есть CSS3 псевдоэлемент ::before с непустым свойстовм content: ‘’, то ::first-letter применится к его первому символу.
Если есть и CSS псевдоэлементы ::first-letter и ::first-line, то стили ::first-letter будут приоритетней.

#css #css3 #js #javascript #frontend #html #web #webdevelopment #htmlcss #html5 #csshtml #css3html5 #css3code #css3tutorial #htmltutorial #htmlelements #csscourse #csstutorialscool #csstricks #csshovereffect #csshover #csshovereffects #webdev #cssanimation #csstransition #csstricks #htmlcss3 #fullstack #cssamazing #cssfeatures #csseasy #cssbasic #csslesson #csscourse #cssteach #vue #react #angular #svelte #vanillajs #animation #cssawesome #learncss #course #programming #crash_course #learning #fariga

Подписывайтесь на меня в соц. сетях:
👨‍💻 LinkedIn - https://www.linkedin.com/in/maksymfariga
📷 Instagram - https://www.instagram.com/maksym_fariga/ (@maksym_fariga)
📖 Facebook - https://www.facebook.com/maksymfariga/
🐤 Twitter - https://twitter.com/Fariga_M
🛩 Telegram - https://t.me/web_education_new

🤩 НОВЫЕ ЕДИНИЦЫ измерения в CSS / полный разбор с примерами на РЕАЛЬНЫХ📱 устройствах 👉 https://youtu.be/ANzzt8R7EzQ ✍️
🫵 CSS знает о вас ВСЁ 🤫 - image-orientation (New CSS) 👉 https://youtu.be/dICP6cmiu30 ✍️
🚀 Новое CSS свойство image-rendering - Next CSS Level 👉 https://youtu.be/vj7FygQE7dA ✍️
📺 Основы CSS - свойство aspect-ratio - полный разбор 👉 https://youtu.be/y2VMHBkoSi0 ✍️
🙅🏻‍♂️ Accent-color - CSS свойство, которое не смогло 👉 https://youtu.be/5oYc--MU-EU ✍️
🎎 CSS keywords: inherit, initial, unset, revert, all 👉 https://youtu.be/eD1pK5gqhVA ✍️
🖼 CSS text-stroke, text-fill-color и paint-order 👉 https://youtu.be/atx6jomLDmw ✍️

Видео CSS ::first-letter полезен или ... 🤯? #css #css3 #javascript #js #learning #course #shorts #html канала Maksym Fariga