ЛАБОРАТОРНАЯ РАБОТА 4 1. Что такое флекс-контейнер? Основная идея флексов — гибкое распределение места между элементами, гибкая расстановка, выравнивание, гибкое управление. Ключевое слово — гибкое, что и отражено в названии (flex — англ. гибко). Флекс-контейнер: элемент, к которому применяется свойство display: flex. Вложенные в него элементы подчиняются правилам раскладки флексов. 2. Что такое флекс-элемент? Флекс-элемент: элемент, вложенный во флекс-контейнер. 3. Какие оси есть у флексов и какие свойства меняют их направления? Основная ось: основная направляющая флекс-контейнера, вдоль которой располагаются флекс-элементы. Поперечная (побочная, перпендикулярная) ось: ось, идущая перпендикулярно основной. Позже вы поймёте, для чего она нужна. Начало / конец основной оси: точки в начале и в конце основной оси соответственно. Это пригодится нам для выравнивания флекс-элементов. Начало / конец поперечной оси: точки в начале и в конце поперечной оси соответственно.Размер по основной оси (основной размер): размер флексэлемента вдоль основной оси. Это может быть ширина или высота в зависимости от направления основной оси. Размер по поперечной оси (поперечный размер): размер флекс-элемента вдоль поперечной оси. Это может быть ширина или высота в зависимости от направления поперечной оси. Этот размер всегда перпендикулярен основному размеру. Если основной размер — это ширина, то поперечный размер — это высота, и наоборот. 4. Как выстраиваются флекс-элементы в контейнере? 5. Какие свойства и как они выравнивают флекс-элементы? 6. В чем заключается принцип mobile-first? Одни из самых важных требований в Mobile First разработке это: Показать самое важное содержание в первую очередь Вебсайт должен быть легковесным и оптимизированным, т.к. скорость подключения мобильной сети может быть слабой в зависимости от местонахождения пользователя Вебсайт не должен загружать больше ресурсов, чем требуется пользователю для получения нужной информации, т.к. мобильный Интернет все еще остается дорогим. Дополнительная информация должна грузиться только по требованию пользователя Mobile First это метод разработки оптимизированного вебсайта для различных мобильных устройств с учетом скорости подключения к сети. И важность отображения основного содержания конечному пользователю. 7. Из чего состоит медиа-запрос? 8. Как работает max-width и min-width в медиа-запросе? 9. Какие есть подходы к выбору точек перехода? ЛАБОРАТОРНАЯ РАБОТА 5 1. Какие два способа формирования изображений вы знаете? Растровый и векторный. 2. В чем разница между двумя способами формирования изображений? Растровые изображения состоят из набора точек. Растровый способ изображения графической информации – изображение представлено прямоугольной матрицей точек (пикселей), каждый пиксель имеет свой цвет, выбираемый из заданного набора цветов (палитры). Векторные изображения состоят из отрезков и линий, координаты которых задаются. 3. Какие форматы изображений вы знаете? Растровые - .bmp, .jpeg, .png, .gif. Векторные - .svg, cdr. Также в графических программах есть свои форматы для сохранения (.cdr). 4. Для чего подходит какой-то формат? 5. Когда полезны object-fit и object-position? Object-fit, которое позволит нам сохранить пропорции исходного изображения при подстройке под нужные нам размеры. fill — картинка полностью вписывается в указанные размеры без соблюдения собственных пропорций. Часто это приводит к ощутимым деформациям. contain — картинка подстроится под заданные размеры так, чтобы поместиться внутри целиком без нарушения пропорций. cover — картинка без нарушения пропорций заполнит всю доступную область, обрезая всё ненужное. none — значение по умолчанию, картинка отображается без изменения пропорций или размеров. scale-down — браузер сравнивает размеры картинки со значением none и со значением contain и выбирает одно из этих значений, деформируя картинку соответствующим образом. Сложно объяснить, посмотрите демку Object-position — свойство спозиционирует изображение относительно размера, заданного в разметке. 6. Что сокращает свойство background? Фон элемента описывается в CSS свойством background. Фактически это свойство представляет сокращение набора следующих свойств CSS: background-color: устанавливает цвет фона background-color: #ff0507; background-image: в качестве фона устанавливается изображение background-image: url(dubi.png); Это свойство принимает одно значение: ключевое слово url, после которого в скобках идет путь к файлу изображения. В данном случае имеется в виду, что в одной папке рядом с веб-страницей находится файл dubi.png. 7. Какое свойство надо использовать если требуется только задать цвет фона? background-color - это свойство используется только для установки цвета фона 8. Можно ли добавлять несколько фонов на один элемент? К одному элементу можно добавить сразу несколько фоновых изображений через единственное свойство background. Это позволяет обойтись одним элементом для создания сложного фона или одной картинкой, выводя её несколько раз с различными настройками. 9. Какими параметрами можно управлять у тени? Каждая тень состоит из следующих значений: Два, три или четыре значения размера с единицами измерения: Если задано два значения, то они расшифровываются как смещение по оси x и по оси y. Если задано третье значение, то оно интерпретируется как радиус размытия. Если задано четвёртое значение, то оно отвечает за радиус распространения. Дополнительно (необязательно) можно указать ключевое слово inset, которое превратит тень из внешней во внутреннюю. Чаще всего, но не обязательно, нужно указывать цвет тени в любом доступном формате цвета. inset — если ключевое слово не указано в значении, то тень располагается снаружи элемента. Если указать это ключевое слово, то элемент как будто будет вогнут внутрь и его стенки будут отбрасывать тень внутрь. Смещения по осям x и y — обязательные значения для тени. Могут принимать любые числовые значения, в том числе отрицательные. Значение по умолчанию равно 0 для обеих осей. Если первое значение положительное, то тень будет справа от элемента, если отрицательное — слева. Если второе значение положительное, то тень будет снизу, если отрицательное — сверху. Радиус размытия — опциональное значение, положительное числовое значение с единицами измерения. По умолчанию значение 0, что делает его указание необязательным. Если не указываете его или задаёте 0, то край тени будет резким, без размытия. Чем больше значение, тем шире область размытия и тем светлее сама тень. Радиус распространения — опциональное значение, любое числовое значение с единицами измерения. По умолчанию равно 0, размеры тени совпадают с размерами элемента. Если указано отрицательное значение, то тень будет меньше, если положительное, то тень будет больше. Цвет — вроде бы опциональное, но на самом деле обязательное значение цвета тени. Почему? Если не указывать цвет, то решение остаётся за браузером. Как правило, браузер берёт значение свойства color того элемента, которому задана тень. Но Safari отрисует прозрачную тень. Если вам действительно нужен цвет тени, совпадающий с цветом текста элемента, то это можно указать явно при помощи ключевого слова currentColor. Можно задавать несколько теней для одного элемента, перечисляя их через запятую. 10. Чем отличается линейный и конический градиенты? Линейные градиенты постепенно передают цвета вдоль воображаемой линии. Они генерируются с помощью функции linear-gradient() . Конические градиенты постепенно переходят цвета по кругу. Они генерируются с помощью функции conic-gradient() .
