Итак, что такое медиа запросы и зачем они нужны? Медиазапрос – это специальное at-правило, и благодаря ему мы можем написать стили, которые будут работать только при выполнение определенных условий. Например, стили указанные в медиа запросе будут работать только если размер экрана не более 800px.
А как это указать? Все очень просто – сначала пишем at-правило @media, затем в скобках пишем условие “max-width: 800px” т.е. ширина страницы не должна быть больше 800px. И зададим стиль для тега h1 у которого текст будет красного цвета. Теперь при выполнение условия (размер экрана не больше 800px), у всех тегов h1 текст будет красного цвета.
В данном примере вам может показаться, что слово max-width – это свойство, а 800px значение.
На самом деле в at-правиле @media max-width называется медиа-функцией, а 800px – контрольной точкой. А вместе они называются условием.
В at-правиле мы можем указать несколько медиазапросов, разделяя их словом and или запятой.
Если мы указываем слово and, то два этих условия должны выполняться т.е. размер экрана должен быть не меньше 300px, и не больше 800px, в противном случае эти стили не будут работать.
Если мы указываем запятую, то должно выполняться минимум одно из условий. В данном случае размер экрана должен быть или не больше 300px или не меньше 800px. Т.е. стили не будут работать если размер экрана будет от 301px до 799px.
Также помимо and и запятой есть слово not, которое отрицает условие:
Получается, что цвет текста для тега h1 будет красный если максимальная ширина экрана не будет равна 800px (т.е. данный стиль не работает для экранов от 1 до 800px).
Так а какие у нас еще медиа-функции есть кроме min-width и max-width?
На самом деле их много, а учить их все и разбирать не вижу смысла, так как часто пользуются только min-width, max-width, а также медиа функцией orientation, т.е. ориентация экрана. Ключевых точек у данной медиа-функции может быть 2 – это landscape (т.е. горизонтальная ориентация) и portrait (вертикальная ориентация).
Если вы хотите изучить и другие медиа-функции, то я оставлю ссылку где вы сможете подробно их изучить: https://developer.mozilla.org/ru/docs/Web/CSS/@media#media_features
А мы двигаемся дальше.
Также в медиа запросе можно указать тип носителя, для которого будут действовать наши стили. По умолчанию стоит значение all, т.е. данные стили действуют для всех устройств.
Как вы можете видеть на картинке между all и (max-width: 800px) у меня стоит слово and. Это потому, что all тоже является условием, а два условия должно разделять либо слово and или запятая.
Мы можем применить стили, например, только для экранов мониторов, смартфонов и т.д. с помощью типа носителя screen. Помимо screen есть еще print, т.е. данные стили будут действовать для печати.
На самом деле типов носителей раньше было больше (tty, tv, projection, handheld, braille, embossed, aural), но теперь они считаются устаревшими и не рекомендуется их использовать.
Урок 2. Медиазапросы. Практика.
Наша задача сделать с помощью медиазапросов так, чтобы сайт Pyre хорошо выглядел на экранах мобильных устройств. Откроем главную страницу сайта через браузер и включаем эмуляцию устройства. Но здесь мы можем столкнуться с проблемой, что некорректно отображается сайт на эмуляторе (у меня было такое с формой сайта).
Т.е. страница не подстраивается под мобильный вид. Чтобы это исправить, надо в разделе Элементы в панели разработчика в мета-теге vieport изменить значение атрибута initial-scale, например, на 2.0, а затем снова написать 1.0, и проблема должна исчезнуть.
Итак, наша страница выглядит в мобильном представление так:
Мне такое меню не нравится и я хочу добавить для мобильных устройств так называемое бургер-меню, но сделаю это я на следующем уроке, а пока просто удалим это меню для мобильных устройств. Для начала зададим тегу <nav> id=”forDesktop”, т.е. для экранов мониторов.
И с помощью медиазапроса скроем это меню для экранов шириной <= 1000px.
Так, от меню мы в мобильном виде избавились. Теперь меня не устраивает как отображается трейлер игры, он выходит за рамки страницы.
Зададим ему такие стили:
Теперь, как мы можем видеть, трейлер игры отображается корректно:
Но из этого скриншота видно, что Системные требования игры и Рецензии отображаются неверно. Они тоже не помещаются на экране. В этом случае я чуть исправил код, уточнив, что нам нужно свойство не width, а max-width для тега section. Также добавим свойство flex-wrap со значением wrap.
Теперь в медиазапросе укажем стили для тегов с id forTable и reviews:
Готово.
Далее мне не нравится что footer находится слишком далеко от остального контента.
Укажем ему верхнее поле в 1em, а также статическое позиционирование, так как на странице с играми Supergiants Games у него позиционирование fixed, что для мобильного вида нам не нужно.
Открываем следующую страницу, где находятся все игры Supergiant Games.
Здесь нам надо просто разместить картинки по центру. Для этого просто убираем левое и правое поля и располагаем картинки по центру.
Эта страница готова. Меню, как я уже говорил, мы добавим позже. Теперь переходим к странице с формой.
Первым делом удаляем поля сверху и снизу у тега h1 и располагаем его по центру. Далее делаем css-сетку для тега с id=”grid” в одну колонку. Растянем картинку по ширине в 100%. А также добавим тегу form отступы в 0.5em.
Теперь у нас появилась еще одна проблема – из-за того что мы расположили кнопку “Заказать” в теге div с id=”one”, то в мобильном виде она будет располагаться в середине формы.
Выход я придумал такой – это просто сделать еще одну кнопку для мобильного вида в теге div с id=”two” и задать теперь уже двум тегам абзаца, внутри которых находятся кнопки, разные id.
Теперь перед медиазапросом я скрою абзац с id=”MobileButton”, чтобы он не отображался на экранах мониторов.
А уже с мобильном виде сделаем наоборот – отобразим абзац с id=”MobileButton” и скроем абзац с id=”notMobileButton”. И еще для первого тега абзаца в div с id=”two” удалим верхнее поле, чтобы расстояние между checkbox и адресом было небольшим.
Готово.
Урок 3. Бургер-меню. Теория и практика.
А перед тем как создать бургер-меню, мы должны освоить пару небольших тем. И первая тема – это тег <label>.
Тег <label> – это строчный тег, который связывает элементы формы, такие как <input> или <textarea>, с текстом, который находится внутри тега <label>.
Например, допустим, у нас есть такой элемент формы:
Теперь мы хотим связать текст “Вам нравятся игры?” с checkbox так, чтобы если посетитель сайта кликнул по тексту, то появилась галочка на checkbox. Т.е. теперь клик по тексту будет идентичен клику по checkbox. А как это сделать? Надо просто обернуть текст “Вам нравятся игры?” в тег <label> и в атрибуте for указать id того тега, с кем мы хотим его связать (т.е. в нашем случае с id=”games”).
На этом с первой темой все!
Начинаем изучать еще один вид селекторов – это комбинаторы. Как мы уже знаем, есть селектор по тегу, id, классу, псевдоклассу, универсальный селектор, и селектор потомков. На самом деле селектор потомков принадлежит к так называемым селекторам комбинаторам.
Комбинаторы – это такие символы, которые соединяют между собой два других селектора определенным образом. Например, когда мы в селекторе указываем div p {}, то именно пробел между div и p здесь является комбинатором и называется комбинатором потомка, а сама запись div p {} является селектором потомка.
А какие еще есть комбинаторы? Например, есть еще дочерний комбинатор (>). Т.е. если мы видем такую запись: div > p {}, то выберутся только те теги <p>, которые являются прямыми потомками тега <div>. А все остальные теги <p>, которые находятся на более низких уровнях будут пропущены.
Двигаемся дальше. А дальше у нас соседний родственный комбинатор (+). Если мы укажем, например, такой селектор: h1 + p, то это значит, что выберется первый абзац, который сразу идет за тегом <h1>.
И последний комбинатор – это общий родственный комбинатор (~). Если мы напишем так: h1 ~ p, то это означает, что надо выбрать все теги абзаца, которые находятся на одном уровне с h1 и идущими после него.
Теперь приступаем к практике. В файле site.html в теге <header> после <nav id=”forDesktop”> пишем такой html код:
Давайте теперь его разберем. Первым тегом у нас идет тег <div> с id=”wrapper”, т.е. обёртка. Внутри него и будут находится все элементы бургер меню.
Внутри тега div сперва идут теги input и label. Input c type=”checkbox” нужен нам чтобы у меню было два состояния: checked и unchecked (стоит галочка или не стоит). А тег label нужен, чтобы при нажатии в любом месте меню состояния менялось. Тег span находящийся внутри label поможет нам выровнять текст “Меню”.
Далее у нас идут теги div с общим классом burger-line а также собственными классами first, second, third и fourth. Можно было собственные классы сделать как id, но я решил создать их как классы, что тоже можно.
И далее у нас идет выпадающее меню с двумя пунктами: “Все игры Supergiant Games” и “Коллекционное издание”. Я решил что пункт “Купить” не имеет смысла, так как ссылка “Купить” находится недалеко от меню. Так что удалим его и из тега nav c id=”forDesktop”.
Теперь добавим новое меню и на остальные страницы, и также удаляем пункты, которые я посчитал, что нам больше не нужны.
Это файл otherGames.html:
form.html:
Теперь придаем этим тегам стили. Для начала придадим стиль тегу с id=”wrapper”:
Здесь ничего сложного: сперва растягиваем тег на всю ширину экрана; задаем высоту в 3em; устанавливаем цвет фона как черный; позиционирование указываем как relative, чтобы мы могли позиционировать теги внутри относительно этого тега; цвет текста будет белый и находится он будет по центру. Проверяем.
Двигаемся дальше. Теперь зададим стиль для тега label.
Сперва укажем тегу <label> абсолютное позиционирование и разместим его в верхнем левом углу родительского тега. Затем зададим ширину и высоту в 100%, чтобы тег <label> имел такую же ширину и высоту, как и родительский тег. И конце укажем, чтобы текст “Меню” был отображен заглавными буквами.
Также удалим из видимости тег с id=”check-menu”, так как видеть этот чекбокс в меню нам не надо. Получается, что кликая по тегу label, состояние чекбокс будет изменятся, но визуально мы сам чекбокс видеть не будем.
Проверяем.
Так, у нас для тега nav отображается логотип Pyre, так как мы указали его в качестве фонового изображения для всех тегов nav. Исправим этот момент, пусть логотип отображается только для меню с id=”forDesktop”. Находим этот стиль и указываем в селекторе id.
Все, логотип исчез.
Далее я хочу добавить верхний отступ для строчного тега <span>, где находится текст “Меню”, но чтобы это сделать, нам надо превратить его в блочный.
Теперь настраиваем так называемую бургер-кнопку.
Также указываем абсолютное позиционирование; задаем ширину и высоту, чтобы эти теги имели вид тонких линий; также указываем им белый цвет фона; и в конце указываем сокращенное свойство transition, чтобы настроить плавный переход для всех свойств, которые будут меняться (это нам в будущем пригодится).
Эти линии для бургер-кнопки расположены в одном месте, и мы просто в итоге видим одну линию. Расположим их в разных местах.
Вы можете спросить, а зачем мы две линии с классами .second и .third расположили в одном месте. Дело в том что дальше так легче их будет превратить в крестик, когда мы нажмем на меню.
А чтобы это сделать мы воспользуемся псевдоклассом :checked для чекбокс. Т.е. стиль для для этого псевдокласса будет срабатывать всегда, когда наш чекбокс находится в состоянии checked (т.е. когда стоит галочка).
Сперва помощью родственного комбинатора ищем теги с классами .first и .fourth которые находятся на одном уровне, что и тег с id=”check-menu”, и скрываем их. А дальше ищем теги с классами .second и .third и указываем этим линиям, которые находятся в одном месте и разворачиваем их так, чтобы получился крестик.
Теперь при клике на это меню, у нас вместо трех линий появится крестик.
Пришла очередь задать стили тегу nav.
Задаем тегу nav абсолютное позиционирование; делаем ширину в 100%; размещаем его левом нижнем углу в 100%; с помощью свойства transform перемещаем этот тег вниз на высоту этого тега, т.е. теперь он будет находится под тегом с id=”wrapper”; на всякий укажу overflow: hidden, чтобы не было схлопывания полей с внутренними тегами <a>; далее также как и для тега <label> укажу плавный переход, и размещу его на слой выше с помощью свойства z-index. Дело в том что все теги на веб-странице, как и объекты в Photoshop находятся на слоях, и мы можем изменять расположение каждого тега задавая на каком слое он будет находится. В данном случае я располагаю тег nav над всеми остальными тегами, так как она будет пересекаться с картинками на странице otherGames.html и с тегом h1 на страницу form.html. Проверяем.
Теперь задаем стили тегам <a>.
Превращаем теги <a> в блочные элементы; задаем ширину им в 100%; указываем отступы сверху и снизу в .7em, а справа и слева отступов не будет; цвет текста будет белый; создаем верхнюю границу и задаем такой черно-серый цвет фона. Проверяем.
Теперь создадим анимацию выпадающего меню. Для начала мы должны скрыть тег <nav>. Только это мы сделаем не с помощью display=”none”, а с помощью max-width и font-size, чтобы сделать появление меню более плавным.
Теперь укажем чтобы при клике по меню тег <nav> появился.
Скрываем все наше бургер-меню на экранах мониторов и отображаем на экранах мобильных устройств, а еще изменяем цвет текста при клике.
Так остается разместить тег <label> тоже выше остальных, так как при клике на бургер-кнопку меню не будет реагировать, а так мы получается кликаем на тег <label>, а не на бургер меню.
Теперь корректируем страницы:
на странице otherGames.html в мобильном отображении удаляем верхнее поле;
и изменим стиль для тега h1 на странице form.html на мобильных устройствах:
Готово!:)
Урок 4. Псевдоэлементы.
Итак заключительный урок! Нам осталось рассмотреть последний вид селекторов – это псевдоэлементы. Это будет чисто теоретический урок.
Псевдоэлементы могут с помощью CSS обратиться к содержимому или части содержимого объекта, а также добавить к объекту новые элементы. Давайте, рассмотрим примеры и сразу станет понятнее.
Начнем мы с псевдоэлементов ::before и ::after. Как вы могли заметить псевдоэлемент отличается от псевдокласса двойным двоеточием, но это необязательно, так как при разработке псевдоэлементов изначально использовалось одно двоеточие, и теперь браузеры поддерживают и тот и тот вариант, но принято все же писать двойное двоеточие.
Итак, представим что у нас есть абзац с таким текстом.
::after позволяет добавить к концу содержимого тега к которому он применяется псевдоэлемент (по умолчанию, он является строчным). Что именно мы хотим добавить необходимо написать в значении свойства content. И дальше мы можем его стилизовать.
Псевдоэлемент ::before делает все тоже самое, только он добавляет псевдоэлемент в начале содержимого тега.
Теперь рассмотрим и другие псевдоэлементы. Например, есть такой псевдоэлемент как ::first-letter – данный псевдоэлемент стилизует первую букву в содержимом тега.
Следующий псевдоэлемент – это ::first-line. Как вы могли догадаться, данный псевдоэлемент стилизует первую строку содержимого тега.
И последний элемент, что мы рассмотрим – это ::selection. Данный псевдоэлемент влияет на текст, когда мы его выделяем.
На этом урок заканчивается, это не все псевдоэлементы что существуют, но мы рассмотрели самые часто используемые. Про остальные вы можете больше узнать здесь – Псевдоклассы, псевдоэлементы – Изучение веб-разработки | MDN (mozilla.org)
Трейлер
Всем привет!
Меня зовут Руслан, и я рад приветствовать вас на этом курсе по CSS.
Данный курс является логическим продолжением моего бесплатного курса, который называется «Основы HTML: теория, практика и домашние задания». Если вы уже знаете язык HTML, то его проходить необязательно. Все необходимые файлы будут доступны.
Итак, в конце курса по HTML мы сделали такой вот сайт, а в конце этого курса данный сайт станет таким. Мы изучим все основные аспекты языка CSS, включая анимацию, перспективу, настроим мобильный вид, создадим так называемое бургер-меню только используя HTML и CSS, без участия JavaScript.
Нас ждет незабываемое путешествие в удивительный мир CSS. Вперед друзья!