50 вопросов по CSS. Собеседование на HTML верстальщика. Проверь свои знания!

Транскрипция видео:

• привет друзья небольшое вступление в этом видео мы будем проверять насколько хорошо ты знаешь css и насколько же хорошо ты все-таки wear стоишь я подготовил для тебя 50 вопросов с ответами но перед тем как ты услышишь мой ответ попробую ответить на него сам и самое главное условие я старался и готовил для тебя это видео от и потрать пожалуйста секунду на лайк и комментарий тебе не сложно а мне это помогает и так начнём свойства дисплей основные значения и как они работают и дисплей существует большое количество значений но основные

  00:00:03 - 00:01:15

• из них вы видите сейчас на экране это нам блок inline inline блок ли x y рассмотрим на примере я сделал несколько блоков div у каждого из класса во имя соответствующие значению дисплей соответственно онлайн и но и блок и так далее здесь есть небольшие стиле и как видите для айтемов каждого блока заданы соответствующий стиля и так онлайн элементы во первых расположены в одну строку и их размер зависит от содержимого блок размер определяется размерами самого блока заданными в стилях как видите 200 на 200 но сам блок

  00:00:40 - 00:01:53

• занимает всю свободную ширину экрана и все последующие блоки переносятся на новую строку inline блок элементы опять же расположены в одну строку но уже мы можем задавать ему размер как видите размер блоков соответствует тому что мы указали в стилях и остается flex & greet агрить мы не будем говорить поскольку это очень большая тема для разговоров но скажу пару слов proflex основная концепция в том что мы можем задавать очень гибкие лай out и управлять направлением одним свойством центрировать блоки как по вертикали так

  00:01:16 - 00:02:18

• и по горизонтали изменять порядок элементов и в целом делать очень гибкие отзывчивые макеты keyframe для чего нужно и как использовать и так есть вот такой блок для него написаны вот такие вот стиле и выглядит это вот так и сейчас мы на примере посмотрим для чего нужен клей frames эй frames определяет ключевые кадры по которым будет работать анимация указывается начальная точка что будет происходить в самом начале анимации и затем конечно и так же эти точки можно указывать в процентах и можно на каждом

  00:01:47 - 00:02:52

• этапе создавать отдельный ключевой кадр делаем анимацию которая будет работать всего на двух ключевых кадров и она будет вращать по оси x наш квадратик и для того чтобы анимация работала по этим ключевым кадром используем ключевое слово они мишин и затем указываем название этой анимации и как видите теперь квадрат вращается по оси x какие бывают значению свойства позиция расскажите как ведет себя каждое свойство позиция может принимать следующие значения это static при у этих абсолют фиксит листики причем static

  00:02:20 - 00:03:28

• является дефолтным значением рассмотрим каждый из них на примере есть три блока с заданными классовыми именами и для них написаны простейший стиль для того чтобы эти блоки как-то отличались выглядит это вот так на данный момент элементы никак не спозиционировали давайте первому из них зададим свойства static и подвинем влево на сто пикселей как видите элемент никуда не сдвинулся потому что static по умолчанию является низ позиционирован им поменяю свойства на рейтер элемент сдвигается относительно своего положения

  00:02:53 - 00:03:52

• на сто пикселей влево также можно двигать вниз вправо вверх как угодно поскольку relay тиф подразумевает что элемент уже от позиционирован и мы можем двигать его относительно его изначального положения сделаем то же самое для второго блока он сдвигается и все у нас нормально но попробуем заменить это значение на абсолют и видим как третий блок занимает место 2 это происходит по той причине что элемент из позиционирована как абсолют пропадают из общего потока и для остальных элементов этого элемента как будто бы не

  00:03:23 - 00:04:27

• существует попробуем top' и left' сделать по нулям и элемент уходит в левый верхний угол так происходит потому что абсолют с позиционирован и элементы позиционируются относительно ближайшего с позиционирована во родителя но поскольку родителям для этого блока является body to элемент позиционируется относительно самой страницы попробуем второй блок засунуть внутрь 1 который уже является рила и tiff с позиционирован им и посмотрим что у нас получилось обновим страницу и как видите второй блок теперь позиционируется

  00:03:55 - 00:05:01

• относительно первого теперь поговорим про позицию фиксит есть блок и какой-то текст для блока задали минимальные стиле выглядит на странице это все вот так попробую спозиционировать этот блок как фиксит и посмотрим что у нас получилось опять же элемент пропадает из общего потока и он закреплен на экране и прокручивается вместе со страницей и остается позициям стики у нас есть два блока и внутри первого лежит один элемент для них написано вот такие базовые стили просто чтобы эти блоки по цветам как-то отличались выглядит это

  00:04:28 - 00:05:30

• вот так черный блок лежит внутри бежевого и розовый сам по себе теперь давайте для вот этого чёрного блока сделаем позицию стики и также прилепим его к верхней части экрана обновим страницу и как видите теперь блок цепляется опять же как ifixit к верхнему краю экрана но он прикреплен только в рамках одного блока в данном случае бежевого как бы вы реализовали кастомный checkbox есть самый обычный checkbox нажимаем на него и выглядит это вот так для него уже написаны некоторые стили задний фон должен быть черным а радиус

  00:04:59 - 00:06:09

• 50 процентов но у нас фон не черный и радиус точно не 50 процентов и чтобы стилизовать его создается лейбл указывается айди самого checkbox а затем для этого лейбла пишутся стиле которыми должен обладать сам checkbox поэтому вот эти стили переносим а сам input мы скрываем его отображать не надо сделаем opacity 0 также можно сделать дисплей нан теперь нам как то необходимо отслеживать нажать checkbox или нет для того чтобы менять стиль и для этого воспользуемся псевдо классом чек и для лейбла идущего после input а

  00:05:36 - 00:06:41

• будем менять цвет заднего фона на красных посмотрим что у нас из этого получилось вот такой вот чек бокс который реагирует на нажатие меняет цвет как отцентровать блог по горизонтали и по вертикали и так есть вот такой вот красный блок его надо поместить середину страницы для тега body заданный ширина и высота и самый простой способ отцентровать элемент это контейнеру сделать дисплей flex и свойства justify контент и line no items установить значение центр что делает бог сайзинг border бокс значение ширины и высоты у блока

  00:06:09 - 00:07:19

• включают себя также размер границ и внутренних отступов если мы хотим чтобы рамка и внутренний отступ и были частью размера элемента мы указываем свойство бокс айзен со значением border бокс посмотрим на примере есть блок для которого заданы вот такие стили и padding равняется 20 выглядит этот блок вот так если посмотрим то увидим что размер блока 140 на 140 пикселей хотя все с мы указывали 100 на 100 с каждой стороны добавилось еще по 20 пикселей внутренних отступов если мы установим значение border бокс то элемент будет

  00:06:44 - 00:07:51

• занимать исходные 100 пикселей и внутренние отступы будут частью этой размерности как обрабатывает веб-страницу браузер существует несколько этапов на первом этапе формируется дом дерево с того html который мы получили затем загружаются стиле и на основании дом исчез с формируется некая дерево рендеринга для каждого элемента рассчитывается положение на странице и она отрисовывается в браузере что такое онлайн стиле и какое они имеют приоритет у нас есть тэг h1 у него установлена едет и цвет для текста установлен в

  00:07:18 - 00:08:32

• оранжевый онлайн стиле это стили которые пишутся напрямую в html задаются они с помощью атрибута style и через точку запятой перечисляются попробуем установить цвет черный и посмотрим что у нас получится цвет стал чёрным и таким образом inline стиле имеют самый высокий приоритет чем отличается border от outline и так имеется вот такой блок и под ним некий текст попробуем сделать рамку для этого блока рамку сделаем потолще пиксели в 50 чтобы разница была более очевидна и цвет сделаем допустим красный

  00:07:54 - 00:09:05

• чтоб четко отделялась рамка заданная с помощью border является частью элемента в этом мы можем убедиться если посмотрим на элемент через инспектор попробуем заменить border на outline и посмотрим что у нас получилось как видите рамка не является частью самого элемента она перекрыла текст если посмотрим через инспектор видим что элемент никак не изменился то есть outline это просто визуальная составляющая которая никак не влияет на блочную модель самого элемента для outline а также не действуют скругления адаптивная верстка методы с

  00:08:30 - 00:09:37

• помощью которых можно сделать страницу адаптивной существует множество способ но основные из них указаны на слайде это резиновая верстка использование flex & greet layout of и использовании медиа запросов под разные размеры устройств что такое бэм бэм это некоторой методология которая расшифровывается как блок элемент и модификатор которая по ганди рует компонентный подход к веб-разработки в его основе лежит принцип разделения интерфейса на независимые блоки он позволяет легко и быстро разрабатывать интерфейсы любой сложности

  00:09:04 - 00:10:12

• и повторно перри использовать существующий код избегая копипаста как при нажатии на ссылку открывает страницу в новом окне для этого у ссылки необходимо указать атрибут таргет со значением нижнее подчёркивание бланк посмотрим на результат если мы нажмём посылки откроется новая вкладка в чем различия между строчными и блочными элементами здесь я подробно останавливаться не буду так как похоже вопрос мы уже рассматривали но строчные элементы располагаются в одну строку облаченный занимают все свободное

  00:09:38 - 00:10:48

• пространство разница между мэргэн ebay inc ну здесь все просто поединка это внешние отступы virgin это внутренние отступы что такое семантические элементы и для чего они нужны html5 были введены так называемые семантические теги которые определяют конкретные части страницы правильное использование их улучшает все оптимизацию что позволяет поисковым роботам лучше индексировать страницу свойства overflow что делает и когда использовать есть вот такой большой блок с текстом который выходит за пределы страниц

  00:10:12 - 00:11:22

• выглядит это все вот так и допустим мы хотим эту прокрутку убрать тогда мы в родительском блоке указываем свойства overflow со значением хайден посмотрим что у нас получилось откроем браузер обновим страницу и как видите полоса прокрутки пропала именно в этом случае и используется overflow ведь vw при указании размеров они являются относительными единицами измерения и вне зависимости от размеров родительского блока всегда высчитываются относительно окна браузера 1 вещь это один процент от высоты окна

  00:10:47 - 00:11:57

• браузера и один vw это один процент от ширины окна браузера так визуально изменить курсор есть вот такой блок и при направлении на него обычный курсор попробуем его изменить для этого необходимо переопределить свойства курсор и указать один из возможных вариантов пример pointer и теперь курсор выглядит вот так так же можно выбрать и другой вариант например гриб теперь курсор выглядит так как изменить направление оси flexx бокс контейнера сейчас элементы располагаются в строку и для того чтобы сделать их в колонку

  00:11:22 - 00:12:27

• необходимо использовать свойство которое называется flex direction и установить значения калом теперь элементы располагаются в колонку из чего строится размер элемента размер элемента строится из ширины и высоты содержимого внутри них отступов рамки и внешних отступов за что отвечает z-index свойство z-index css управляет вертикальным порядком расположения элементов которые перекрываются z-index влияет только на позиционирован и элементы рассмотрим на примере есть два блока и вот такие вот css стили для них оба элементы являются

  00:11:55 - 00:13:09

• абсолют позиционирован ими и на странице выглядит это вот так секунд блок конечно же находится выше чем first blog но если мы зададим значения z-index у first больше чем единица он станет выше чем 2 и соответственно если у второго сделаем z-index больше чем у первого он будет располагаться выше какие виды input of бывают таблица со всеми типами нг футов представлена на экране можете поставить на паузу и ознакомиться за что отвечает justify контент и оnline интенсив лекс бокс контейнера есть два

  00:12:32 - 00:13:36

• вот таких блоков которые находятся внутри flexx бокс контейнера в данном случае контейнером является body поскольку он уже является flex мы можем использовать эти свойства попробуем установить 6 фай контент и увидим что это свойство влияет на расположение элементов относительно главной оси x box контейнера напомню что это ось задается свойствам flex direction по умолчанию главной осью является ось x а для управления расположением на второстепенной оси используется свойство line айтюнс как видите в данном случае выравнивание

  00:13:05 - 00:14:12

• происходит по оси y как убрать маркеру списка по умолчанию список помечается вот такими вот точками и если нас эти точки не устраивают мы можем воспользоваться свойством list style и поменять допустим убрать их вообще или же использовать какое-то другое значение что вы знаете о приоритете селекторов это достаточно обширная тема для объяснения но сегава и кратко каждый селектор имеет вес и наибольший вес имеют онлайн стиле они перекрывают все остальные далее идет селектора и d-класса и тега который имеет наименьший вес

  00:13:38 - 00:14:48

• что такое псевдоклассы и какие вы используете чаще всего псевдоклассы предназначены для описания характеристик элементов такое как динамическое состояние например нажатая ссылка или язык кодировки абзац на каком-то языке они не отображаются в исходном документе и не принадлежат дереву документа дом самый частоиспользуемые то hover фокус check dis а apple id и другие какие бывают значения у background says кратко о каждом и так у нас есть пустой блок div ему я установил как задний фон какое-то случайное изображение выглядит сейчас

  00:14:13 - 00:15:24

• это вот так половина изображения была обрезана для того чтобы это поправить и используется свойство бэкграунд says значение ковер изображение сохранять свои пропорции но изменяется в размере чтобы уместиться в этот блок но как видеть часть изображения все равно не попало потому что она имеет прямоугольную форму а блок у нас квадратный значение контент свою очередь ужинает картинку до такой степени пока она не вместится в блог для того чтобы не было повторений необходимо добавить свойство но у рипит и выглядеть это

  00:14:49 - 00:15:47

• будет вот так какие псевдо-элементы вы знаете и используете псевдо селекторы позволяют стилизовать определенную часть выбранного элемента например псевдо селектор first letter может изменять заглавную букву каждого абзаца рассмотрим на примере сейчас есть вот такой небольшой текстик попробуем изменить первую букву с помощью тега селектор а для этого указываем селектор 2 : и псевдо селектор данном случае first letter например увеличим букву в размере и сделаем цвет красный и посмотрим что получилось как видите только первая

  00:15:17 - 00:16:28

• буква абзаца приняла эти стили если продублируем абзаце то для каждого из них будет применен этот псевдо селектор лекс бог свойства отвечающая за перенос элементов на новую строку при переполнении и так на странице есть некоторое количество каких-то элементов для них задано ширина высота некоторые отступы контейнер является флексорным блоки умещаются в одну строку но уживаются в размере для того чтобы они переносились на новую строку используется свойство flex фрейд теперь эти блоки не вмещаются они переносятся

  00:15:53 - 00:16:54

• на новую строку попробуем добавить еще несколько и вот так вот это выглядит ключевое слово им патент для чего используются она используется для того чтобы повысить приоритет селектора и переопределить какие-то стиля разница между скрип-скрип to sing и скрипт defer браузер загружает и отображает html постепенно особенно это заметно при медленном интернет-соединении браузер не ждет пока страница загрузится целиком а показывают только ту часть который успел загрузить если браузер видит тег скрипт то он по стандарту обязан сначала

  00:16:24 - 00:17:29

• выполнить его поскольку подгрузка происходит сверху вниз и только потом показать оставшуюся часть страницы то есть загрузка получается синхронной если скрипт внешней то пока браузер не выполнит его он не покажет часть страницы под ним при указании атрибута async и differ браузер начинает подгружать скрипты в асинхронном режиме и не тормозит отображение html но differ используют обычно в том случае когда важен порядок загрузки скриптов то есть скрипты будут загружаться синхронно но последовательно один за

  00:16:56 - 00:17:58

• другим и второе отличие defer срабатывает только тогда когда весь html будет обработан браузером то есть а sing начинает подгружать сразу же от эфир только после загрузки html как увеличить в размере при наведении элемент не сдвигая при этом соседние есть две рядом стоящие кнопки выглядят они вот так и сейчас попробуем одну из них увеличивать в размере для того чтобы изменение в размере происходили плавно используем свойства транзишен укажем время одну секунду и она будет действовать для всех свойств теперь воспользуемся

  00:17:27 - 00:18:35

• псевдо-класса mpower для того чтобы изменять кнопку в размере при наведении но как видите при изменении размера первой кнопке 2 смещается такой подход нам не подходит поэтому воспользуемся свойством transform и функцией скейл и будем увеличивать кнопку два раза как видите теперь она изменяется в размере при этом никак не затрагиваю вторую кнопку кратко амедео запросах под мобильные приложения посмотрим на примере есть какой-то текст выглядит это вот так напишем медиазапрос пишется знак собаки затем медиа и чтобы

  00:18:01 - 00:19:11

• этот запрос отрабатывал как раз на устройствах с разным размером дисплея указывается свойства screen and и затем скобках свойства при котором как раз этот запрос будет обрабатывать нашем случае максимальная ширина при которой этот запрос будет отрабатывать 400 пикселей попробую менять цвет откроем инструменты разработчика и как только мы доходим до четырех пикселей в ширину цвет меняется какое свойство используется для перевода текста в заглавные или же строчные буквы сейчас текст написан строчными буквами попробуем css

  00:18:36 - 00:19:42

• свойства мы то изменить для этого предназначена свойства текст transform и в качестве значения установим upper кейс обновим и теперь текст написан заглавными буквами для чего рекомендуется использовать атрибуты дейта они предназначены для хранения каких-либо значений например для создания всплывающих подсказок без применения одного скрипта правила создания дейта атрибутов следующие пишем ключевое слово дейта затем дефис и название этого атрибута в нашем случае дельта descripcion можно писать абсолютно любое теперь попробуем сделать

  00:19:09 - 00:20:14

• так чтобы при наведении на блок снизу выпадало подсказка без применения java скрипта для этого воспользуемся псевдоклассов и псевдо селектором over и автор соответственно их значение контент с помощью функции от r поместьем значения как раз да это атрибута description соответственно с позиционируем абсолютно и сделаем отступ сверху и какой-нибудь цвет заднего фона чтобы было более заметно обновим страницу и теперь при наведении на блок выпадает вот такая вот под оскар без применения java script как

  00:19:41 - 00:20:42

• стилизовать input для загрузки файлов здесь ситуация похожа с чек боксом сделаем input с типом файл откроем браузер и посмотрим как он выглядит по дефолту совсем не очень попробуем это исправить здесь опять же необходимо будет воспользоваться лейблом поэтому укажем айди и сделаем weeble и напишем что-нибудь внутри абсолютно любой текст теперь перейдем к стилям саблей был мы стерилизуем так как бы мы хотели чтобы выглядел input сделаем внутренние отступы и какую-нибудь пунктирную рамку а самый путь теперь вскроем с помощью свойства

  00:20:12 - 00:21:22

• дисплей нан посмотрим что получилось теперь input выглядит вот так что такое селектор атрибутов и так есть два input а с разными типами на примере посмотрим что такое селектор атрибутов пишется название тега и затем в квадратных скобках значения которое принимает тот или иной атрибут нашем случае стилизуем inputs типом password как видите первый input покраснел а второй нет как изменить стиль и для кнопок с атрибутом decided этот вопрос для закрепления предыдущего здесь как раз необходимо воспользоваться

  00:20:46 - 00:21:53

• селектором атрибутов пишем батон и в квадратных скобках decided и задаем какие-либо стиле например сделаем внутренние отступы по 20 пикселей и изменим backgroundcolor как изменить стиль и для элемента span который следует прямо за элементом input и так есть input и какой-то span который идет после него для этого необходимо воспользоваться соседнем селектором плюс то есть пишется input + esp on таким образом стиле применятся только для спа на который идет после этого input а попробуем добавить какие-то стили и

  00:21:19 - 00:22:25

• убедимся в этом с помощью какого селектора можно добавить стиль на каждый элемент на странице и так на странице есть несколько различных элементов spawn дефарж 1 и для стилизации всех сразу используется универсальный селектор звездочка заменим цвет шрифта обновим страницу как видите применилась для всех какое свойство позволяет вам спрятать элемент но сохранить занимаемое им пространство на странице и так есть вот такой квадратик который с двух сторон оптика это текстом попробуем его скрыть для того чтобы

  00:21:53 - 00:22:55

• скрыть элемент но сохранить занимаемое пространство обычно используют либо свойства opacity со значением 0 то есть элемент становится просто прозрачным невидимым или же свойство visibility которая напрямую уже говорит нам о видимости того или иного элемента установим значение хайден элемент также не будет видно также элемент можно скрыть с помощью дисплей со значением нам но в таком случае элемент полностью пропадает со страницы как сделать тень падающие от блока и так есть блок с минимальными стилями ширина

  00:22:24 - 00:23:29

• высота и цвет заднего фона и для того чтобы от него падала тень используются свойства бокс shadow 2 пикселя смещение по оси x и y четыре пикселя размытие тени и цвета и и серы тень едва видно поэтому увеличим немного смещения и сделаем ее цвет чёрным чтобы было более заметная вернемся на страницу обновим и вот такая вот тень получилось попробуем увеличить размытие и вот такой вот эффект получился возвращаясь к предыдущему вопросу как сделать тень которая падает от текста для этого используется похожие свойства

  00:22:56 - 00:24:05

• которое называется текст shadow также указываются смещение размытия и цвет тени посмотрим что получилось вот такая вот тень попробуем сделать например красный и текст как будто бы светится необходимо повернуть блок на 45 градусов как бывает а реализовали для этого опять же необходимо воспользоваться свойством transform с помощью которого мы меняли уже размер элемента но уже воспользоваться функцией rotate они скейл как видите по иксу какое-либо вращение незаметно попробуем сделать по игреку и должен получится точно такой же

  00:23:30 - 00:24:36

• результат эти вращения незаметны поскольку страница является двухмерной а вот по оси z это вращение вполне заметна таким образом мы ответили на вопрос возвращаясь к предыдущему вопросу как сделать вращение по осям x и y заметными как я уже сказал страница является двухмерной и у нее нет некой глубины для этого необходимо указать свойства перспектив и затем значение в пикселях то есть мы как бы отдаляемся от нашей страницей будем смотреть на нее со стороны появляется некая 3d снасть для того чтобы вращение были более

  00:24:04 - 00:25:09

• заметными сделаем чтобы они происходили при наведении на блок опять же пользуемся функции rotate и вращаем на 45 градусов и теперь появилась некая глубина мы чувствуем что элемент действительно поворачивается попробуем по оси y и получается вот такой результат можно попробовать также и в отрицательную сторону так вот это выглядит как сделать анимацию бесконечно повторяющиеся для этого необходимо указать свойства они мишин duration со значением инфинит для чего используются препроцессоры препроцессор это некоторая

  00:24:36 - 00:25:45

• настройка на tss которая расширяет возможности стандартного css помощи новых синтаксических конструкций такие как переменные вложенность селекторов миксины то есть перри используемые участки и многое другое и как раз вопрос что такое миксины в при процессорах если выражаться простым языком то это некий кусочек с какими-то сессии свойствами которые потом можно переиспользовать каких-то других селекторах что такое bootstrap это некий графический фреймворк который используется для быстрой разработке адаптивных и

  00:25:10 - 00:26:16

• отзывчивых интерфейсов включает себя 12 колонн ночную сетку для того чтобы делать адаптивные сайты быстро и набор готовых инструментов по типу модальных окон laughter of всяких кнопок крутилок и так далее и последний вопрос друзья вы не забыли поставить лайк под это видео и написать комментарий если забыли прям щас же это сделаете и на этом с видео мы заканчиваем надеюсь вам было полезно а я благодарю вас за просмотр и жду в следующих уроках

  00:25:43 - 00:26:43