Anonymous Quiz
81%
opacity
14%
transparency
5%
clear
Какой из следующих селекторов выберет все элементы <p>, которые являются первым дочерним элементом своего родителя?
#ВопросДня #CSS
#ВопросДня #CSS
Anonymous Quiz
65%
p:first-child
8%
p:last-child
13%
p:nth-child(1)
15%
p:first-of-type
Какое свойство CSS вы бы использовали, чтобы изменить направление элементов внутри flex контейнера с горизонтального на вертикальное?
#ВопросДня #quiz #CSS
#ВопросДня #quiz #CSS
Anonymous Quiz
8%
flex-wrap: column;
10%
flex-align: column;
78%
flex-direction: column;
4%
flex-flow: column;
🔥4
Какое значение свойства align-items в контейнере flexbox выставляет все дочерние элементы по центру перпендикулярной оси?
#quiz #CSS #Flexbox
#quiz #CSS #Flexbox
Anonymous Quiz
9%
flex-center
2%
center-axis
22%
justify-center
67%
center
👍2
🌟 Grid vs Flexbox: Что выбрать?
🔹 Основное различие:
Flexbox (Flexible Box) оптимизирован для одномерного макета, то есть по оси X (горизонтальной) или по оси Y (вертикальной).
Grid (Сетка) предназначен для двумерного макета, где у вас есть элементы как в рядах, так и в колонках.
🔹 Когда использовать Flexbox:
Для макетов с одномерными структурами: горизонтальные или вертикальные компоненты (например, навигационные меню, боковые панели).
Если вам нужна большая гибкость в распределении пространства и выравнивании элементов.
Когда порядок элементов имеет значение.
🔹 Когда использовать Grid:
Для макетов с двумерными структурами: сетки с рядами и колонками.
Когда нужно разместить элементы по определенным линиям или областям.
Для более сложных и детализированных макетов.
🔹 Что лучше?
Вопрос "что лучше" не совсем корректен. Эти две технологии дополняют друг друга! Их можно использовать вместе в одном проекте. Выбор зависит от конкретной задачи, которую вы решаете.
📌 Заключение: Flexbox и Grid предоставляют разные инструменты для разных ситуаций. Понимание их основных принципов поможет вам правильно выбрать подходящий инструмент для вашего макета. 🛠️🎨
#ОбучающийПост #CSS
🔹 Основное различие:
Flexbox (Flexible Box) оптимизирован для одномерного макета, то есть по оси X (горизонтальной) или по оси Y (вертикальной).
Grid (Сетка) предназначен для двумерного макета, где у вас есть элементы как в рядах, так и в колонках.
🔹 Когда использовать Flexbox:
Для макетов с одномерными структурами: горизонтальные или вертикальные компоненты (например, навигационные меню, боковые панели).
Если вам нужна большая гибкость в распределении пространства и выравнивании элементов.
Когда порядок элементов имеет значение.
🔹 Когда использовать Grid:
Для макетов с двумерными структурами: сетки с рядами и колонками.
Когда нужно разместить элементы по определенным линиям или областям.
Для более сложных и детализированных макетов.
🔹 Что лучше?
Вопрос "что лучше" не совсем корректен. Эти две технологии дополняют друг друга! Их можно использовать вместе в одном проекте. Выбор зависит от конкретной задачи, которую вы решаете.
📌 Заключение: Flexbox и Grid предоставляют разные инструменты для разных ситуаций. Понимание их основных принципов поможет вам правильно выбрать подходящий инструмент для вашего макета. 🛠️🎨
#ОбучающийПост #CSS
🔥2
Anonymous Quiz
12%
padding
0%
space
0%
border-gap
88%
margin
Если у элемента установлено значение box-sizing: border-box;, что включается в его общую ширину?
#quiz #CSS
#quiz #CSS
Anonymous Quiz
7%
Только контент
9%
Контент и padding
57%
Контент, padding и border
27%
Все вышеуказанное + margin
👍2
Специфичность селекторов CSS
Специфичность селектора (еще называют весом) это свойство определяющее приоритет стилевого правила, то есть то, какой стиль будет применен к HTML элементу в итоге.
Например, используя какую-нибудь UI библиотеку, элементам этой библиотеки будут применены правила заданные авторами по умолчанию. При необходимости можно поменять стили на свои, «перебив» дефолтные более специфичным селектором.
#обучающийПост #css
Специфичность селектора (еще называют весом) это свойство определяющее приоритет стилевого правила, то есть то, какой стиль будет применен к HTML элементу в итоге.
Например, используя какую-нибудь UI библиотеку, элементам этой библиотеки будут применены правила заданные авторами по умолчанию. При необходимости можно поменять стили на свои, «перебив» дефолтные более специфичным селектором.
#обучающийПост #css
👍4👏1
Подключение CSS и JavaScript в HTML-разметке: практики и исключения
CSS-стили, как правило, помещают в тег
JavaScript-скрипты часто размещают перед закрывающим тегом
Однако есть исключения. Например, некоторые скрипты, особенно те, которые отвечают за отслеживание активности пользователя или SEO, иногда помещают в
Также, современные браузеры и методы оптимизации позволяют использовать атрибут async или defer с тегом
#обучающийПост #css #html
CSS-стили, как правило, помещают в тег
<head> для того, чтобы браузер мог как можно быстрее загрузить и применить их, обеспечивая тем самым более быструю отрисовку страницы. Если стили будут загружаться после того, как пользователь начнет видеть содержимое страницы, это может привести к "мельканию" стилей, когда содержимое страницы изменится визуально после применения стилей.JavaScript-скрипты часто размещают перед закрывающим тегом
<body>, чтобы они не блокировали отрисовку основного содержимого страницы. Скрипты могут занимать значительное время для загрузки и выполнения, и если разместить их в <head>, пользователь может увидеть пустую или неполностью загруженную страницу.Однако есть исключения. Например, некоторые скрипты, особенно те, которые отвечают за отслеживание активности пользователя или SEO, иногда помещают в
<head>. Это позволяет скрипту собирать данные с самого начала загрузки страницы.Также, современные браузеры и методы оптимизации позволяют использовать атрибут async или defer с тегом
<script>, что позволяет загружать и выполнять JavaScript асинхронно, минимизируя тем самым влияние скрипта на время загрузки страницы.#обучающийПост #css #html
👍8🔥1👌1
Сброс и Нормализация CSS
Сброс CSS – это техника, при которой мы явно "обнуляем" стили элементов, устанавливая значения отступов, размеров шрифтов, границ и других параметров на 0 или на какое-то другое базовое значение. Это делается для того, чтобы "сбросить" стили, которые браузер применяет автоматически.
Нормализация – это другой способ сделать стили более консистентными между разными браузерами, но без полного "сброса". Нормализация корректирует стили, делая их более предсказуемыми и одинаковыми в разных браузерах, но сохраняя некоторые базовые стили. Например, в нормализации могут быть исправления для отображения элементов форм, таблиц и других элементов в разных браузерах.
#обучающийПост #css #html
Сброс CSS – это техника, при которой мы явно "обнуляем" стили элементов, устанавливая значения отступов, размеров шрифтов, границ и других параметров на 0 или на какое-то другое базовое значение. Это делается для того, чтобы "сбросить" стили, которые браузер применяет автоматически.
Нормализация – это другой способ сделать стили более консистентными между разными браузерами, но без полного "сброса". Нормализация корректирует стили, делая их более предсказуемыми и одинаковыми в разных браузерах, но сохраняя некоторые базовые стили. Например, в нормализации могут быть исправления для отображения элементов форм, таблиц и других элементов в разных браузерах.
#обучающийПост #css #html
👍4
Свойство float в CSS
Свойство float в CSS используется для выравнивания элементов (часто изображений) слева или справа на веб-странице, позволяя тексту и другим элементам "обтекать" их.
Когда элементу присваивается свойство float, он выносится из нормального потока документа и сдвигается влево или вправо в зависимости от значения свойства (left, right, или none). Остальные элементы на странице будут "обтекать" его.
- Элементы с float выходят из нормального потока, что может привести к некоторым проблемам макета, которые обычно решаются с использованием дополнительных CSS-техник, таких как clear.
- float особенно полезен для макетов с несколькими столбцами и для обтекания текста вокруг изображений.
- Современные методы макетирования, такие как Flexbox и Grid, делают float менее необходимым для создания сложных макетов, но это свойство все еще широко используется и полезно знать.
#css #обучающийПост #float
Свойство float в CSS используется для выравнивания элементов (часто изображений) слева или справа на веб-странице, позволяя тексту и другим элементам "обтекать" их.
Когда элементу присваивается свойство float, он выносится из нормального потока документа и сдвигается влево или вправо в зависимости от значения свойства (left, right, или none). Остальные элементы на странице будут "обтекать" его.
- Элементы с float выходят из нормального потока, что может привести к некоторым проблемам макета, которые обычно решаются с использованием дополнительных CSS-техник, таких как clear.
- float особенно полезен для макетов с несколькими столбцами и для обтекания текста вокруг изображений.
- Современные методы макетирования, такие как Flexbox и Grid, делают float менее необходимым для создания сложных макетов, но это свойство все еще широко используется и полезно знать.
#css #обучающийПост #float
👍8👌2
Блочная модель CSS
Это основной принцип компоновки веб-страниц, который определяет, как элементы веб-страницы размещаются и взаимодействуют друг с другом. Каждый элемент на веб-странице рассматривается как прямоугольный блок.
1. Содержимое (Content): Это основная часть блока, где располагается текст, изображения или другие элементы.
2. Внутренние отступы (Padding): Расстояние между содержимым и границей элемента. Padding увеличивает размер элемента, но остается частью элемента, что означает, что фоновый цвет или изображение элемента будет распространяться на область внутренних отступов.
3. Граница (Border): Обрамляет содержимое и внутренние отступы. Граница является важной частью визуального представления элемента и может быть стилизована различными способами.
4. Внешние отступы (Margin): Пространство вокруг элемента, отделяющее его от других элементов. Внешние отступы не влияют на размер самого элемента, но определяют расстояние между элементами.
Все части блока, кроме внешних отступов (margin), включаются в общую ширину и высоту элемента в CSS.
#обучающийПост #css #block
Это основной принцип компоновки веб-страниц, который определяет, как элементы веб-страницы размещаются и взаимодействуют друг с другом. Каждый элемент на веб-странице рассматривается как прямоугольный блок.
1. Содержимое (Content): Это основная часть блока, где располагается текст, изображения или другие элементы.
2. Внутренние отступы (Padding): Расстояние между содержимым и границей элемента. Padding увеличивает размер элемента, но остается частью элемента, что означает, что фоновый цвет или изображение элемента будет распространяться на область внутренних отступов.
3. Граница (Border): Обрамляет содержимое и внутренние отступы. Граница является важной частью визуального представления элемента и может быть стилизована различными способами.
4. Внешние отступы (Margin): Пространство вокруг элемента, отделяющее его от других элементов. Внешние отступы не влияют на размер самого элемента, но определяют расстояние между элементами.
Все части блока, кроме внешних отступов (margin), включаются в общую ширину и высоту элемента в CSS.
#обучающийПост #css #block
👍5
Изучаем CSS
На сегодняшний день существует огромное количество интересных ресурсов для изучения технологий, ЯП и инструментов.
Вот пример для изучения отдельных тем в CSS:
1. Flexbox
https://flexboxfroggy.com/#ru
2. Grid
https://cssgridgarden.com/
#css #flexbox #grid #study #free #game
На сегодняшний день существует огромное количество интересных ресурсов для изучения технологий, ЯП и инструментов.
Вот пример для изучения отдельных тем в CSS:
1. Flexbox
https://flexboxfroggy.com/#ru
2. Grid
https://cssgridgarden.com/
#css #flexbox #grid #study #free #game
👍5🔥5
Почему мы ушли от Styled Components на проектах
Когда мы начинали писать проекты с использование Styled Components, нам показалось это отличной идеей, сразу обнаружили для себя огромное число плюсов. Однако спустя 6 месяцев использования, решили отказаться от этого.
Использование чистого CSS или CSS Module имеют преимущества перед CSS-in-JS решениями.
🔹Прямая обработка браузером: Чистый CSS обрабатывается непосредственно браузером, что обычно быстрее, чем обработка стилей, внедренных в JavaScript. Браузеры оптимизированы для разбора и применения CSS, что обеспечивает более эффективную отрисовку стилей.
🔹Отсутствие JavaScript-вычислений: Поскольку CSS не зависит от JavaScript для определения и применения стилей, он избегает затрат на производительность, связанных с выполнением JavaScript-кода (например, вычисление стилей на основе состояния или пропсов).
🔹Отсутствие дополнительных библиотек: Использование чистого CSS не требует включения дополнительных библиотек или фреймворков, в отличие от подходов CSS-in-JS, где необходимо использовать библиотеки, такие как Styled Components.
🔹Меньший размер сборки: Поскольку не требуются дополнительные библиотеки, общий размер сборки вашего проекта остается меньше, что положительно сказывается на времени загрузки и производительности веб-страницы.
🔹Уменьшение сложности: Меньшее количество зависимостей также уменьшает сложность проекта, что облегчает поддержку, обновление и устранение ошибок.
Конечно, Styled Components имеют и много плюсов, но мы, разработчики, в нашем мире технологических абстракций, решили отодвинуть в сторону сложности. Мы вернулись к основам: чистому CSS и модулям. Видимо, в какой-то момент мы устали от излишней логики, спрятанной за красивыми интерфейсами. И кто знает, может быть, однажды мы даже сделаем шаг назад к чистому JavaScript, оставив React в покое. В конце концов, иногда проще — это лучше, правда?😅
#css #cssInJs #styledComponents
Когда мы начинали писать проекты с использование Styled Components, нам показалось это отличной идеей, сразу обнаружили для себя огромное число плюсов. Однако спустя 6 месяцев использования, решили отказаться от этого.
Использование чистого CSS или CSS Module имеют преимущества перед CSS-in-JS решениями.
🔹Прямая обработка браузером: Чистый CSS обрабатывается непосредственно браузером, что обычно быстрее, чем обработка стилей, внедренных в JavaScript. Браузеры оптимизированы для разбора и применения CSS, что обеспечивает более эффективную отрисовку стилей.
🔹Отсутствие JavaScript-вычислений: Поскольку CSS не зависит от JavaScript для определения и применения стилей, он избегает затрат на производительность, связанных с выполнением JavaScript-кода (например, вычисление стилей на основе состояния или пропсов).
🔹Отсутствие дополнительных библиотек: Использование чистого CSS не требует включения дополнительных библиотек или фреймворков, в отличие от подходов CSS-in-JS, где необходимо использовать библиотеки, такие как Styled Components.
🔹Меньший размер сборки: Поскольку не требуются дополнительные библиотеки, общий размер сборки вашего проекта остается меньше, что положительно сказывается на времени загрузки и производительности веб-страницы.
🔹Уменьшение сложности: Меньшее количество зависимостей также уменьшает сложность проекта, что облегчает поддержку, обновление и устранение ошибок.
Конечно, Styled Components имеют и много плюсов, но мы, разработчики, в нашем мире технологических абстракций, решили отодвинуть в сторону сложности. Мы вернулись к основам: чистому CSS и модулям. Видимо, в какой-то момент мы устали от излишней логики, спрятанной за красивыми интерфейсами. И кто знает, может быть, однажды мы даже сделаем шаг назад к чистому JavaScript, оставив React в покое. В конце концов, иногда проще — это лучше, правда?😅
#css #cssInJs #styledComponents
❤11👍4🔥3🤔1