Введение в веб-разработку с HTML, CSS, JavaScript

И на тот случай, если вы не знаете разницы между Serif и Sans-Serif, скажу, что есть шрифты без засечек и шрифты с засечками – это шрифты, в которых есть не только линии, но и небольшое украшение в конце.

Далее давайте изменим цвет. И это мы делаем с помощью свойства color.

И здесь можно использовать предопределенные имена цветов red, green, blue и т.д., а можно использовать шестнадцатеричное значение для определенного цвета.

Свойство font-style указывает, хотите ли вы, чтобы текст был курсивным или обычным.

Следующее свойство – это вес шрифта.

И вес шрифта можно указать от нормального до жирного. И вы также можете указать вес с помощью числа.

Далее мы можем указать размер шрифта.

Почти каждый браузер имеет размер шрифта по умолчанию 16 пикселей. Не путайте это с точками pt, здесь используются пиксели. Точки pt используются в печати, но не на экране. На экране вы используете пиксели. Пиксели считаются абсолютной единицей измерения размера. Тем не менее, у них есть относительная составляющая.

Пиксели привязаны к устройству просмотра. Для устройств с низким DPI или низким количеством точек на дюйм один пиксель соответствует одной точке пикселя устройства на дисплее. Для принтеров и экранов с высоким разрешением один пиксель подразумевает несколько точек пикселей устройства.

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

При всем при этом пиксели по-прежнему считаются абсолютной единицей измерения.

Свойство text-transform управляет преобразованием текста элемента в заглавные или прописные символы.

Другое полезное свойство – text-align, которое позволяет центрировать или выравнивать текст по правому и левому краю.

Теперь давайте немного поговорим об относительном размере шрифта. И здесь есть две относительные единицы измерения, это проценты и 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 пикселей.