HTML Fundamentals

IRAME

Iframe используется для отображения веб-страницы внутри веб-страницы.

Атрибут src определяет URL (адрес) внутренней веб-страницы. Также можно задать ширину и высоту окна со страницей атрибутами width и height.

FORM

• Формы используются для получения информации, вводимой пользователем.
   
• Элементами форм являются различные типы инпутов:

- чекбоксы

- radio-кнопки

- submit-кнопки и др.

• HTML-форму определяет тег <form>
   
• Форма сама по себе не видна на странице, отображаются только ее элементы.

ПРИМЕР ФОРМЫ

CSS Fundamentals

Z-INDEX

• При позиционировании элементов они могут перекрывать друг друга. Свойство z-index определяет, какой элемент должен быть расположен спереди, а какой - сзади.

• В некоторых случаях можно использовать свойство прозрачности opacity <1, чтобы добиться тех же результатов.

OVERFLOW

• Свойство overflow отвечает за отображение контента, выходящего за пределы своего контейнера.

СКРЫТИЕ ЭЛЕМЕНТА

CLIP-PATH

CLIP-PATH

Это свойство определяет область элемента, которая должна быть показана. Вырезаемая область определяется или URL, относящимся к SVG, или формой, например, circle().
http://bennettfeely.com/clippy/

MASK

Альтернативный способ вырезать область - использовать mask, но так же не поддерживается IE, Edge and Opera mini (http://caniuse.com/#search=mask)

ПСЕВДО-СЕЛЕКТОРЫ

• Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Определяются единичным двоеточием (:)
   

• Псевдоэлементы позволяют задать стиль элементов, не определённых в DOM, а также генерировать содержимое, которого нет в исходном коде текста. Определяются двойным двоеточием (::)
   

ПСЕВДО-КЛАССЫ И ЭЛЕМЕНТЫ

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

https://habrahabr.ru/company/paysto/blog/256587/

ПРИМЕР

@ - ПРАВИЛА

@

• @-правило - это инструкция CSS. Каждая инструкция начинается с @ и содержит одно из ключевых слов.
   

• Ключевое слово, действует как идентификатор того, что должен делать CSS.

@font-face

Данное правило позволяет загружать на веб-страницу специальные шрифты. Правило указывает браузеру скачать шрифт из указанного источника и затем отобразить его, как определено в CSS.

@import

Это правило обычно указывается в начале файла и указывает на включение внешнего CSS-файла. При этом содержимое внешнего файла вставляется на строку, где указано правило.

@media

Это правило содержит условия для определения стилей для разных экранов. Условия могут содержать размеры экранов, что очень полезно для адаптивной верстки.

@media

Media-типы

используется для всех девайсов

для принтеров

для смартфонов, мониторов компьютера и т.д.

для смартфонов, мониторов компьютера и т.д.

@media

Media-возможности

Соотношение между шириной и высотой области просмотра

Максимальная высота области отображения, например, окна браузера

Максимальная ширина области отображения, например, окна браузера

Ориентация окна просмотра (альбомный или портретный режим)

@media

ЧЕК-ЛИСТ

ЧЕК-ЛИСТ ВЕРСТАЛЬЩИКА

Обязательные пункты

• Соответствие макету
• Кроссбраузерность, кодировка и DOCTYPE
• Валидность, доступность
• Независимость блоков в CSS – минимизация каскада, использование БЭМ
• Корректное отображение сайта
• Семантичность кода (корректная структура заголовков (заголовки H1 .. H6, title), и тд)
• Работоспособность при выключенном JS

• Дополнительно – поддержка ретины, отсутствие багов при увеличенном шрифте и др.

ЗАДАНИЯ

1. Проверьте свои знания по свойству position:
   https://htmlacademy.ru/courses/45
    
2. Сделайте несколько картинок / фото в форме круга

УРОВЕНЬ 1

3. Создайте адаптивную разметку в двух вариантах:

tablet

УРОВЕНЬ 2

desktop

https://webref.ru/layout/advanced-html-css/responsive-web-designелекторы и производительность

ИЗУЧИТЬ