Введение в веб-разработку с HTML, CSS, JavaScript
Шрифт:
Пиксели привязаны к устройству просмотра. Для устройств с низким DPI или низким количеством точек на дюйм один пиксель соответствует одной точке пикселя устройства на дисплее. Для принтеров и экранов с высоким разрешением один пиксель подразумевает несколько точек пикселей устройства.
Дело в том, что устройства с более высоким DPI дадут вам более четкий текст, потому что для каждого пикселя, который он рисует, он фактически рисует несколько точек пикселей на устройстве.
При всем при этом пиксели по-прежнему считаются абсолютной единицей измерения.
Свойство text-transform управляет преобразованием текста элемента в заглавные или прописные символы.
Другое
Теперь давайте немного поговорим об относительном размере шрифта. И здесь есть две относительные единицы измерения, это проценты и ems.
Здесь тег body имеет размер 120%. И это означает, что мы хотим взять размер, который браузер предоставляет по умолчанию, и увеличить его на 120%.
В большинстве браузеров размер текста по умолчанию составляет 16 пикселей. Таким образом, 120% от 16 пикселей будет чуть больше 19 пикселей.
Здесь размер текста составляет 2em. И это единица измерения, эквивалентная ширине буквы в этом конкретном шрифте, который мы используем.
Поначалу это звучит немного запутанно, но суть в том, что это относительный размер.
Так как мы установили размер шрифта 120% во всем теле документа, и когда вы комбинируете этот размер шрифта с 2.5em, это говорит о том, что вы хотите увеличить шрифт в два с половиной раза по сравнению со 120%.
И наконец размер текста можно задать с помощью единицы vw, что означает «ширину области просмотра» viewport . Viewport – это размер окна браузера и 1vw = 1% ширины области просмотра. Если окно просмотра имеет ширину 50 см, 1vw составляет 0,5 см.
Теперь, в HTML каждый элемент считается блоком. Однако этот блок содержит не просто контент.
Помимо содержимого, блок содержит отступы, границы и поля. И существуют правила, определяющие, как эти компоненты блока влияют на компоновку, а также, как вычисляются ширина и высота блока.
В качестве примера давайте рассмотрим структуру HTML этого документа.
Здесь есть тег h1 и тег div с идентификатором box, а внутри этого div есть еще один div с идентификатором content и текстом.
И так как div является элементом блочного уровня, он пытается заполнить родительский элемент целиком по ширине.
Но если приглядеться, здесь есть некоторое пространство между заголовком и текстом.
Давайте откроем инструменты разработчика Chrome и выясним, что это за пространство.
Давайте выберем тег body и посмотрим, что происходит.
И мы видим, что тег body имеет отступ
И здесь написано таблица стилей пользовательского агента. Это означает, что это сам браузер. Это стили браузера по умолчанию.
Мы можем сделать margin 0, и когда мы это сделаем, мы увидим, что теперь наш контент находится на одном уровне с фактическими границами окна браузера.
Далее вы можете видеть, что контекст зеленый. Но мы не видим фон блока, в котором на самом деле находится контент, потому что мы бы видели что-то синее на заднем плане.
И это потому, что внутренний блок содержимого полностью закрывает внешний, потому что они имеют одинаковый размер. Они оба пытаются заполнить своего родителя, который в данном случае является тегом body.
Поэтому давайте установим некоторые отступы внешнего блока.
Давайте установим padding 10 пикселей сверху, 10 пикселей справа, 10 пикселей внизу и 10 пикселей слева.
И вуаля, теперь мы увидели синий фон. Также мы добавили этому блоку черную границу с толщиной 5 пикселей и размеры самого блока 300 пикселей на 50 пикселей, а также отступ сверху от заголовка 50 пикселей.
Кроме того, мы добавили свойство overflow. Свойство overflow указывает, следует ли обрезать содержимое или добавить полосы прокрутки, когда содержимое элемента слишком велико и не помещается в указанной области. И свойство overflow имеет следующие значения:
visible – по умолчанию. Переполнение контента в блоке не отсекается, и содержимое отображается за пределами блока.
hidden – переполнение контента обрезается, и остальное содержимое будет невидимым.
scroll – переполнение контента обрезается, и добавляется полоса прокрутки, чтобы увидеть остальную часть содержимого.
auto – аналогично прокрутке, но добавляет полосы прокрутки только при необходимости.
В результате мы можем увидеть, что наш блок имеет размеры не 300 пикселей на 50 пикселей, а здесь добавляется отступ, ширина границы и поле. Так что, когда вы устанавливаете размеры блока, нужно учитывать и все остальные свойства. Здесь на самом деле мы устанавливаем не ширину блока, а ширину содержимого.
В CSS 3 есть такое свойство как box-sizing со значением border-box.
Свойство CSS box-sizing позволяет нам включать отступы и границы в общую ширину и высоту элемента.
Без свойства CSS box-sizing, по умолчанию ширина и высота элемента вычисляются следующим образом:
ширина + отступ + граница = фактическая ширина элемента
высота + отступ + граница = фактическая высота элемента