Теперь давайте рассмотри 3 свойства CSS, которые очень важны для блочной модели документа:
- многоцелевое свойство, которое определяет, как элемент должен быть показан в документе (значение по умолчанию - inline).
- элемент показывается как блочный. Применение этого значения для строчных элементов, например
, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого. inline – элемент отображается как строчный. Использование блочных элементов, таких как и
, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block - это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде
). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.
inline-flex - элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.
flex – элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
list-item - элемент выводится как блочный и добавляется маркер списка.
none - временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.
Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
run-in - устанавливает элемент как блочный или строчный в зависимости от контекста. position - устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице (значение по умолчанию - static). absolute - абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб- странице словно абсолютно позиционированного элемента и нет. Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано как relative, то отсчёт координат ведётся от края родительского элемента. fixed - фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. relative
float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент (значение по умолчанию - none). left - выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне. right - выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне. none - обтекание элемента не задаётся. Практическая работа №10.2
Проверка знаний
Тема 11: Позиционирование top - определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края. В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя. right - определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента. bottom - устанавливает положение нижнего края содержимого элемента без учёта толщины рамок и отступов. Отсчёт координат зависит от свойства position, оно обычно принимает значение relative (относительное положение) или absolute left - определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчёт координат зависит от значения свойства position.
перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z- index . Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative. Практическая работа №11.1
vertical-align - выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы (значение по умолчанию baseline). baseline - выравнивает базовую линию блока по базовой линии родителя. bottom - выравнивает низ блока по нижней части строки. middle - выравнивает вертикальную среднюю точку блока по базовой линии родительского блока плюс половина высоты буквы «x». sub - опускает базовую линию блока вниз для создания нижнего индекса. Не оказывает влияние на размер текста. super - поднимает базовую линию блока вверх для создания верхнего индекса. Не оказывает влияние на размер текста. text-bottom - нижняя граница элемента выравнивается по нижнему краю содержимого родителя. text-top - верхняя граница элемента выравнивается по верхнему краю содержимого родителя. top - выравнивает верх блока по верхней части строки. margin - устанавливает величину отступа от каждого края элемента. padding - устанавливает значение полей вокруг содержимого элемента. overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Практическая работа №11.2
Проверка знаний
Итоговая практическая работа №3
Тема 12: Оформление изображений box-shadow - добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закруглёнными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере. filter предназначено для применения художественных эффектов к элементам. Обычно используется для изображений, чтобы размыть их, увеличить контрастность, преобразовать в чёрно-белую картинку и др. Проверка знаний
Тема 13: Оформление форм :default - применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов. Например, у нас может быть две кнопки для отправки данных формы на сервер. Одна из этих кнопок задана по умолчанию, мы можем изменить её стиль через :default. :disabled - используется для применения стиля к заблокированным элементам форм. Такие элементы не могут получить фокус, быть нажатыми или активированы, в текстовых полях нельзя набирать текст. :enabled - используется для применения стиля к доступным (не заблокированным) элементам форм. По умолчанию, все элементы форм являются доступными, если в коде HTML к ним не добавляется атрибут disabled. :read-only - Применяется к полям формы, у которых задан атрибут readonly. Практическая работа №13.1
:in-range - применяется к элементам форм, у которых введённое пользователем значение находится в заранее заданном диапазоне. Сам диапазон устанавливается с помощью атрибутов min и max, они, соответственно, задают минимальное и максимальное значение. :out-of-range - применяется к полям форм, у которых введённое пользователем значение выходит из заданного диапазона. Псевдокласс работает только для тех полей, где пользователь может сам ввести значение, даже несмотря на ограничения наложенные атрибутами min и max. :required - применяет стилевые правила к элементу :optional - применяет стилевые правила к элементу :checked - применяется к элементам интерфейса, таким как переключатели :valid - применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email" корректный адрес электронной почты. :invalid - применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты.
Практическая работа №13.2
Проверка знаний
Тема 14: Создание меню Практическая работа №15.1 Практическая работа №15.2 Практическая работа №15.3 Проверка знаний
Тема 15: Анимация и плавные переходы Практическая работа №16.1 Практическая работа №16.2 Практическая работа №16.3 Проверка знаний
Тема 16: Адаптивная вёрстка Практическая работа №17.1 Практическая работа №17.2 Практическая работа №17.3 Проверка знаний Итоговая практическая работа №4