Основы html/css Flashcards
Расскажи про относительные и абсолютные величины в CSS
Существует два типа величин используемых в CSS — относительные и абсолютные.
Абсолютные величины:
- Пиксели (px): Абсолютная единица измерения, используемая в CSS. 1 пиксель соответствует одному физическому пикселю на экране.
- Дюймы (in): Абсолютная единица измерения, которая равна 1/96 дюйма. *
- Сантиметры (cm): Абсолютная единица измерения, которая равна 2.54 сантиметра.
Относительные величины:
- Проценты (%): Относительная единица измерения, которая зависит от родительского контейнера или других свойств элемента.
-
EM и REM: Относительные единицы измерения, которые зависят от размера шрифта элемента или размера шрифта корневого элемента (
html). - Viewport Units: Относительные единицы измерения, которые зависят от размера экрана или области просмотра пользовательского браузера. Примеры:
-
vw(viewport width) - 1% от ширины окна просмотра -
vh(viewport height) - 1% от высоты окна просмотра -
vmin- 1% от наименьшей стороны окна просмотра -
vmax- 1% от наибольшей стороны окна просмотра
Flexbox
CSS Flexbox — это технология для создания гибких макетов за счёт различного размещения элементов на странице.
-
display: flex- определяет flex контейнер; inline или block в зависимости от заданного значения. Включает flex контекст для всех потомков первого уровня. -
flex-direction- устанавливает основную ось, таким образом определяя направление flex элементов, помещаемых в flex контейнер. Flexbox — это (помимо дополнительной упаковки) концепция однонаправленного макета. -
row(по умолчанию): слева направо в ltr; справа налево в rtl -
row-reverse: справа налево в ltr; слева направо в rtl -
column: так же, как иrow, но сверху вниз -
column-reverse: то же самое,row-reverse, но снизу вверх -
flex-wrap- По умолчанию гибкие элементы будут пытаться уместиться на одной строке. Вы можете изменить это и позволить элементам переходить на новую строку по мере необходимости с помощью этого свойства. -
nowrap(по умолчанию): все flex элементы будут в одной строке. -
wrap: flex-элементы будут перенесены на несколько строк сверху вниз. -
wrap-reverse: flex-элементы будут перенесены на несколько строк снизу вверх. -
flex-flow(Применяется к: родительскому элементу flex-контейнера) - сокращение дляflex-directionиflex-wrapсвойств:flex-flow: ||. -
justify-content- определяет выравнивание вдоль главной оси. Есть также два дополнительных ключевых слова, которые вы можете связать с этими значениями:safeиunsafe. Использованиеsafeгарантирует, что элементы не будут отображаться за пределами экрана таким образом, чтобы содержимое не могло быть прокручено (это называется «потеря данных»). -
flex-start(по умолчанию): элементы сдвинуты в началоflex-directionнаправления. -
flex-end: элементы сдвинуты ближе к концу flex направления. -
center: элементы центрированы вдоль линии. -
space-between: элементы равномерно распределены по линии; первый элемент находится в начале строки, последний элемент в конце строки. -
space-around: элементы равномерно распределены по линии с одинаковым пространством вокруг них. Обратите внимание, что визуально пространства могут различаться, так как все элементы имеют одинаковое пространство с обеих сторон, а первый и последний элементы имеют половину пространства. -
space-evenly: элементы распределяются таким образом, чтобы расстояние между любыми двумя элементами (и расстояние до краев) было одинаковым. -
start: элементы сдвинуты к началу writing-mode направления. -
end: элементы сдвинуты в конце writing-mode направления. -
left: элементы сдвинуты по направлению к левому краю контейнера, если это не имеет смыслаflex-direction, тогда он ведет себя какstart. -
right: элементы сдвинуты по направлению к правому краю контейнера, если это не имеет смыслаflex-direction, тогда он ведет себя какstart. -
align-items- Это свойство определяет поведение по умолчанию того, как flex элементы располагаются вдоль поперечной оси на текущей линии. Тут тоже могут быть использованыsafeиunsafe. -
stretch(по умолчанию): растягивать, чтобы заполнить контейнер (все еще соблюдаютсяmin-width/max-width). -
flex-start/start/self-start: элементы размещаются в начале поперечной оси. Разница между ними невелика и заключается в соблюденииflex-directionправил илиwriting-modeправил. -
flex-end/end/self-end: элементы располагаются в конце поперечной оси. Разница опять-таки тонкая и заключается в соблюденииflex-directionилиwriting-modeправил. -
center: элементы центрированы по поперечной оси. -
baseline: элементы выровнены по их базовой линии. -
align-content- Это свойство выравнивает линии в пределах flex контейнера, когда есть дополнительное пространство на поперечной оси, подобно тому, какjustify-contentвыравнивает отдельные элементы в пределах главной оси. -
flex-start/start: элементы сдвинуты в начало контейнера. Более поддерживаемыйflex-startиспользуетflex-direction, в то время какstartиспользуетwriting-modeнаправление. -
flex-end/end: элементы сдвинуты в конец контейнера. Более поддерживаемыйflex-endиспользуетflex-direction, в то время какendиспользуетwriting-modeнаправление. -
center: элементы выровнены по центру в контейнере. -
space-between: элементы равномерно распределены; первая строка находится в начале контейнера, а последняя — в конце. -
space-around: элементы равномерно распределены с равным пространством вокруг каждой строки. -
space-evenly: элементы распределены равномерно, вокруг них одинаковое пространство. -
stretch(по умолчанию): линии растягиваются, чтобы занять оставшееся пространство. -
align-self- Это свойство позволяет переопределить выравнивание по умолчанию (или указанное с помощьюalign-items) для отдельных элементов flex. -
flex-basis- Это свойство определяет размер элемента по умолчанию перед распределением оставшегося пространства. Это может быть длина (например, 20%, 5rem и т.д.) Или ключевое слово. Ключевое слово auto означает «смотри на мое width или height свойство». Ключевое слово content означает «размер на основе содержимого элемента» — это ключевое слово все еще не очень хорошо поддерживается, так что трудно проверить что для него используется max-content, min-content или fit-content. Если установлено значение 0, дополнительное пространство вокруг содержимого не учитывается. Если установлено значение auto, дополнительное пространство распределяется в зависимости от его flex-grow значения. -
flex-grow: определяет способность flex элемента растягиваться в случае необходимости. Оно принимает значение от нуля, которое служит пропорцией. Если для всех элементовflex-growустановлено значение 1, оставшееся пространство в контейнере будет равномерно распределено между всеми дочерними элементами. Если один из дочерних элементов имеет значение 2, этот элемент займет в два раза больше места, чем остальные (или попытается, по крайней мере). -
flex-shrink: Это свойство определяет способность гибкого элемента сжиматься при необходимости. -
flex: Это сокращение для использованияflex-grow,flex-shrinkиflex-basisвместе. Второй и третий параметры (flex-shrinkиflex-basis) являются необязательными.
Grid
CSS Grid - это мощная система разметки, позволяющая создавать гибкие и сложные макеты на веб-странице. Она основана на концепции сетчатки (grid), где элементы располагаются в ячейках, определенных с помощью сетки.
Для работы с CSS Grid используются следующие свойства:
-
display: grid;- задает элементу контейнерную сетку. -
grid-template-columns:- определяет количество и размеры столбцов в сетке. Можно указать значение в пикселях, процентах или других единицах измерения. Например,grid-template-columns: 1fr 2fr 1fr;создаст три столбца, из которых средний будет занимать в два раза больше места. -
grid-template-rows:- определяет количество и размеры строк в сетке. Работает аналогичноgrid-template-columns, но применяется к строкам. -
grid-gap:- определяет пространство между ячейками сетки. Можно указать значение в пикселях, процентах или других единицах измерения. Например,grid-gap: 10px;создаст промежуток шириной 10 пикселей между ячейками. -
column-gapиспользуется для добавления отступа между колонками. -
row-gapиспользуется для добавления отступов между рядами. -
grid-template-areas:- задает расположение ячеек с помощью именованных областей. Например,
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
-
grid-column-start:иgrid-column-end:- определяют начальную и конечную позиции столбцов для элемента. Можно указывать числовое значение или ключевое словоspanс числом, указывающим количество ячеек сетки. -
grid-row-start:иgrid-row-end:- определяют начальную и конечную позиции строк для элемента. Работают аналогичноgrid-column-startиgrid-column-end. -
justify-items:- выравнивает содержимое ячеек вдоль оси столбцов. Можно использовать значенияstart,end,centerи другие. -
align-items:- выравнивает содержимое ячеек вдоль оси строк. Можно использовать значенияstart,end,centerи другие. -
justify-content:- выравнивает сетку вдоль оси столбцов. Можно использовать значенияstart,end,center,space-aroundи другие. -
align-content:- выравнивает сетку вдоль оси строк. Можно использовать значенияstart,end,center,space-aroundи другие. -
justify-self:- выравнивает содержимое отдельного элемента вдоль оси столбцов. Можно использовать значенияstart,end,centerи другие для каждого элемента в сетке отдельно. -
align-self:- выравнивает содержимое отдельного элемента вдоль оси строк. Можно использовать значенияstart,end,centerи другие для каждого элемента в сетке отдельно. -
grid-auto-columns:- определяет размер автоматически созданных столбцов в сетке. -
grid-auto-rows:- определяет размер автоматически созданных строк в сетке. -
grid-auto-flow:- определяет, как новые элементы будут размещаться на сетке при превышении заданных столбцов и строк. Можно использовать значенияrow,columnиdense.
Блоковая модель
Boxmodel
Блоковая модель CSS — это, по сути, блок, который окружает каждый элемент HTML. Он состоит из: полей, границ, отступов и фактического содержимого. Она позволяет нам добавлять границы вокруг элементов и определять пространство между элементами. Когда вы устанавливаете свойства ширины и высоты элемента с помощью CSS, вы просто устанавливаете ширину и высоту области содержимого . Чтобы рассчитать полный размер элемента, вы также должны добавить отступы, границы и поля. К примеру:
320 пикселей (ширина)
+ 20 пикселей (левый + правый отступ)
+ 10 пикселей ( левый + правый край) + 0 пикселей
(левый + правый край)
= 350 пикселей
Веса селекторов
Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу. Иногда это может создавать трудности, когда свойство, объявленное ниже в коде, перекрывается тем, что объявлено выше, потому что селектор первого более специфичен (имеет больший вес).
Специфичность селектора рассчитывается по 4-м позициям. Для каждого из них подсчитывается количество подходящих элементов в селекторе, и это число помещается в соответствующую позицию.
Вес селекторов (по убыванию):style="" - 1,0,0,0 - У стилей, заданных в атрибуте style, на первой позиции будет единица — 1,0,0,0. Это самая высокая специфичность, которая перевешивает свойства, заданные другими способами. Переопределить стили, заданные в style, можно дописав !important к значению свойства в таблице стилей.#id - 0,1,0,0.class - 0,0,1,0[attr=value] - 0,0,1,0<li> - 0,0,0,1* - 0,0,0,0
Значения атрибута display
Значение none
Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
Значение block
Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float).
Блок стремится расшириться на всю доступную ширину.
Можно указать ширину и высоту явно.
Блоки прилегают друг к другу вплотную, если у них нет margin.
Это значение display многие элементы имеют по умолчанию: <div>, заголовок <h1>, параграф <p>.
Значение inline
Элементы располагаются на той же строке, последовательно.
Ширина и высота элемента определяются по содержимому. Поменять их нельзя.
Например, инлайновые элементы по умолчанию: <span>, <a>.
Содержимое инлайн-элемента может переноситься на другую строку.
При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.
Это проявляется, например, при назначении фона.
Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки</a></span>
Значение inline-block
Это значение – означает элемент, который продолжает находиться в строке (inline), но при этом может иметь важные свойства блока.
Как и инлайн-элемент:
Располагается в строке.
Размер устанавливается по содержимому.
Во всём остальном – это блок, то есть:
Элемент всегда прямоугольный.
Работают свойства width/height.
Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
Значения table-
Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display.
Для таблицы целиком table, для строки – table-row, для ячейки – table-cell и т.д.
list-item
Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами
run-in
Если после run-in идёт block, то run-in становится его первым инлайн-элементом, то есть отображается в начале block.
flex и grid
Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке.
Каскад и наследование в CSS
Cascade and Inheritance
CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей. Каскад и тесно связанная концепция специфичности — это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.
Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий:
- Порядок следования
- Специфичность
- Важность
!important- используется, чтобы сделать конкретное свойство и значение самыми специфичными, таким образом переопределяя нормальные правила каскада.
Специфичность и наследование
Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но могут быть применены к одному и тому же элементу. Различные типы селекторов (селекторы элементов h1, селекторы классов, селекторы идентификаторов и т.д.) имеют разную степень влияния на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы, тем меньше его специфичность или конкретность.
Также значимой является концепция наследования, которая заключается в том, что некоторые свойства CSS наследуют значения, установленные для родительского элемента текущего элемента, а некоторые свойства не наследуются. Это может привести к поведению, которое вы, возможно, не ожидаете. Например, свойство font-family наследуется, а width не наследуется.
Контроль наследования CSS
CSS предоставляет четыре специальных универсальных значения свойства для контроля наследования. Каждое свойство CSS может принимать эти значения:
-
inherit- Устанавливает значение свойства для элемента таким же, как у его родительского элемента. Фактически, это включает наследование. -
initial- Устанавливает значение свойства для выбранного элемента равным исходному значению этого свойства (в соответствии с настройками браузера по умолчанию). Если в таблице стилей браузера отсутствует значение этого свойства, оно наследуется естественным образом. -
unset- Возвращает свойству свое естественное значение. Если свойство наследуется естественным образом, оно действует какinherit, иначе оно действует какinitial. - Существует также более новое значение
revert, которое имеет ограниченную поддержку браузерами.
Позиционирование: поток документа, свойство position, Overflow и z-index
Поток документа (flow)
Поток - это принцип организации элементов на странице при отсутствии стилей: если мы напишем HTML и не напишем CSS, то отображение в браузере будет предсказуемо благодаря тому, что мы абсолютно точно знаем, как браузер располагает элементы в потоке. Если вообще не применять никаких стилей, браузер формирует из элементов нормальный поток. Поведение блочных элементов в нормальном потоке отличается от поведения строчных.
Правила расположения строчных и блочных элементов в нормальном потоке называются контекстом форматирования. Блочные элементы участвуют в формировании блочного контекста форматирования. Строчные элементы формируют строчный контекст форматирования. Расположение элементов в контексте форматирования зависит от направления письма для конкретного языка.
- Блочные элементы в нормальном потоке располагаются друг под другом, всегда занимая всю доступную ширину родителя. Высота блочного элемента по умолчанию равна высоте его содержимого.
- Строчные элементы располагаются друг за другом, как слова в предложении. В зависимости от направления письма в конкретном языке элементы могут располагаться слева направо (например, в русском языке), справа налево (как, например, в иврите) и даже сверху вниз (как иероглифы и знаки слоговых азбук в японском вертикальном письме). Ширина и высота строчного элемента равна ширине и высоте содержимого. В отличие от блочного элемента, мы не можем управлять шириной и высотой строчного элемента через CSS. Несколько строчных элементов будут стремиться уместиться на одной строке, насколько хватает ширины родителя. Если ширины родителя не хватает, то лишний текст строчного элемента переносится на следующую строку.
Все элементы по умолчанию находятся в нормальном потоке. Но это поведение можно поменять при помощи некоторых CSS-свойств. При изменении значений этих свойств элемент перестаёт взаимодействовать с остальными блоками в потоке. Говорят, что он «вышел из потока». Элементы, вышедшие из потока, создают внутри себя своего рода мини-поток -их дочерние элементы будут подчиняться правилам взаимодействия в потоке в пределах родителя.
Обтекание при помощи float
Когда мы делаем элемент плавающим, он перестаёт взаимодействовать с другими элементами блочного контекста. При этом со строчным контекстом наш плавающий блок продолжает взаимодействовать. Текстовые элементы обтекают такой блок с одной из сторон.
Позиционирование элемента при помощи position
Свойство position в CSS может принимать пять значений:
- absolute удаляет элемент из общего потока документа. Окружающие элементы сдвигаются на его место, будто его не существует. Такие элементы позиционируются относительно ближайшего родительского элемента, для которого задано позиционирование отличное от static. Если такого элемента нет, то элемент позиционируется относительно основного документа.
- relative - относительно позиционированные элементы, размещаются на основе своей же позиции, обычный сдвиг относительно своего нормального расположения. Элементы с относительным позиционированием, взяты из нормального потока элемента, но по-прежнему оказывают влияние на расположение соседних элементов, которые ведут себя так, что исходный элемент всё ещё находится в потоке документа.
- fixed -элемент с фиксированным позиционированием всегда располагается относительно окна браузера, родительские элементы при этом игнорируются. Фиксированные элементы зафиксированы на странице. Они не смещаются при её прокручивании.
- static используется по умолчанию, элемент с позиционированием static находится в общем потоке документа
- inherit - элемент использует тоже самое значение, что и родительский элемент.
Расположение элемента с абсолютным позиционированием, реализуется с помощью свойств top, left, right и bottom.
Z-index
Страница сайта двумерна. У неё есть ширина и высота. Z-index добавляет третье измерение, глубину. Свойство z-index может быть применено только для элементов с установленным свойством position. Чем выше этот индекс тем выше на странице расположен элемент. С помощью него мы можем добиться чтобы один элемент располагался поверх другого. По умолчанию, его значение - ноль. Отрицательные значения также допустимы.
Overflow
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
- visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
- hidden - Отображается только область внутри элемента, остальное будет скрыто.
- scroll - Всегда добавляются полосы прокрутки.
- auto - Полосы прокрутки добавляются только при необходимости.
- inherit - Наследует значение родителя.
Псевдокласс и псевдоэлемент
Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши.
Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия.
Существует пара специальных псевдоэлементов, которые используются вместе со свойством content для вставки содержимого в документ с помощью CSS.
Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства content и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.
Псевдоклассы:
- :hover - применяется при наведении курсора на элемент.
- :active - применяется, когда элемент находится в активном состоянии (нажатие кнопки мыши на него).
- :focus - применяется, когда элемент находится в фокусе (например, после клика на него или при использовании клавиатурной навигации).
- :visited - применяется к посещенным ссылкам.
- :first-child - применяется к первому дочернему элементу родителя.
- :last-child - применяется к последнему дочернему элементу родителя.
- :nth-child(n) - применяется к элементам, которые являются n-ными дочерними элементами родителя. Может использоваться для создания шаблонов сетки и других паттернов.
- :nth-of-type(n) - применяется к каждому элементу, который является n-ым элементом своего типа (таким же тегом).
- :not(selector) - исключает элементы, которые соответствуют указанному селектору.
Псевдоэлементы:
- ::before - добавляет псевдоэлемент перед содержимым выбранного элемента.
- ::after - добавляет псевдоэлемент после содержимого выбранного элемента.
- ::first-line - применяется к первой строке текста внутри элемента.
- ::first-letter - применяется к первой букве текста внутри элемента.
- ::selection - применяется к выделенному пользователем тексту на странице.
- ::placeholder - применяется к текстовому заполнителю внутри элемента формы (input, textarea и т.д.).
Для чего нужны CSS-переменные? Приведите несколько примеров использования.
CSS-переменные (или Custom Properties) являются механизмом в CSS, который позволяет объявлять и использовать переменные для хранения значений, таких как цвета, шрифты, размеры и т.д. Они обеспечивают гибкость и переиспользование кода стилей. Вот несколько примеров использования CSS-переменных:
- Управление цветовой палитрой: CSS-переменные позволяют задать основные цвета и использовать их во всем документе, что упрощает изменение цветовой схемы в одном месте. Например:
:root {
--primary-color: #FF0000;
--secondary-color: #00FF00;
}
.header {
background-color: var(--primary-color);
}
.button {
background-color: var(--secondary-color);
}
- Использование для медиа-запросов: CSS-переменные также могут быть использованы в медиа-запросах, что позволяет задавать условия адаптивности с использованием переменных. Например:
:root {
--breakpoint: 768px;
}
.container {
width: 100%;
}
@media (min-width: var(--breakpoint)) {
.container {
max-width: 960px;
}
}
- Управление шрифтами: CSS-переменные могут быть использованы для установки и переиспользования значений шрифтов в различных стилях текста. Например:
:root {
--font-primary: 'Arial', sans-serif;
--font-secondary: 'Verdana', sans-serif;
}
.body {
font-family: var(--font-primary);
}
.heading {
font-family: var(--font-secondary);
}
- Анимация и переходы: CSS-переменные могут использоваться для задания времени или задержки в анимации или переходе. Например:
:root {
--transition-duration: 0.3s;
}
.button {
transition-duration: var(--transition-duration);
}
Что произойдет при добавлении следующего селектора? * {Box-sizing: border-box; }
Когда вы добавите следующий селектор * {box-sizing: border-box;}, это применит свойство box-sizing: border-box; ко всем элементам на странице. Это изменит поведение видимого размера элементов, поскольку свойство box-sizing: border-box; заставляет браузер учитывать границы и отступы элемента в его вычисленной ширине и высоте.
Вместо использования значений по умолчанию (content-box), которые добавляют границы и отступы элементов к его вычисленным значениям ширины и высоты, свойство box-sizing: border-box; заставляет браузер учитывать эти значения при вычислении размеров элементов. Это может быть полезным, особенно при разработке макетов и установке размеров элементов с использованием CSS, поскольку позволяет более просто и предсказуемо управлять размерами элементов.
Как адаптировать страницу для печати?
Для адаптации страницы для печати можно использовать следующие подходы и CSS-правила:
- Media Queries: Используйте медиа-запросы (
@media print) для указания стилей, применяемых только при печати. Например:
@media print {
/* Стили для печати здесь */
}
- Скрытие элементов: Используйте свойство
display: noneилиvisibility: hiddenдля скрытия элементов, которые не нужно отображать при печати. Например:
@media print {
.hide-print {
display: none;
}
}
- Изменение стилей: Измените стили элементов для оптимального отображения при печати. Например, установите ширину элементов, чтобы они соответствовали размеру страницы, или скройте фоновые изображения, чтобы сохранить черно-белый формат.
- Задание размеров страницы: Используйте свойство
@pageдля определения размеров страницы и ориентации печати. Например:
@page {
size: A4; /* Задание размера страницы */
margin: 2cm; /* Задание полей страницы */
}
- Оптимизация содержимого: Избегайте изображений с высоким разрешением и лишних элементов для улучшения читаемости и экономии бумаги.
Опишите особенности кастомизации стилей стандартных элементов форм.
- Установка пользовательских стилей: Вы можете использовать CSS-правила для выбора стандартных элементов форм и задания пользовательских стилей. Вы можете изменить размеры, цвета, шрифты, фоны и другие свойства элементов форм, чтобы они соответствовали дизайну вашего веб-сайта.
- Переопределение псевдоклассов: С помощью псевдоклассов, таких как
:hover,:activeи:focus, вы можете изменить стили элементов форм в различных состояниях. Например, вы можете изменить цвет кнопки при наведении на нее или добавить рамку, когда элемент формы получает фокус. - Указывание псевдоэлементов: С помощью псевдоэлементов, таких как
::beforeи::after, вы можете добавить дополнительные элементы к стандартным элементам форм. Например, вы можете добавить значок или иконку рядом с полем ввода или создать кастомные фоновые эффекты. - Настройка различных типов элементов форм: Каждый тип стандартного элемента формы имеет свои уникальные стили. Например, для текстового поля вы можете настроить высоту, ширину, границы и фон, а для кнопки - фон, шрифт и цвет текста.
- Использование псевдокласса
:invalid: Псевдокласс:invalidпозволяет стилизовать элементы формы, когда они содержат недопустимые данные или не проходят валидацию. Например, вы можете установить красную рамку вокруг неверно заполненных полей или добавить сообщение об ошибке.
Что такое progressive рендеринг? Какие подходы в нем используются?
Progressive рендеринг - это стратегия отображения содержимого страницы по мере его загрузки, позволяющая пользователям видеть и взаимодействовать с контентом как можно быстрее. Она направлена на улучшение восприятия времени загрузки и увеличение отзывчивости пользовательского интерфейса. Вот некоторые подходы, используемые в progressive рендеринге:
- Постепенная загрузка (Lazy Loading): Загружайте изображения, видео и другие ресурсы только тогда, когда они становятся видимыми в окне просмотра. Это может быть особенно полезно при работе с большими изображениями или медиафайлами, которые могут существенно замедлить время загрузки страницы.
- Вертикальное разделение задач (Vertical Splitting): Разделите задачи на несколько этапов и сначала отобразите основной контент страницы, а затем загружайте и обрабатывайте дополнительные компоненты или модули. Это помогает ускорить первоначальную отрисовку страницы и дает пользователям возможность начать просмотр контента сразу же.
- Постоянная загрузка (Progressive Enhancement): Загружайте основной контент и функциональность в первую очередь, а после этого постепенно добавляйте дополнительные улучшения и оптимизации. Такой подход позволяет обеспечить базовый функционал для всех пользователей и постепенно улучшать его для тех, кто может использовать более современные возможности.
- Полная загрузка критического содержимого (Critical Rendering Path): Сосредоточьтесь на загрузке и отображении “критического” или важного для первоначального восприятия содержимого страницы, такого как текст, стили, шрифты. Оптимизируйте эти ресурсы, чтобы они максимально быстро отображались пользователю.
- Кэширование и предзагрузка (Caching and Prefetching): Используйте механизмы кэширования, чтобы сохранить ресурсы на стороне клиента и предзагружать необходимые для последующих этапов страницы.
Назовите популярные CSS-методологии и их различия.
Существует несколько популярных CSS-методологий, разработанных для более эффективной и организованной разработки стилей. Вот некоторые из них и их основные различия:
- БЭМ (Блок, Элемент, Модификатор): БЭМ является одной из самых популярных методологий. Он использует структурированный подход к именованию классов, основанный на иерархии Блок-Элемент-Модификатор. БЭМ способствует модульности и переиспользованию кода.
- SMACSS (Scalable and Modular Architecture for CSS): SMACSS призывает к созданию гибкой, масштабируемой и модульной архитектуры CSS. Он рекомендует разделение стилей на базовые стили, стили масштабируемых компонентов, макеты, состояния и темы, чтобы обеспечить четкую организацию стилей.
- OOCSS (Object-Oriented CSS): OOCSS подразумевает создание стилей, которые могут быть переиспользованы на разных элементах страницы. Он способствует созданию независимых компонентов и повторному использованию кода, чтобы упростить разработку и поддержку CSS.
- Atomic CSS: Atomic CSS предлагает подход, в котором стили представлены в виде небольших, автономных классов, которые применяются для конкретных стилей или свойств. Он способствует созданию модульных стилей и быстрой разработке CSS.
- CSS-in-JS: CSS-in-JS - это подход, при котором CSS находится внутри компонентов JavaScript. Он позволяет создавать компоненты, в которых стили могут быть написаны непосредственно внутри JavaScript-файлов или использовать специальные инструменты для компиляции.
Какие форматы изображений поддерживают анимацию?
- GIF (Graphics Interchange Format): GIF - это старый и широко поддерживаемый формат изображений, который поддерживает анимацию. Он использует последовательность изображений, называемых кадрами, отображаемых в определенной последовательности для создания анимационного эффекта.
- APNG (Animated Portable Network Graphics): APNG - это формат изображений, основанный на PNG, который поддерживает анимацию. В отличие от GIF, APNG позволяет более высокое качество изображений и поддерживает прозрачность.
- WebP: Формат WebP, разработанный Google, также поддерживает анимацию. Он обеспечивает отличное сжатие изображений и поддерживает прозрачность, что делает его популярным форматом для веб-анимаций.
- SVG (Scalable Vector Graphics): SVG - это векторный формат изображений, который также может использоваться для анимации. В SVG анимация создается с помощью CSS или JavaScript, что позволяет создавать сложные и интерактивные анимации.
Обратите внимание, что поддержка форматов изображений с анимацией может различаться в разных браузерах. Поэтому при использовании анимации изображений в веб-проекте рекомендуется проверить поддержку форматов и обеспечить альтернативные варианты для старых или несовместимых браузеров.
Как отследить прогресс / окончание CSS @keyframes анимаций или плавных переходов, реализованных с помощью transition, в JS?
Для отслеживания прогресса или окончания CSS анимации или плавного перехода можно использовать JavaScript и следующие подходы:
- Event Listeners: Добавьте слушатели событий для элемента, на котором происходит анимация или плавный переход, и отслеживайте соответствующие события. Например, вы можете использовать событие
animationstart,animationend,transitionstartиtransitionendдля отслеживания начала и окончания анимаций и плавных переходов.
const element = document.getElementById('myElement');
element.addEventListener('animationend', function() {
console.log('Анимация окончена');
});
- Проверка стилей: Вы можете проверять стили элемента с помощью JavaScript для определения статуса анимации или плавного перехода. Например, вы можете использовать
getComputedStyle()для получения текущего значения свойства, чтобы узнать, завершена ли анимация или плавный переход.
const element = document.getElementById('myElement');
const computedStyle = window.getComputedStyle(element);
const animationDuration = computedStyle.getPropertyValue('animation-duration');
if (animationDuration !== '0s') {
console.log('Анимация в процессе');
} else {
console.log('Анимация окончена');
}
- Callback функции: Если вы используете JavaScript-библиотеку или фреймворк для управления анимацией, они могут предоставлять callback функции для отслеживания прогресса или окончания анимации или плавного перехода. Например, в библиотеке JQuery вы можете использовать метод
.animate()с передачей callback функции.
$('#myElement').animate({
left: '300px'
}, 1000, function() {
console.log('Анимация окончена');
});
Какие CSS-свойства могут быть обработаны непосредственно через GPU? Что такое композитные слои и почему большое их количество может привести к аварийному завершению работы браузера на мобильных устройствах?
CSS-свойства, которые могут быть обработаны напрямую через GPU (графический процессор), включают:
-
transform: свойствоtransformпозволяет применять 2D и 3D трансформации к элементам, такие как перемещение (translate), масштабирование (scale), поворот (rotate) и др. -
opacity: свойствоopacityиспользуется для изменения прозрачности элемента. Этот эффект также может быть обработан на GPU. -
filter: свойствоfilterпозволяет применять эффекты, такие как размытие (blur), насыщенность (saturate), яркость (brightness) и др., которые также могут обрабатываться на GPU.
Композитные слои (Composite Layers) - это механизм, используемый браузером для улучшения производительности рендеринга CSS. Когда элемент имеет композитные слои, он обрабатывается непосредственно GPU. Каждый слой рендерится отдельно и может быть перепрорисован только при необходимости обновления.
Однако, большое количество композитных слоев может привести к перегрузке и низкой производительности браузера, особенно на мобильных устройствах с ограниченными ресурсами. Каждый слой требует памяти и обработки со стороны GPU, поэтому избыточное использование композитных слоев может приводить к проблемам с производительностью и деградации производительности. Рекомендуется минимизировать количество композитных слоев и оптимизировать использование анимаций и эффектов для улучшения производительности на мобильных устройствах.
Опишите способы оптимизации SVG-файлов.
Оптимизация SVG-файлов может повысить производительность и улучшить загрузку веб-страниц. Ниже перечислены несколько способов оптимизации SVG-файлов:
- Удаление ненужных элементов и атрибутов: Избавьтесь от ненужных элементов, групп и атрибутов в SVG-файле, оставив только необходимую информацию.
- Минификация кода: Удалите лишние пробелы, переносы строк и комментарии в SVG-файле с помощью специальных инструментов или онлайн-сервисов.
- Оптимизация путей: Если SVG-файл содержит сложные пути, попробуйте упростить их с помощью оптимизационных алгоритмов, таких как уплотнение (simplification) или сглаживание (smoothing).
- Атрибуты viewbox и preserveAspectRatio: Используйте атрибуты viewbox и preserveAspectRatio для масштабирования SVG-файла, чтобы он должным образом адаптировался к разным размерам контейнера.
- Компрессия: Применяйте сжатие SVG-файла, используя методы сжатия, такие как gzip или deflate, для уменьшения размера файла без потери качества.
- Предзагрузка и кэширование: Если SVG-файл используется на нескольких страницах, рекомендуется его предзагружать и кэшировать, чтобы избежать лишних запросов к серверу при переходе между страницами.
- Использование символов и ссылок: Если в SVG-файле повторяются элементы, такие как иконки или логотипы, рассмотрите возможность использования символьных элементов или ссылок, чтобы уменьшить размер файла и повысить эффективность его использования.
- Проверка совместимости: Проверьте правильность отображения SVG-файла в разных браузерах и на разных устройствах, чтобы убедиться, что он отображается корректно и без ошибок.
Что такое ложное жирное или ложное курсивное (Faux) начертания шрифтов?
Ложное жирное или ложное курсивное (Faux) начертание шрифтов - это эффект, при котором применяется стилистическое изменение к тексту, чтобы он выглядел жирнее или курсивнее без наличия соответствующих начертаний в самом шрифте.
Когда браузеру или системе не удается найти конкретное начертание (жирное или курсивное) для шрифта, он может применить ложное начертание, генерируя его на основе обычного начертания. Это может быть полезно в ситуациях, когда требуется быстрое применение эффекта жирного или курсивного текста, но нет доступного шрифта с соответствующим начертанием.
Однако, ложные начертания имеют свои ограничения в сравнении с настоящими начертаниями шрифтов. Они не могут точно воспроизвести уникальные дизайнерские особенности и могут отличаться от настоящих начертаний шрифта по внешнему виду. Кроме того, они могут сказываться на доступности и поддержке для использования программами чтения с экрана или другими вспомогательными технологиями.
Поэтому, хотя ложные начертания могут быть полезны для быстрого создания визуальных эффектов текста, рекомендуется использовать настоящие начертания шрифтов, когда они доступны, чтобы обеспечить лучшую качественную и стилистическую согласованность текста на веб-страницах или в дизайне.
Что такое #shadow-root в инспекторе HTML-страницы?
shadow-root (тень) - это псевдоэлемент, который представляет собой отдельное внутреннее дерево HTML-элемента, созданного с использованием технологии Shadow DOM. Shadow DOM позволяет создавать изолированные компоненты с собственным DOM-деревом, стилями и поведением, которые могут быть встроены в основное дерево документа.
Когда элемент имеет #shadow-root, то в инспекторе HTML-страницы вы можете раскрыть этот псевдоэлемент, чтобы увидеть его внутреннюю структуру, включая HTML, CSS и JavaScript-код, связанный с этим компонентом. Вы также можете отладить код, связанный с теневым DOM-деревом, и внести изменения в стили и поведение компонента через инструменты разработчика.
Тень может быть создана с помощью JavaScript-кода или атрибута shadowRoot, и может быть использована для создания настраиваемых элементов, инкапсулирующих свои стили и функциональность. Они особенно полезны при создании веб-компонентов, где каждый компонент может иметь свой собственный Shadow DOM, который не будет взаимодействовать с остальной частью страницы.
Что такое контекст отображения canvas? Какие существуют типы контекста для рендеринга двумерной и трехмерной графики?
Контекст отображения (rendering context) в элементе canvas в HTML является областью рисования для рендеринга двумерной или трехмерной графики. Он предоставляет API, которое позволяет программно создавать и управлять изображениями, фигурами, текстом и другими элементами на холсте.
Существуют различные типы контекстов для рендеринга двумерной и трехмерной графики:
- Контекст 2D (2D Context): Это стандартный контекст отображения, доступный по умолчанию. Он предоставляет методы для рисования путей, прямоугольников, текста, изображений и других элементов двумерной графики.
- WebGL (Web Graphics Library): WebGL является контекстом 3D-рендеринга, основанным на спецификации WebGL API. Он позволяет создавать и управлять трехмерной графикой с использованием графического процессора (GPU) и шейдеров.
- Контекст OffscreenCanvas: Это контекст отображения, который позволяет рендерить графику вне области просмотра пользователя. Он может быть использован для создания изображений в памяти или для рендеринга на сервере.
Каждый тип контекста имеет свои методы и функциональность, специфичные для рендеринга соответствующего типа графики. При разработке веб-приложений вы можете выбрать наиболее подходящий контекст в зависимости от того, какой тип графики требуется отрисовать в элементе canvas.
Что такое блочная модель CSS?
Блочная модель CSS - это концепция, определяющая, как элементы веб-страницы отображаются и взаимодействуют с другими элементами на основе своих размеров и расположения. Она включает в себя следующие компоненты:
- Контент (content): Это содержимое элемента, такое как текст, изображения или другие дочерние элементы.
- Заполнитель (padding): Это пространство, расположенное между контентом и границами элемента. Значение заполнения может быть задано с помощью свойств
padding-top,padding-right,padding-bottomиpadding-left. - Граница (border): Граница элемента, которая окружает его контент и заполнитель. Значение границы может быть задано с помощью свойств
border-top,border-right,border-bottomиborder-left. - Отступ (margin): Это пространство вокруг границы элемента. Значение отступа может быть задано с помощью свойств
margin-top,margin-right,margin-bottomиmargin-left.
Каждый из этих компонентов влияет на размеры элемента и его внешний вид на веб-странице. Вместе они определяют общую визуальную структуру и макет элемента.
Какие способы центрирования блочного контента по горизонтали и вертикали существуют?
Горизонтальное центрирование:
- margin: 0 auto;: Установка автоматических отступов слева и справа у элемента с фиксированной шириной позволяет центрировать его по горизонтали.
- text-align: center;: Применение данного свойства к родительскому элементу позволяет центрировать текстовый контент и встроенные элементы.
- display: flex; и justify-content: center;: Установка CSS-свойства display: flex; для родительского элемента и justify-content: center; для центрирования дочерних элементов по горизонтали.
Вертикальное центрирование:
- display: flex; и align-items: center;: Установка CSS-свойства display: flex; для родительского элемента и align-items: center; для центрирования дочерних элементов вертикально посредством выравнивания по центру.
- position: absolute;, top: 50%; и transform: translateY(-50%);: Установка CSS-свойства position: absolute; и значений top: 50%; и transform: translateY(-50%); для элемента позволяют центрировать его вертикально относительно родительского элемента.
- display: table-cell; и vertical-align: middle;: Применение display: table-cell; к родительскому элементу и vertical-align: middle; к дочернему элементу позволяет центрировать его вертикально.
Центрирование по горизонтали и вертикали одновременно:
- display: flex;, justify-content: center;, align-items: center;: Установка CSS-свойства display: flex; для родительского элемента и justify-content: center; и align-items: center; для центрирования дочерних элементов как по горизонтали, так и по вертикали.
- position: absolute;, top: 50%;, left: 50%;, transform: translate(-50%, -50%);: Установка CSS-свойства position: absolute; и задание значений top: 50%;, left: 50%; и transform: translate(-50%, -50%); для элемента позволяют центрировать его по горизонтали и вертикали относительно родительского элемента.