Web-технологии

Кейно Павел Петрович

pavel@mati.ru

Лекция 5

Блочная верстка

Кроссбраузерная верстка

Хак — это набор приемов, когда определённому браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

Основной недостаток хаков - снижается универсальность кода.

Слои

В HTML4, HTML5 и XHTML слой — это элемент веб-страницы, созданный с помощью тега <div>, к которому применяется стилевое оформление.

Разделение содержимого и оформления

Код HTML должен содержать только теги разметки и теги логического форматирования, а любое оформление выносится за пределы кода в стили. Такой подход позволяет независимо управлять видом элементов страницы и ее содержимым.

Благодаря этому над сайтом может работать несколько человек, при этом каждый выполняет свою функцию самостоятельно от других. Дизайнер, верстальщик и программист работают над своими задачами автономно, снижая время на разработку сайта.

Использование тега <div>

Тег <div> – это основа блочной вёрстки. Данный элемент выполняет роль фундамента, общий вид которого можно задавать широким набором свойств.

HTML5

В HTML5 добавлено несколько новых тегов разметки для обозначения разных типовых блоков страницы. К примеру, <header> и <footer> используются для создания «шапки» и «подвала», <nav> для навигации, <aside> для боковой панели. Включение в спецификацию HTML подобных элементов призвано снизить доминирование тега <div> и придать больше смысла разметке.

Свойства, формирующие блочный элемент

Содержимое (контент)
Поля (padding)
Границы (border)
Отступы (margin)

Вложенность свойств

Вложенность свойств

Поля (свойство padding)

Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

Поля

Поле сверху (padding-top)

Устанавливает значение поля от верхнего края содержимого элемента.

Синтаксис:

{padding-top: значение | inherit
Поле сверху

Поле справа (padding-right)

Устанавливает значение поля от правого края содержимого элемента.

Синтаксис:

{padding-right: значение | inherit
Поле справа

Поле снизу (padding-bottom)

Устанавливает значение поля от нижнего края содержимого элемента.

Синтаксис:

{padding-bottom: значение | inherit
Поле снизу

Поле слева (padding-left)

Устанавливает значение поля от левого края содержимого элемента.

Синтаксис:

{padding-left: значение | inherit
Поле слева

Поля (свойство padding)

Синтаксис:

{padding: [значение | проценты] {1, 4} | inherit
Число значений Результат
1 Поля будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
3 Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4 Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.

Порядок задания значений в свойствах padding, border, margin

Если установлено одно или четыре значения:

Одно или четыре значения

Порядок задания значений в свойствах padding, border, margin

Если установлено два значения:

Два значения

Если установлено три значения:

Три значения

Границы (border)

Границы — это линии вокруг полей элемента.

У каждой линии есть толщина, стиль и цвет.

Стиль начертания линий может быть индивидуален для каждой из сторон блока.

Толщина границы (border-width)

Синтаксис:

{border-width: [значение | thin | medium | thick] {1,4} | inherit

Три переменные — thin (2 пиксела), medium (4 пиксела) и thick (6 пикселов) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

Стиль границы

Синтаксис:

{border-style: [none | hidden | dotted | dashed | solid | double |
groove | ridge | inset | outset] {1,4} | inherit

Вид рамки в зависимости от стиля границы элемента:

dotted
dashed
solid
double
groove
ridge
inset
outset

Цвет границы (border-color)

Синтаксис:

{border-color: [цвет | transparent] {1,4} | inherit

transparent — устанавливает прозрачный цвет.

Универсальное свойство границ

Синтаксис:

{border: [толщина, стиль, цвет] | inherit

Одновременно устанавливает толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, возможно воспользоваться свойствами border-top, border-bottom, border-left, border-right.

Все свойства границ

border-width border-style border-color
border-top border-top-width border-top-style border-top-color
border-right border-right-width border-right-style border-right-color
border-bottom border-bottom-width border-bottom-style border-bottom-color
border-left border-left-width border-left-style border-left-color

Отступы (margin)

Отступ — пустое пространство от внешнего края границы, полей или содержимого блока.

Отступ от левого края элемента

Отступы (margin)

Особенности:

Отступы (свойство margin)

Синтаксис:

{margin: [значение | проценты] {1, 4} | inherit

Порядок установки значений такой же, как и для padding и border. Возможно установить от 1 до 4 значений.

Отступы на отдельных краях

Как и для свойств bottom и padding для отступов существуют специфические свойства, характерные только для определённых положений сверху, справа. снизу или слева: margin-top, margin-right, margin-bottom, margin-left.

Ширина

Устанавливает ширину контента в блоке.

Синтаксис:

{width: значение | проценты | auto | inherit

auto — устанавливает ширину исходя из типа и содержимого элемента.

Ширина блока

Ширина блока это комплексная величина и складывается из нескольких значений свойств:

Ширина блока

Ширина блока

Ширина блока

Пример:

width: 300px; /* Ширина слоя */
margin: 7px; /* Значение отступов */
border: 4px solid black; /* Параметры границы */
padding: 10px; /* Поля вокруг текста */

Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342px

Высота блока

Устанавливает высоту контента в блоке.

Синтаксис:

{height: значение | проценты | auto | inherit

auto — устанавливает высоту исходя из типа и содержимого элемента.

Высота блока

Высота блока

Свойство overflow

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

Синтаксис:

{overflow: auto | hidden | scroll | visible | inherit

Свойства:

Схлопывание отступов

Для положительных значений отступов выбирается наибольшее значение из двух отступов, и оно устанавливается как расстояние между блоками.

Схлопывание отступов

Отмены схлопывания

Схлопывание не срабатывает:

Поток документа

Порядок вывода объектов на странице и называется «потоком».

Позиционирование элементов

Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное.

Использование position

Свойство position задает позиционирование элемента относительно исходного положения или родителя.

Синтаксис:

{position: absolute | fixed | relative | static | inherit

Нормальное позиционирование

Если для элемента свойство position не задано или его значение static, элемент выводится в потоке документа как обычно. Иными словами, элементы отображаются на странице в том порядке, как они идут в исходном коде HTML.

Абсолютное позиционирование

При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера.

Абсолютное позиционирование

Абсолютное позиционирование

Свойства top, right, bottom, left

{top | right | bottom | left: значение | проценты | auto | inherit

Для позиционированного элемента определяет расстояние от края родительского элемента, не включая отступ, поле и ширину рамки, до края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края . В случае значения relative, right отсчитывается от правого края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от правого края родителя.

Свойства top, right, bottom, left

Значение свойства right относительно окна браузера:

Значение свойства right относительно окна браузера

Значение свойства right относительно родителя:

Значение свойства right относительно родителя

Относительное позиционирование и вложенные слои

Относительное позиционирование

Фиксированное позиционирование

Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

Нет полос прокрутки при нахождении за пределами видимой области.

Плавающие элементы

Плавающими (обтекаемыми) называются такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом.

Использование плавающих элементов

Использование:

Свойство float

Синтаксис:

{float: left | right | none | inherit

Свойство float превращает элемент в плавающий, при этом он прижимается к левому или правому краю родителя, а текст его обходит с других сторон.

Обтекания нет

Картинка Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Для картинки установлено float: left

Картинка Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Для картинки установлено float: right

Картинка Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Влияние обтекания

Плавающие элементы не оказывают влияние на высоту блока, в котором они находятся.

Отмена обтекания

Ширина элемента

Если плавающий элемент будет занимать всю доступную ширину, то остальные элементы, следующие за ним, будут начинаться с новой строки.

Отмена обтекания

Ширина элемента

.left { float: left; width: 50%; }
.right { float: right; width: 50%; text-align: right; }
Отмена обтекания

Отмена обтекания

Использование overflow

Использование overflow со значением auto, scroll или hidden отменяет действие float.

DIV { overflow: hidden; }
Отмена обтекания

Отмена обтекания

Свойство clear

Значения:

Блочные элементы

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги <address>, <blockquote>, <div>, <fieldset>, <form>, <h1>, ... ,<h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul> и некоторые устаревшие.

Блочные элементы

Свойство для определения блочного элемента: display: block.

Особенности блочных элементов

Анонимный блок

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

Первый абзац

Анонимный блок

Второй абзац

Строчные элементы

Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги <img>, <span>, <a>, <q>, <code> и др.

Используются для изменения вида текста или его логического выделения.

Строчные элементы

Свойство для определения строчного элемента: display: inline.

Свойства строчных элементов

Анонимный строчный элемент

Серым цветом на рисунке помечен текст внутри тега <span>, а пунктиром анонимные строчные элементы. Для таких элементов задать стиль напрямую нельзя, он наследуется от родителя.

Выполните восемь повторений

Блочно-строчные элементы

Блочно-строчный элемент – элемент, по структуре похожий на блочный, но обтекаемый остальными объектами, как строчный.

Блочно-строчные элементы

Блочно-строчные элементы

Свойство для определения блочно-строчного элемента: display: inline-block.

Свойство display

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Синтаксис:

{display: block | inline | inline-block | inline-table | list-item |
none | run-in | table | table-caption | table-cell | table-column-
group | table-column | table-footer-group | table-header-group |
table-row | table-row-group

Свойство display

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Синтаксис:

{display: block | inline | inline-block | list-item | none

Свойства:

Свойство vertical-align

Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.

Синтаксис:

{vertical-align: baseline | bottom | middle | sub | super |
text-bottom | text-top | top | inherit | значение | проценты

Свойство vertical-align

Свойство cursor

Устанавливает форму курсора, когда он находится в пределах элемента.

{cursor: [url('путь к курсору'),] | [ auto | crosshair | default |
e-resize | help | move | n-resize | ne-resize | nw-resize |
pointer | progress | s-resize | se-resize | sw-resize | text |
w-resize | wait | inherit ]

Свойство cursor

Вид Значение Тест Пример
default P {cursor: default}
crosshair P {cursor: crosshair}
help P {cursor: help}
move P {cursor: move}
pointer P {cursor: pointer}
progress P {cursor: progress}
text P {cursor: text}
wait P {cursor: wait}
n-resize P {cursor: n-resize}
ne-resize P {cursor: ne-resize}
e-resize P {cursor :e-resize}
 / se-resize P {cursor: se-resize}
s-resize P {cursor: s-resize}
sw-resize P {cursor: sw-resize}
w-resize P {cursor: w-resize}
nw-resize P {cursor :nw-resize}

Свойство cursor

{cursor: url('путь к курсору1'), url('путь к курсору2'), ...,
<ключевое слово>

Через запятую допускается указывать несколько значений url, в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer, допустимые значения перечислены выше.

Свойство min-width

Синтаксис:

{min-width: значение | проценты | inherit

Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.

Свойство max-width

Синтаксис:

{max-width: значение | проценты | inherit

Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width.

Вычисление ширины

min-width < width < max-width => width
width < max-width => width
min-width > width > max-width => min-width
min-width > width < max-width => min-width

Свойство min-height

Синтаксис:

{min-height: значение | проценты | inherit

Задает минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height, max-height и min-height.

Свойство max-height

Синтаксис:

{max-height: значение | проценты | inherit

Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от значений установленных свойств height, max-height и min-height.

Вычисление высоты

min-height < height < max-height => height
min-height > height > max-height => min-height
min-height > height < max-height => min-height
min-height < height => height
min-height > height => min-height
min-height < max-height => max-height
Разработка: Викулин Максим