![](https://s3.amazonaws.com/media-p.slid.es/uploads/130700/images/1809457/EPAM_LOGO_Full_Color_RGB.png)
HTML+CSS Fundamentals 2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/130700/images/1809457/EPAM_LOGO_Full_Color_RGB.png)
HTML Fundamentals
IRAME
Iframe используется для отображения веб-страницы внутри веб-страницы.
Атрибут src определяет URL (адрес) внутренней веб-страницы. Также можно задать ширину и высоту окна со страницей атрибутами width и height.
FORM
- Формы используются для получения информации, вводимой пользователем.
- Элементами форм являются различные типы инпутов:
- чекбоксы
- radio-кнопки
- submit-кнопки и др.
- HTML-форму определяет тег <form>
- Форма сама по себе не видна на странице, отображаются только ее элементы.
ПРИМЕР ФОРМЫ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/130700/images/1809457/EPAM_LOGO_Full_Color_RGB.png)
CSS Fundamentals
Z-INDEX
-
При позиционировании элементов они могут перекрывать друг друга. Свойство z-index определяет, какой элемент должен быть расположен спереди, а какой - сзади.
-
В некоторых случаях можно использовать свойство прозрачности opacity <1, чтобы добиться тех же результатов.
OVERFLOW
-
Свойство overflow отвечает за отображение контента, выходящего за пределы своего контейнера.
СКРЫТИЕ ЭЛЕМЕНТА
![](https://s3.amazonaws.com/media-p.slid.es/uploads/130700/images/1809457/EPAM_LOGO_Full_Color_RGB.png)
CLIP-PATH
CLIP-PATH
Это свойство определяет область элемента, которая должна быть показана. Вырезаемая область определяется или URL, относящимся к SVG, или формой, например, circle().
http://bennettfeely.com/clippy/
MASK
Альтернативный способ вырезать область - использовать mask, но так же не поддерживается IE, Edge and Opera mini (http://caniuse.com/#search=mask)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/130700/images/1809457/EPAM_LOGO_Full_Color_RGB.png)
ПСЕВДО-СЕЛЕКТОРЫ
-
Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Определяются единичным двоеточием (:)
- Псевдоэлементы позволяют задать стиль элементов, не определённых в DOM, а также генерировать содержимое, которого нет в исходном коде текста. Определяются двойным двоеточием (::)
ПСЕВДО-КЛАССЫ И ЭЛЕМЕНТЫ
ПРИМЕР
![](https://s3.amazonaws.com/media-p.slid.es/uploads/130700/images/1809457/EPAM_LOGO_Full_Color_RGB.png)
@ - ПРАВИЛА
@
-
@-правило - это инструкция CSS. Каждая инструкция начинается с @ и содержит одно из ключевых слов.
- Ключевое слово, действует как идентификатор того, что должен делать CSS.
@font-face
Данное правило позволяет загружать на веб-страницу специальные шрифты. Правило указывает браузеру скачать шрифт из указанного источника и затем отобразить его, как определено в CSS.
@import
Это правило обычно указывается в начале файла и указывает на включение внешнего CSS-файла. При этом содержимое внешнего файла вставляется на строку, где указано правило.
@media
Это правило содержит условия для определения стилей для разных экранов. Условия могут содержать размеры экранов, что очень полезно для адаптивной верстки.
@media not|only mediatype and (media feature) {
CSS-Code;
}
@media
Media-типы
all
print
screen
speech
используется для всех девайсов
для принтеров
для смартфонов, мониторов компьютера и т.д.
для смартфонов, мониторов компьютера и т.д.
@media
Media-возможности
aspect-ratio
max-height
max-width
orientation
Соотношение между шириной и высотой области просмотра
Максимальная высота области отображения, например, окна браузера
Максимальная ширина области отображения, например, окна браузера
Ориентация окна просмотра (альбомный или портретный режим)
@media
![](https://s3.amazonaws.com/media-p.slid.es/uploads/130700/images/1809457/EPAM_LOGO_Full_Color_RGB.png)
ЧЕК-ЛИСТ
ЧЕК-ЛИСТ ВЕРСТАЛЬЩИКА
Обязательные пункты
- Соответствие макету
- Кроссбраузерность, кодировка и DOCTYPE
- Валидность, доступность
- Независимость блоков в CSS – минимизация каскада, использование БЭМ
- Корректное отображение сайта
- Семантичность кода (корректная структура заголовков (заголовки H1 .. H6, title), и тд)
- Работоспособность при выключенном JS
-
Дополнительно – поддержка ретины, отсутствие багов при увеличенном шрифте и др.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/130700/images/1809457/EPAM_LOGO_Full_Color_RGB.png)
ЗАДАНИЯ
- Проверьте свои знания по свойству position:
https://htmlacademy.ru/courses/45
- Сделайте несколько картинок / фото в форме круга
УРОВЕНЬ 1
3. Создайте адаптивную разметку в двух вариантах:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659430/images/4298002/cutted_for_tablet.jpg)
tablet
УРОВЕНЬ 2
desktop
![](https://s3.amazonaws.com/media-p.slid.es/uploads/659430/images/4298007/cutted.jpg)
https://webref.ru/layout/advanced-html-css/responsive-web-designелекторы и производительность
ИЗУЧИТЬ
HTML+CSS fundamentals 2
By aneelia
HTML+CSS fundamentals 2
- 377