HTML против Body в CSS


Содержание материала:

HTML Стили — CSS

Стилизация HTML с CSS

CSS означает каскадные таблицы стилей.

CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителях.

CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.

CSS можно добавлять к элементам HTML тремя способами:

  • Встроенный — с помощью атрибута Style в элементах HTML
  • Internal -с помощью

Центрирование в CSS: Полное руководство

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

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

Поэтому давайте создадим дерево решений и, надеюсь, теперь этот вопрос станет для вас проще.
Мне нужно отцентрировать элементы…

Горизонтально

Это элементы inline или inline-* (например, текст или ссылки)?

Вы можете отцентрировать элементы inline горизонтально, в родительском элементе block-level с помощью:

Это будет работать для inline , inline-block , inline-table , inline-flex и т.д.

Это элемент уровня блока?

Вы можете отцентрировать элемент block-level , придав ему margin-left и margin-right или auto ( при этом также нужно задать width , в противном случае это будет полная ширина, и центрирование не потребуется ). Это часто делается в подобных сокращениях:

Это будет работать независимо от ширины элемента block-level или родительского элемента.
Обратите внимание, что вы не можете использовать привязку к центру float . Хотя, существует способ .

У вас есть более чем один элемент block-level?

Если у вас есть два или более элемента block-level , которые должны быть отцентрированы горизонтально в ряд, скорее всего вам лучше применить для них разные типы display . Вот примеры, как сделать из них inline-block и flexbox :

Если только вы не хотите расположить несколько элементов block-level друг над другом. В этом случае по-прежнему прекрасно работает техника автоматического отступа:

Вертикально

Вертикальное центрирование в CSS немного сложнее

Это элементы inline или inline-* ( например, текст или ссылки )?

Это одиночная строка?

Иногда линейные / текстовые элементы могут центрироваться по вертикали, просто потому, что отступ снизу и сверху равны:

Если отступ по некоторым причинам для вас это не вариант, и вы хотите отцентрировать текст, который не будет оборачивать, существует прием, аналогичный тому, что мы делали с line-height :

Это несколько строк?

Аналогично отступ сверху и снизу может задать эффект центрирования для нескольких строк текста. Но иногда это не будет работать, если элемент текста представляет собой ячейку таблицы или для него с помощью CSS задано такое поведение. В этом случае применяется свойство vertical-align , в отличие от общих случаев выравнивания элементов:

Если выравнивание в формате таблицы неприменимо для вас, возможно, вы могли бы использовать flexbox ? Один дочерний элемент flex может легко быть отцентрирован внутри родительского элемента flex :

Имейте в виду, что это актуально только для тех случаев, когда контейнер имеет фиксированную высоту ( в пикселях, процентах и т.д. ), поэтому для контейнера здесь задана высота.

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

Это элемент block-level?

Вы знаете высоту элемента?

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

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

Но если вы знаете высоту, вы можете выровнять элемент по центру следующим образом:

Высота элемента неизвестна?

Его все равно можно отцентрировать, сдвинув его вниз на половину экрана, а затем подвинув вверх на половину высоты элемента:

Можем ли мы использовать flexbox .

В самом деле, с помощью flexbox это делается намного проще:

Горизонтально и вертикально

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

Это элементы с фиксированной шириной и высотой?

Использование отрицательных полей, равных половине ширины и высоты элемента, после того, как вы абсолютно позиционировали их на 50% / 50% от размеров родительского элемента, будет поддерживаться большинством браузеров:

Это элемент с неизвестными шириной и высотой?

Если вы не знаете, ширину или высоту элемента, вы можете использовать свойство преобразования и отрицательный перевод на 50% в обеих плоскостях ( этот метод основан на текущей ширине / высоте элемента ) в центр:

Можем мы использовать flexbox?

Чтобы отцентрировать элемент в двух плоскостях с помощью flexbox , нам нужно использовать два свойства центрирования:

Заключение

Теперь вы можете центрировать любые элементы с помощью CSS .

Данная публикация представляет собой перевод статьи « Centering in CSS: A Complete Guide » , подготовленной дружной командой проекта Интернет-технологии.ру

HTML — Урок 5: «Тело» сайта, тег «body» + CSS

Довольно редко я пишу html уроки, а писать их надо. Ну что же? Продолжим дальше?
Итак, сегодня я расскажу о том, как оформить «тело сайта» через CSS.

Что нужно сделать перед тем, как начать оформлять «тело сайта»?

2) Создать файл CSS в той же папке, где храниться ваш HTML шаблон с названием style.css (бывает, что создают его и под названием main.css)

3) Подключить только что созданный файл css следующей строчкой:

Более подробно об этом написано в уроке №3

4) Читать статью дальше.

Итак, Вы создали файл style.css и подключили стили в своем HYML-шаблоне. Сейчас Вам нужно в css-файле написать слово body и открыть стили знаком «<" без кавычек. Дальше Вы можете указать общий цвет текста на страницы, шрифт и размер текста, фон, отступы, выравнивание и другие параметры. Дальше нужно закрыть класс знаком ">» без кавычек. Должно получиться примерно так:

Обращаю внимание на то что, каждый новый стиль пишется с новой строки или через пробел, а также после стилей ставится точка с запятой. Комментарии в css обозначаются следующим образом: /*комментарий*/ .

Фон страницы можно задавать, как цветом, так и картинкой, аналогично описанному в уроке 4.

После окончания работы с файлами, не забудьте их сохранить и загрузить на сервер.

На сегодня Всё, создавайте сайт самостоятельно, последнее время цены так кусаются.

5 нетривиальных моментов разработки фронтэнда на CSS

Ребята из Noveo нашли статью о некоторых аспектах использования CSS, на которые при верстке следует обратить особое внимание. После перевода материал был отдан на вычитку штатной верстальщице Светлане. Светлана нашла в статье несколько спорных пунктов, добавила комментарии и предложила свои варианты решений — предлагаем вам почитать интересную полемику двух фронтенд-разработчиков!

Фронтэнд-разработчик WebiNerds Евгений Половный охотно делится знаниями и опытом с коллегами, организуя тренинги и воркшопы, а также с читателями ГитХаба, публикуя часть своих материалов в книге на GitHub. WebiNerds адаптировали части этой книги для настоящей статьи.

Введение

Многие разработчики считают, что сделали достаточно, если что-то «работает». Я думаю, сегодня это одна из самых больших проблем в нашей индустрии. На своем последнем воркшопе я попытался обратить внимание на некоторые нюансы фронтенд-разработки, указать на проблемы, которые мы часто встречаем, работая с CSS.

Возьмем, например, флексбокс, представленный в CSS3. К сожалению, многие программисты, работающие во фронт-энд-разработке, не изучают флексбокс — или, по крайней мере, не делают это тщательно. Очень важно понимать разницу между флексбоксом и float-макетом, не только в общем, но и на глубоком уровне. Разработчики вполне могут написать какой-то работающий код (т.е. на экране визуально все нормально работает), не понимая, что происходит за фасадом — а следовало бы.

У CSS много нюансов. Рассмотрим 5 интересных моментов этой технологии, включая flexbox и float, на которые стоит обратить особое внимание.

Свойство CSS Float

Свойство CSS float представляет собой значительное усложнение для разработчика: обтекаемые элементы не остаются в обычном потоке рендеринга. Другими словами, позиция обтекаемых элементов рассчитывается иначе — от позиции других, не обтекаемых элементов. По умолчанию поток для HTML-элементов линейный. Элементы размещаются на странице слева направо, и затем переходят на следующую строку, когда на текущей больше нет места. Элементы, к которым применяется float , выпадают из этого потока.

Здесь мы должны приостановиться и рассмотреть термин «поток рендеринга». Этот термин может сбивать с толку. Что он на самом деле значит? Когда веб-страница загружается, наш браузер сначала загружает структуру Document Object Model (DOM). Затем, прежде чем отрисовать страницу, браузер должен найти блоки в DOM, соответствующие свойствам CSS в CSS файле (или файлах). Поток описывает порядок операций для механизма визуализации браузера. По сути поток — это то, как браузер решает, где каждый элемент будет размещен перед рендерингом. Только после того, как браузер все это сделает, сайт будет визуально отражен на экране.

Направление потока с выровненными элементами.

Трудность с CSS Float

В тот момент, когда строится HTML-страничка, обтекаемые элементы не распознают другие элементы в DOM (Document Object Model), за исключением текстовых элементов, таких как

или
. Происходит это потому, что обтекаемые элементы «выравниваются» — вдобавок к основным элементам — по границе родительского элемента. Из-за этого элементы со свойством CSS float не всегда ведут себя одинаково во всех контекстах. В частности, обтекаемый элемент может неожиданно отреагировать, когда он расположен рядом с нетекстовыми элементами, такими как блочные (

) или строчно-блочные элементы ( ), или рядом с

. Неожиданное поведение может возникать потому, что отображение обтекаемых элементов зависит от окружающих их объектов, и обтекаемые элементы «не видят» элементы нетекстовые .

Мы можем решить эту проблему, добавив элемент к DOM между других элементов:

Но как мы знаем, пустые и нефункциональные элементы в DOM – плохая практика.

Однако у этой проблемы есть простое решение. Мы можем добавить псевдо-класс, способствующий нормальному рендеринговому потоку. Когда этот псевдо-класс добавлен, элементы могут распознавать друг друга. Если кратко — псевдо-класс заставляет необтекаемые элементы реагировать на расположение обтекаемых элементов.

Есть и более элегантное решение. Мы просто добавляем отдельный класс для элементов, требующих очистки. Этот класс CSS устраняет необходимость нефункциональных элементов в DOM:

Светлана: Способов «зачистки» ( clearfix ) обтекаемых элементов было придумано довольно много, но как известно, чем меньше строчек, тем легче файл. Вот самый короткий вариант из всех существующих:

Этот способ зачистки будет работать во всех современных браузерах, поддерживающих псевдоэлементы (IE9+). Если требуется поддержка IE8, просто удалите одно двоеточие перед after. Подробное описание этого способа можно прочитать здесь: http://nicolasgallagher.com/micro-clearfix-hack/.

Свойство CSS Position

Свойство CSS position на самом деле довольно простое по сути. Однако нельзя забывать, что абсолютные и фиксированные элементы — как обтекаемые элементы — не участвуют в потоке рендеринга. При этом относительные и статично позиционированные элементы остаются в потоке рендеринга. По этой причине нам нужно крайне осознанно и внимательно использовать свойство position . Когда бы мы его ни использовали, мы должны понимать глубинный смысл того, что мы делаем.

Светлана: Автор безусловно прав в том, что относительно позиционированные элементы не влияют на основной поток. Однако здесь стоит внести ясность: в потоке резервируется место под элемент, как если бы к нему применялось свойство position: static . После этого элемент смещается на указанное расстояние (свойства top , bottom , left и right ). В своем новом месте обитания элемент уже не в потоке и может наслаиваться на другие элементы.

Похожую картину можно наблюдать при использовании CSS3 трансформаций, но это уже тема для отдельной статьи.

Распространенная ошибка при работе с position : попытка растянуть элемент с position: absolute до полной ширины страницы:

Это работает до тех пор, пока вы не попытаетесь прокрутить страницу вниз. Тогда вы понимаете, что ширина, высота и расположение рассчитаны не на основе размера документа, но на основе размера экрана. Этот объект с абсолютным позиционированием выпал из потока.

Сам поток по себе не вызывает проблем. Но нужно осознавать, что элементы с абсолютным и фиксированным позиционированием ускользают из потока рендеринга.

Светлана: Говоря про позиционирование элементов и их рендеринг относительно друг друга, очень важно упомянуть такой термин, как «контекст наложения» (stacking context). Это не самый простой термин из вокабуляра фронтендщика, но я попробую объяснить его на пальцах.

Контекст наложения тесно связан с понятием потока. Представьте себе нормальный поток рендеринга. Ко всем элементам применяется position: static (значение по умолчанию), никаких float’ов и других влияющих на поток свойств нет. В этом случае есть всего один контекст наложения, принадлежащий окну браузера. Именно по этой причине абсолютно позиционированный div в примере выше будет рассчитывать высоту и ширину от окна браузера, а не от тега html или body .

Теперь давайте создадим еще один контекст наложения. Свойств, которые за это отвечают, существует несколько: position (кроме static ), transform и даже opacity . Предлагаю использовать наиболее распространенный прием – добавим body свойство position: relative .

В результе создается новый контекст наложения относительно тега body . Т.е. теперь любой вложенный в body тег с position: absolute будет позиционироваться относительно body .

Очень важно переварить и усвоить эту идею. Этот прием частенько называют «позиционирование относительно родителя», и он бывает чрезвычайно полезен в ряде случаев, будь то центрирование или responsive-таблицы.

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

Контекст наложения влияет на абсолютно позиционированные блоки. Блоки с фиксированным позиционированием всегда будут располагаться и рассчитывать свои значения в % (например, высоту) относительно окна браузера.

Еще хотелось бы внести ясность в то, что значат значения свойств top , bottom , left и right . Казалось бы, все просто: это значения, говорящие браузеру, где отобразить блок. Это так, но… Рассмотрим пример: есть блок со значением top: 100px . Если у него позиционирование relative , то это будет означать, что браузер отрисует его на 100px ниже его первоначального отображения. При этом помним, что место под его первоначальное отображение резервируется.

Теперь изменим позиционирование на абсолютное. Как уже знаем из примеров выше, новое положение будет рассчитываться от границ контекста наложения. Т.е. на 100px ниже верхней границы окна браузера, при этом его горизонтальное смещение может интерпретироваться по-разному разными браузерами. Чтобы создать кроссбраузерную картинку, лучше всегда задавать не только top или bottom , но еще и left или right .

Вместо окна браузера отсчет может происходить от блока с новым контекстом.

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

На блоки с позиционированием static значения свойств top , left и т.п. не влияют. Т.е. браузер их просто проигнорирует. Советую это запомнить, т.к. весьма удобно «сбрасывать позиционирование» в отдельных медиазапросах, используя position: static .

Свойство флексбокс (Flexible Boxes)

Флексбокс новее, чем свойства float и position . Он был разработан для того, чтобы предложить другой способ расположения элементов, и основан на другом образе мышления. Флексбокс предлагает больше возможностей позиционирования и возможностей определять отношения между элементами, чем свойства float и position — потому что флексбокс позволяет вам располагать элементы относительно друг друга. Это важно. С float и position элементы располагаются относительно страницы. С флексбоксом элементы соотносятся только между собой.

Это открывает перед нами много восхитительных возможностей. Например, мы можем поменять расположение элемента, меняя его порядковый номер только в CSS. Таким способом элементы легко подвинуть или поменять местами. Трудность с флексбоксом в том, чтобы понять, КАК и ПОЧЕМУ он работает именно таким образом. Это новая парадигма, которая, соответственно, требует нового образа мышления. Для начинающих разработчиков, только вступающих на этот путь, это может не быть такой уж большой проблемой. Но разработчикам-ветеранам нужно научиться думать так же, как флексбокс. В наши дни это обязательный скилл для всех разработчиков.

Светлана: Ключевое отличие стандартных сеток на флексах от сеток на float’ах (например, bootstrap) заключается в том, что для флексов нет необходимости создавать обертку ( > в bootstrap), группирующую колонки. При помощи свойства flex-wrap (которое, кстати, есть только в 2 из 3 синтаксисов флексбокса) колонки сетки могут переходить на «новую строку», если для них недостаточно места на текущей. При этом не требуется применять clearfix , а следовательно, отпадает необходимость в дополнительной разметке. Поскольку поддержка этой возможности все еще не достаточно хорошая (IE10+, Android 4.4+), нужно думать о полифиле. К сожалению, на момент написания этих строк универсального полифила для всех фич флексбокса еще не придумали. Существующие решения либо не готовы к продакшену по причине большого количества багов, либо работают хорошо, но требуют серьезной оптимизации (создают ощутимые задержки при отрисовке страницы). Но мы можем с уверенностью применять в качестве полифила сетку «на инлайн-блоках» ( display: inline-block ). Такая сетка тоже не требует дополнительной разметки, а колонки переходят на новую строку, если не помещаются на текущей.

Трудности флексбокса

В настоящее время самая большая трудность с флексбоксом заключается не в его способностях, а скорее связана с поддержкой браузеров. Старые браузеры просто не знают, что с ним делать. К счастью, понять, какие браузеры и версии браузеров поддерживают и не поддерживают Flexbox, на самом деле легко – просто проверьте на caniuse.com.

Из-за проблем с поддержкой браузеров (в старых версиях браузеров) возможность использовать флексбокс в проекте зависит от потребностей клиента. Если заказчик настаивает на поддержке старых браузеров, о флексбоксе не может быть и речи. Если же заказчик ориентируется на современные браузеры, я однозначно использую флексбокс.

Светлана: Этот момент, на мой взгляд, спорный. Можно полифилить большую часть случаев, для которых применяется флексбокс, даже для IE8+.

Также есть очень полезный SASS-миксин для обеспечения оптимальной кроссбраузерной поддержки:

Разные типы верстки: адаптивная vs отзывчивая

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

Адаптивные макеты, в свою очередь, предлагают макеты сайта, полностью различные в зависимости от девайсов. Другими словами, мобильная версия сайта может содержать элементы (и даже функциональность), которые не представлены в десктопной версии. Версия сайта, которую посетители видят на планшетах, также может полностью отличаться как от мобильной, так и от десктопной версий. Даже для десктопа вы можете предложить HD-версии сайта или же версии низкого разрешения, в зависимости от экрана, на котором просматривается сайт.

Почти каждый современный вебсайт использует смесь адаптивной и отзывчивой верстки. Возьмите, например, TechCrunch:

Обратите внимание, как рубрика «Избранные новости» (Featured Stories) размещается справа от рубрики «Смотреть репортаж Crunch» («Watch Now Crunch Report»), когда окно на рабочем столе широкое, но затем перемещается вниз, когда окно сужается. Это «отзывчивая» верстка. Однако там происходит намного больше. Обратите внимание, как изменяется весь заголовок, когда окно уменьшается в размерах. В версии, оптимизированной для мобильных девайсов, у нас есть только меню «гамбургер», логотип TechCrunch и иконка космического корабля (при клике на которую разворачивается лист топ-историй):

В десктопной версии сайта у нас абсолютно другой заголовок:

Элементы не просто перераспределены, чтобы вместиться в подходящую для мобилок версию. То, что мы видим — два абсолютно разных макета, две абсолютно разные версии интерфейса.

Мы можем делать адаптивные макеты в CSS с помощью медиа-запросов:

Медиа-запросы позволяют нам уточнить критерии, определяющие, какую версию сайта отображать. В большинстве случаев эти критерии являются параметрами разрешения экрана. Иногда мы можем использовать DPI (Dots Per Inch, буквально – «Количество точек на дюйм», измеряющее плотность пикселей на экране) чтобы определить, какую версию показать. Дополнительно мы можем использовать медиа-запросы и попытаться определить, сенсорный девайс или нет. Для нацеливания на продукты Apple особенно полезен ресурс stephen.io, поддерживаемый Стефеном Гилбертом (Stephen Gilbert). Stephen.io перечисляет медиа-запросы к мобильным девайсам Apple, делая максимально простым определение конкретной модели iPhone или (еще лучше) ВСЕХ моделей iPad с помощью всего одного медиа-запроса:

Сложность с адаптивным дизайном

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

Светлана: Веб-технологии меняются стремительно: меняется стандарт, разработчики со всего мира придумывают различные приемы, улучшающие интерфейсы и упрощающие разработку. Далеко не все термины, которыми пользуются фронтендщики, можно найти в спецификациях. В связи с этим у новичков и даже у опытных разработчиков часто возникает вопрос «а чем отзывчивый макет отличается от адаптивного или резинового?». Сейчас я немного побуду занудой. Термины не просто так становятся общеупотребимыми. Их таковыми делают книги и статьи выдающихся разработчиков. Так вот, четкие различия между этими типами макетов можно посмотреть на liquidapsive.com. Примеры на этом сайте не противоречат тому, как Итан Маркотт (Ethan Marcotte) определяет отзывчивые макеты в своих книгах и статьях (послуживших основой современному тренду), или тому, какая идея была в основе первых адаптивных макетов в далеком 2006-м. Это полезно знать, однако термины невозможно заморозить. И сейчас, особенно среди русскоязычных разработчиков, «адаптивный» и «отзывчивый» стали почти синонимами.

Адаптивные CSS-фреймворки

Адаптивные CSS-фреймворки помогают разработчикам правильно ориентировать элементы, предлагая сетку с 12 колонками. Использование фреймворка сокращает время разработки сайта в целом.

Создание сетки с различными значениями ширины для различных размеров экрана во фреймворке Foundation.

Полноценные фреймворки, такие как Bootstrap и Foundation, представляют собой больше, чем просто систему сеток. Они также предоставляют JavaScript-плагины, правила CSS и элементы дизайна. В последнее время я работаю практически исключительно на Foundation. Не потому, что Bootstrap способен на меньшее, скорее потому, что Bootstrap предлагает так много опций для визуальной адаптации, что нам просто не нужно столько для наших проектов. За счет дополнительной функциональности Bootstrap шире. Bootstrap отличный, особенно если у вас в команде нет дизайнера и вы хотите использовать все встроенные элементы дизайна. Как бы то ни было, мне обычно просто нужны функциональные элементы CSS-фреймворка, а не элементы дизайна.

Светлана: Bootstrap также предлагает простецкий интерфейс, чтоб вырезать ненужные части фреймворка.

Хотя существуют и другие фреймворки, Bootstrap и Foundation могут удовлетворить практически 100% потребностей разработки. И, к счастью, довольно просто выучить оба этих фреймворка. Оба хорошо задокументированы и имеют большое сообщество активных пользователей, которые могут помочь и ответить на вопросы.

За CSS-фреймворками — будущее. Если вы пока не используете какой-нибудь из них, стоит серьезно задуматься над тем, чтобы приобщиться!

Выводы


Сейчас — увлекательное время для CSS и фронтенд-разработки. Благодаря (относительно) новым инструментам, таким как свойство флексбокс, и CSS-фреймворкам, способствующим нашему адаптивному (и отзывчивому) дизайну, сейчас создать и успешно запустить комплексные сайты просто, как никогда.

HTML vs CSS: What’s the Difference?

August 30, 2020 3 min read

HTML and CSS are the two fundamental languages for building any website. What’s the difference?

First off, HTML and CSS aren’t the same. They function as a team! Together, they form the bones and skin for any website. Let’s break each down individually, then see how they work together…

HTML stands for Hypertext Markup Language. Think of HTML as the skeleton of the document. The HTML is what gives structure to the site. This is done through tags, elements, and attributes. Whether you want headings, lists, images, or links, HTML can do all of that.

Let’s start with a basic HTML document.

HTML code example

The !DOCTYPE in the first line above tells the browser what type of document it is looking at. In this case, it’s an HTML doc. The third line is the head section, and below it, you can see the title tag. This is where you would put the title of your website. In this case, the title of the document is “Welcome to One Month.” Inside the body (lines 6-9), you could add an H1 tag, like we have, that puts the text inside of it in the H1 style, the largest heading tag there is.

Tag, you’re it!

Here are some other popular tags!

These tags are for headings, much like those in this blog post!. H1 is the largest heading tag, so it has the largest text. H6 is the smallest heading tag so, you guessed it, the smallest header text option.

The img tag is for inserting images into your site.

The video tag is for adding videos, of course.

We use this for adding links, and it stands for anchor.

Children Tags

If you are writing an unordered

    (bulleted) or ordered

      (numbered) list, they will surely need items in the list! To do this, we use the list
    1. tag. The
    2. is a child of either the
        or

          tags. So a bulleted list of our favorite 90’s sitcoms would look something like this…

      HTML code example

      CSS stands for Cascading Style Sheet.

      If HTML is the skeleton of your page, CSS is the skin.

      Without CSS, your websites would look rather boring, dull, and, dare we say, naked. In CSS, there is a property and a value . Property is the quality you want to change; value is amount of change.

      Let’s look go back to our HTML example.

      HTML code example

      Take a look at the tag. We can augment the HTML body with CSS by adding details. For example, let’s say we want to change the color of the body. It would look something like this…

      HTML code example

      Or let’s say we want to change the color and size of any text we put in the body.

      It would look like this…

      HTML code example

      Or suppose you wanted to change the attributes of the H1 tag. You could do something like this…

      HTML code example

      Using color names is fine, but if you want a more diverse palette to choose from, try using hexadecimal (#RRGGBB).

      But for us to take advantage of the awesome possibilities available through CSS, we need to link our HTML to it. We do this using the code below:

      As you can see, this designates that there is a relationship (rel) between the HTML and the CSS.

      Another way that we can implement CSS is by using the font-family property. This is the same thing as using a text editor to change the font.

      We do this by including the following in the code:

      HTML code example

      Case Study: CSS Zen Garden

      A wonderful showcase of the relationship between the two languages is CSS Zen Garden.

      CSS Zen Garden demonstrates the power of CSS. Clicking the links to the right will load the same page with one discernible difference, the CSS. This highlights what CSS can do to change the look and feel of the page.

      Here are some examples from the garden…

      The difference between HTML and CSS

      Tutorial highlights

      What have we learned?

      • HTML can exist on its own, CSS cannot, but together is where the magic happens.
      • The more we learn about each language, the more creative we can be with our designs. With the structure in place, the choices are endless.
      • HTML is the noun; CSS is the verb. Let’s make sentences!

      Learn HTML and CSS now!

      If you would like to continue your journey with HTML and CSS here are a few resources:

      • Learn How to Code HTML and CSS — this online coding course will take you from a beginner to intermediate developer in just 30 days. The course includes human support, videos, real-world projects, grading, and an HTML & CSS Certification following graduation.
      • Front-end vs. Back-end Developers — What’s the salary for a front-end developer? Back-end? Which is easier? These are great questions to ask when you’re getting started. Read this article to find out.
      • How to Learn Javascript — Now that you understand HTML and CSS, what is JavaScript and how do you learn it?

      Learn to Code in 30 Days

      Sign up for our weekly newsletter, and exclusive access to upcoming courses.

      5 нетривиальных моментов разработки фронтэнда на CSS

      Ребята из Noveo нашли статью о некоторых аспектах использования CSS, на которые при верстке следует обратить особое внимание. После перевода материал был отдан на вычитку штатной верстальщице Светлане. Светлана нашла в статье несколько спорных пунктов, добавила комментарии и предложила свои варианты решений — предлагаем вам почитать интересную полемику двух фронтенд-разработчиков!

      Фронтэнд-разработчик WebiNerds Евгений Половный охотно делится знаниями и опытом с коллегами, организуя тренинги и воркшопы, а также с читателями ГитХаба, публикуя часть своих материалов в книге на GitHub. WebiNerds адаптировали части этой книги для настоящей статьи.

      Введение

      Многие разработчики считают, что сделали достаточно, если что-то «работает». Я думаю, сегодня это одна из самых больших проблем в нашей индустрии. На своем последнем воркшопе я попытался обратить внимание на некоторые нюансы фронтенд-разработки, указать на проблемы, которые мы часто встречаем, работая с CSS.

      Возьмем, например, флексбокс, представленный в CSS3. К сожалению, многие программисты, работающие во фронт-энд-разработке, не изучают флексбокс — или, по крайней мере, не делают это тщательно. Очень важно понимать разницу между флексбоксом и float-макетом, не только в общем, но и на глубоком уровне. Разработчики вполне могут написать какой-то работающий код (т.е. на экране визуально все нормально работает), не понимая, что происходит за фасадом — а следовало бы.

      У CSS много нюансов. Рассмотрим 5 интересных моментов этой технологии, включая flexbox и float, на которые стоит обратить особое внимание.

      Свойство CSS Float

      Свойство CSS float представляет собой значительное усложнение для разработчика: обтекаемые элементы не остаются в обычном потоке рендеринга. Другими словами, позиция обтекаемых элементов рассчитывается иначе — от позиции других, не обтекаемых элементов. По умолчанию поток для HTML-элементов линейный. Элементы размещаются на странице слева направо, и затем переходят на следующую строку, когда на текущей больше нет места. Элементы, к которым применяется float , выпадают из этого потока.

      Здесь мы должны приостановиться и рассмотреть термин «поток рендеринга». Этот термин может сбивать с толку. Что он на самом деле значит? Когда веб-страница загружается, наш браузер сначала загружает структуру Document Object Model (DOM). Затем, прежде чем отрисовать страницу, браузер должен найти блоки в DOM, соответствующие свойствам CSS в CSS файле (или файлах). Поток описывает порядок операций для механизма визуализации браузера. По сути поток — это то, как браузер решает, где каждый элемент будет размещен перед рендерингом. Только после того, как браузер все это сделает, сайт будет визуально отражен на экране.

      Направление потока с выровненными элементами.

      Трудность с CSS Float

      В тот момент, когда строится HTML-страничка, обтекаемые элементы не распознают другие элементы в DOM (Document Object Model), за исключением текстовых элементов, таких как

      или
      . Происходит это потому, что обтекаемые элементы «выравниваются» — вдобавок к основным элементам — по границе родительского элемента. Из-за этого элементы со свойством CSS float не всегда ведут себя одинаково во всех контекстах. В частности, обтекаемый элемент может неожиданно отреагировать, когда он расположен рядом с нетекстовыми элементами, такими как блочные (

      ) или строчно-блочные элементы ( ), или рядом с

. Неожиданное поведение может возникать потому, что отображение обтекаемых элементов зависит от окружающих их объектов, и обтекаемые элементы «не видят» элементы нетекстовые .

Мы можем решить эту проблему, добавив элемент к DOM между других элементов:

Но как мы знаем, пустые и нефункциональные элементы в DOM – плохая практика.

Однако у этой проблемы есть простое решение. Мы можем добавить псевдо-класс, способствующий нормальному рендеринговому потоку. Когда этот псевдо-класс добавлен, элементы могут распознавать друг друга. Если кратко — псевдо-класс заставляет необтекаемые элементы реагировать на расположение обтекаемых элементов.

Есть и более элегантное решение. Мы просто добавляем отдельный класс для элементов, требующих очистки. Этот класс CSS устраняет необходимость нефункциональных элементов в DOM:

Светлана: Способов «зачистки» ( clearfix ) обтекаемых элементов было придумано довольно много, но как известно, чем меньше строчек, тем легче файл. Вот самый короткий вариант из всех существующих:

Этот способ зачистки будет работать во всех современных браузерах, поддерживающих псевдоэлементы (IE9+). Если требуется поддержка IE8, просто удалите одно двоеточие перед after. Подробное описание этого способа можно прочитать здесь: http://nicolasgallagher.com/micro-clearfix-hack/.

Свойство CSS Position

Свойство CSS position на самом деле довольно простое по сути. Однако нельзя забывать, что абсолютные и фиксированные элементы — как обтекаемые элементы — не участвуют в потоке рендеринга. При этом относительные и статично позиционированные элементы остаются в потоке рендеринга. По этой причине нам нужно крайне осознанно и внимательно использовать свойство position . Когда бы мы его ни использовали, мы должны понимать глубинный смысл того, что мы делаем.

Светлана: Автор безусловно прав в том, что относительно позиционированные элементы не влияют на основной поток. Однако здесь стоит внести ясность: в потоке резервируется место под элемент, как если бы к нему применялось свойство position: static . После этого элемент смещается на указанное расстояние (свойства top , bottom , left и right ). В своем новом месте обитания элемент уже не в потоке и может наслаиваться на другие элементы.

Похожую картину можно наблюдать при использовании CSS3 трансформаций, но это уже тема для отдельной статьи.

Распространенная ошибка при работе с position : попытка растянуть элемент с position: absolute до полной ширины страницы:

Это работает до тех пор, пока вы не попытаетесь прокрутить страницу вниз. Тогда вы понимаете, что ширина, высота и расположение рассчитаны не на основе размера документа, но на основе размера экрана. Этот объект с абсолютным позиционированием выпал из потока.

Сам поток по себе не вызывает проблем. Но нужно осознавать, что элементы с абсолютным и фиксированным позиционированием ускользают из потока рендеринга.

Светлана: Говоря про позиционирование элементов и их рендеринг относительно друг друга, очень важно упомянуть такой термин, как «контекст наложения» (stacking context). Это не самый простой термин из вокабуляра фронтендщика, но я попробую объяснить его на пальцах.

Контекст наложения тесно связан с понятием потока. Представьте себе нормальный поток рендеринга. Ко всем элементам применяется position: static (значение по умолчанию), никаких float’ов и других влияющих на поток свойств нет. В этом случае есть всего один контекст наложения, принадлежащий окну браузера. Именно по этой причине абсолютно позиционированный div в примере выше будет рассчитывать высоту и ширину от окна браузера, а не от тега html или body .

Теперь давайте создадим еще один контекст наложения. Свойств, которые за это отвечают, существует несколько: position (кроме static ), transform и даже opacity . Предлагаю использовать наиболее распространенный прием – добавим body свойство position: relative .

В результе создается новый контекст наложения относительно тега body . Т.е. теперь любой вложенный в body тег с position: absolute будет позиционироваться относительно body .

Очень важно переварить и усвоить эту идею. Этот прием частенько называют «позиционирование относительно родителя», и он бывает чрезвычайно полезен в ряде случаев, будь то центрирование или responsive-таблицы.

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

Контекст наложения влияет на абсолютно позиционированные блоки. Блоки с фиксированным позиционированием всегда будут располагаться и рассчитывать свои значения в % (например, высоту) относительно окна браузера.

Еще хотелось бы внести ясность в то, что значат значения свойств top , bottom , left и right . Казалось бы, все просто: это значения, говорящие браузеру, где отобразить блок. Это так, но… Рассмотрим пример: есть блок со значением top: 100px . Если у него позиционирование relative , то это будет означать, что браузер отрисует его на 100px ниже его первоначального отображения. При этом помним, что место под его первоначальное отображение резервируется.

Теперь изменим позиционирование на абсолютное. Как уже знаем из примеров выше, новое положение будет рассчитываться от границ контекста наложения. Т.е. на 100px ниже верхней границы окна браузера, при этом его горизонтальное смещение может интерпретироваться по-разному разными браузерами. Чтобы создать кроссбраузерную картинку, лучше всегда задавать не только top или bottom , но еще и left или right .

Вместо окна браузера отсчет может происходить от блока с новым контекстом.

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

На блоки с позиционированием static значения свойств top , left и т.п. не влияют. Т.е. браузер их просто проигнорирует. Советую это запомнить, т.к. весьма удобно «сбрасывать позиционирование» в отдельных медиазапросах, используя position: static .

Свойство флексбокс (Flexible Boxes)

Флексбокс новее, чем свойства float и position . Он был разработан для того, чтобы предложить другой способ расположения элементов, и основан на другом образе мышления. Флексбокс предлагает больше возможностей позиционирования и возможностей определять отношения между элементами, чем свойства float и position — потому что флексбокс позволяет вам располагать элементы относительно друг друга. Это важно. С float и position элементы располагаются относительно страницы. С флексбоксом элементы соотносятся только между собой.

Это открывает перед нами много восхитительных возможностей. Например, мы можем поменять расположение элемента, меняя его порядковый номер только в CSS. Таким способом элементы легко подвинуть или поменять местами. Трудность с флексбоксом в том, чтобы понять, КАК и ПОЧЕМУ он работает именно таким образом. Это новая парадигма, которая, соответственно, требует нового образа мышления. Для начинающих разработчиков, только вступающих на этот путь, это может не быть такой уж большой проблемой. Но разработчикам-ветеранам нужно научиться думать так же, как флексбокс. В наши дни это обязательный скилл для всех разработчиков.

Светлана: Ключевое отличие стандартных сеток на флексах от сеток на float’ах (например, bootstrap) заключается в том, что для флексов нет необходимости создавать обертку ( > в bootstrap), группирующую колонки. При помощи свойства flex-wrap (которое, кстати, есть только в 2 из 3 синтаксисов флексбокса) колонки сетки могут переходить на «новую строку», если для них недостаточно места на текущей. При этом не требуется применять clearfix , а следовательно, отпадает необходимость в дополнительной разметке. Поскольку поддержка этой возможности все еще не достаточно хорошая (IE10+, Android 4.4+), нужно думать о полифиле. К сожалению, на момент написания этих строк универсального полифила для всех фич флексбокса еще не придумали. Существующие решения либо не готовы к продакшену по причине большого количества багов, либо работают хорошо, но требуют серьезной оптимизации (создают ощутимые задержки при отрисовке страницы). Но мы можем с уверенностью применять в качестве полифила сетку «на инлайн-блоках» ( display: inline-block ). Такая сетка тоже не требует дополнительной разметки, а колонки переходят на новую строку, если не помещаются на текущей.

Трудности флексбокса

В настоящее время самая большая трудность с флексбоксом заключается не в его способностях, а скорее связана с поддержкой браузеров. Старые браузеры просто не знают, что с ним делать. К счастью, понять, какие браузеры и версии браузеров поддерживают и не поддерживают Flexbox, на самом деле легко – просто проверьте на caniuse.com.

Из-за проблем с поддержкой браузеров (в старых версиях браузеров) возможность использовать флексбокс в проекте зависит от потребностей клиента. Если заказчик настаивает на поддержке старых браузеров, о флексбоксе не может быть и речи. Если же заказчик ориентируется на современные браузеры, я однозначно использую флексбокс.

Светлана: Этот момент, на мой взгляд, спорный. Можно полифилить большую часть случаев, для которых применяется флексбокс, даже для IE8+.

Также есть очень полезный SASS-миксин для обеспечения оптимальной кроссбраузерной поддержки:

Разные типы верстки: адаптивная vs отзывчивая

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

Адаптивные макеты, в свою очередь, предлагают макеты сайта, полностью различные в зависимости от девайсов. Другими словами, мобильная версия сайта может содержать элементы (и даже функциональность), которые не представлены в десктопной версии. Версия сайта, которую посетители видят на планшетах, также может полностью отличаться как от мобильной, так и от десктопной версий. Даже для десктопа вы можете предложить HD-версии сайта или же версии низкого разрешения, в зависимости от экрана, на котором просматривается сайт.

Почти каждый современный вебсайт использует смесь адаптивной и отзывчивой верстки. Возьмите, например, TechCrunch:

Обратите внимание, как рубрика «Избранные новости» (Featured Stories) размещается справа от рубрики «Смотреть репортаж Crunch» («Watch Now Crunch Report»), когда окно на рабочем столе широкое, но затем перемещается вниз, когда окно сужается. Это «отзывчивая» верстка. Однако там происходит намного больше. Обратите внимание, как изменяется весь заголовок, когда окно уменьшается в размерах. В версии, оптимизированной для мобильных девайсов, у нас есть только меню «гамбургер», логотип TechCrunch и иконка космического корабля (при клике на которую разворачивается лист топ-историй):

В десктопной версии сайта у нас абсолютно другой заголовок:

Элементы не просто перераспределены, чтобы вместиться в подходящую для мобилок версию. То, что мы видим — два абсолютно разных макета, две абсолютно разные версии интерфейса.

Мы можем делать адаптивные макеты в CSS с помощью медиа-запросов:

Медиа-запросы позволяют нам уточнить критерии, определяющие, какую версию сайта отображать. В большинстве случаев эти критерии являются параметрами разрешения экрана. Иногда мы можем использовать DPI (Dots Per Inch, буквально – «Количество точек на дюйм», измеряющее плотность пикселей на экране) чтобы определить, какую версию показать. Дополнительно мы можем использовать медиа-запросы и попытаться определить, сенсорный девайс или нет. Для нацеливания на продукты Apple особенно полезен ресурс stephen.io, поддерживаемый Стефеном Гилбертом (Stephen Gilbert). Stephen.io перечисляет медиа-запросы к мобильным девайсам Apple, делая максимально простым определение конкретной модели iPhone или (еще лучше) ВСЕХ моделей iPad с помощью всего одного медиа-запроса:

Сложность с адаптивным дизайном

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

Светлана: Веб-технологии меняются стремительно: меняется стандарт, разработчики со всего мира придумывают различные приемы, улучшающие интерфейсы и упрощающие разработку. Далеко не все термины, которыми пользуются фронтендщики, можно найти в спецификациях. В связи с этим у новичков и даже у опытных разработчиков часто возникает вопрос «а чем отзывчивый макет отличается от адаптивного или резинового?». Сейчас я немного побуду занудой. Термины не просто так становятся общеупотребимыми. Их таковыми делают книги и статьи выдающихся разработчиков. Так вот, четкие различия между этими типами макетов можно посмотреть на liquidapsive.com. Примеры на этом сайте не противоречат тому, как Итан Маркотт (Ethan Marcotte) определяет отзывчивые макеты в своих книгах и статьях (послуживших основой современному тренду), или тому, какая идея была в основе первых адаптивных макетов в далеком 2006-м. Это полезно знать, однако термины невозможно заморозить. И сейчас, особенно среди русскоязычных разработчиков, «адаптивный» и «отзывчивый» стали почти синонимами.

Адаптивные CSS-фреймворки

Адаптивные CSS-фреймворки помогают разработчикам правильно ориентировать элементы, предлагая сетку с 12 колонками. Использование фреймворка сокращает время разработки сайта в целом.

Создание сетки с различными значениями ширины для различных размеров экрана во фреймворке Foundation.

Полноценные фреймворки, такие как Bootstrap и Foundation, представляют собой больше, чем просто систему сеток. Они также предоставляют JavaScript-плагины, правила CSS и элементы дизайна. В последнее время я работаю практически исключительно на Foundation. Не потому, что Bootstrap способен на меньшее, скорее потому, что Bootstrap предлагает так много опций для визуальной адаптации, что нам просто не нужно столько для наших проектов. За счет дополнительной функциональности Bootstrap шире. Bootstrap отличный, особенно если у вас в команде нет дизайнера и вы хотите использовать все встроенные элементы дизайна. Как бы то ни было, мне обычно просто нужны функциональные элементы CSS-фреймворка, а не элементы дизайна.

Светлана: Bootstrap также предлагает простецкий интерфейс, чтоб вырезать ненужные части фреймворка.

Хотя существуют и другие фреймворки, Bootstrap и Foundation могут удовлетворить практически 100% потребностей разработки. И, к счастью, довольно просто выучить оба этих фреймворка. Оба хорошо задокументированы и имеют большое сообщество активных пользователей, которые могут помочь и ответить на вопросы.

За CSS-фреймворками — будущее. Если вы пока не используете какой-нибудь из них, стоит серьезно задуматься над тем, чтобы приобщиться!

Выводы

Сейчас — увлекательное время для CSS и фронтенд-разработки. Благодаря (относительно) новым инструментам, таким как свойство флексбокс, и CSS-фреймворкам, способствующим нашему адаптивному (и отзывчивому) дизайну, сейчас создать и успешно запустить комплексные сайты просто, как никогда.

Элемент BODY

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

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

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

За цвет ссылок отвечают следующие атрибуты элемента BODY:

• alink – задает цвет активной ссылки;

• vlink – определяет цвет посещенной ссылки;

• link – устанавливает цвет непосещенной ссылки.

Цвета ссылок можно задать в HEX-формате или ключевыми словами. Ключевые слова имеет смысл использовать, если вы хотите применить стандартный цвет. Ну а если вы собираетесь устанавливать нестандартные цвета, придется воспользоваться HEX-форматом.

В примере из листинга 1.12 представлены оба варианта записи.

HTML и CSS


HTML – язык для браузера, который говорит что и как отображать.

Сразу перейдем к примерам. Создадим файл page.html со следующим содержимым:

Если открыть файл в браузере то увидем примерно следующее:

Все что было внутри угловых скобок и > оказалось скрыто. То были теги

для заголовка,

Все что оказалось внутри тега . , а это два параграфа с текстом

, стало дочерними элементами тега article .

Браузер отрисовывает страницу руководствуясь содержимым DOM. Схематично, выглядит это так:

Браузер берет первый элемент DOM дерева — тег h1 —, определяет положение этого блока на странице и размещает внутри него строку «Текст заголовка» . Затем он берет следующий элемент — тег

и повторяет свои действия. Очередь доходит до тега article , и с ним все несколько сложнее из-за наличия дочерних элементов. Определив горизонтальную границу блока article браузер переходит к отрисовке дочерних элементов — двух тегов p — сверху вниз, попутно вычисляя высоту блока article .

Хорошую статью с примерами и иллюстрациями DOM можно найти на Хабрахабре.

Атрибуты тегов

У каждого тега есть набор атрибутов влияющих на его поведение. Их можно сразу указать в HTML разметке страницы, либо позднее назначить с помощью JavaScript кода. Например, у ссылок есть атрибут href , он содержит URL адрес этой ссылки:

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

Кроме специфических атрибутов, как-то href для ссылки или value для поля ввода, есть набор универсальных атрибутов. Их можно использовать для любого тега.

style настраивает оформление тега: отступы, цвет, размер шрифта и прочее.

id назначает тегу уникальный идентификатор. Например:

Указанный id не может повторно использоваться в документе, первая глава «chapter1» может быть только одна. Атрибут id удобен для быстрой навигации по DOM дереву из JavaScript кода, см document.getElementById . Также полезен в качестве якоря на страницах.

class назначает тегу набор неуникальных идентификаторов. Используется для привязки стилей в CSS, удобен для навигации по DOM дереву в JavaScript коде. Например, вот так может выглядеть большая синяя кнопка на странице:

data-* присваивает тегу данные в формате JSON для последующей работы с ними из JavaScript кода. Подробно описано на сайте Mozilla Developer Network, MDN — здесь.

Шаблон HTML документа

HTML разметка обязана содержать минимальный набор служебных тегов. Без них браузер может некорректно отобразить страницу, верстка будет признана сломанной. Вот что должно быть в HTML документе:

Подробно структура документа разобрана на Структура HTML документа.

Стили

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

Рассмотрим пример. Для каждого тега на странице укажем border. На вкладке «Result» виджета JSFiddle виден результат отрисовки.

Другой пример. Выделим цитату на фоне остального текста.

Стили позволяют сильно изменить внешний вид тегов. Также можно изменить алгоритм их отрисовки. Размещение блоков на странице сверху вниз в том порядке, в каком теги встречаются в HTML разметке называется Normal layout flow. С помощью свойств position, float и display можно переключить движок браузера в другой режим. Для примера разместим блоки справа налево.

Набор правил по которым браузер вычисляет размер блоков/тегов с учетом padding, margin, border и прочих свойств называется CSS Box Model. С ним полезно ознакомиться.

Писать стили для HTML разметки не всегда просто. Если задача не имеет очевидного решения, начать поиски стоит со Stack Overflow. На этом сайте собрано большое количество рецептов по верстке.

Самый полезный инструмент в арсенале верстальщика — это Chrome DevTools. Он позволяет найти тег на странице, проверить его стили и дописать новые, узнать размер блока, отредактировать его содержимое и все это в интерактивном режиме. Знакомство стоит начать с inspecting the DOM and styles.

Наконец, важно заметить, что атрибут style хорош для чернового прототипирования и экспериментов, удобен когда стилей мало и они не используются повторно. В остальных случаях рекомендуется использовать механизм CSS. Он лучше масштабируется, позволяет создавать и повторно использовать библиотеки стилей, упрощает JavaScript код.

Cascading Style Sheets, они же каскадные таблицы стилей, позволяют привязывать стили к целым группам тегов. Например, можно разом изменить цвет всех ссылок на черный, использовать bold шрифт. Как это сделать:

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

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

Как видно из примера выше тег «Синяя кнопка» получил стили сразу двух селекторов .btn и .btn-blue . Классы и CSS правила можно смешивать в рамках одного тега, последовательность применения правил и приоритет описаны на странице Cascade and inheritance. Правила эти довольно запутанные, упрощенно их можно сформулировать так:

  • Стили описанные в атрибуте style считаются самыми приоритетными. Их уже не переопределить.
  • Чем специфичней селектор — чем больше в нем указано сведений о теге -, тем он приоритетнее.
  • В селекторе класс ценится выше названия тега. Селектор .btn специфичнее чем button .
  • Из двух одинаковых или одинаково специфичных селекторов побеждает тот который находится ниже в HTML документе.
  • Самый низкий приоритет у стандартных стилей браузера.

Примеры селекторов с пояснениями есть в том же туториале MDN:

Сайты, как правило, состоят из большого количества страниц. Чтобы не дублировать содержимое тега стили выносят в отдельный файл и затем подключают его внутри документа:

Браузер самостоятельно подгрузит файл style.css с сервера.

Во внешние CSS файлы стараются вынести весь код пригодный для повторного использования. В теге оставляют только стили специфичные для данной страницы.

С появлением мобильных устройств жизнь верстальщиков стала сложнее. Адаптация сайта под малый экран — занятие трудное. Места не хватает, кнопки и ссылки и ссылки приходится делать большими из-за тачскрина. Можно создать специальную версию сайта для смартфона, но это долго и дорого. В конечном счете пришли к следующему:

  • Сайт сначала верстают под экран смартфона, а уже затем адаптируют под большие экраны: растягивают элементы, добавляют отступы по краям страницы, размещают баннеры. Этот подход получил название «Mobile First».
  • В спецификации CSS3 появились media-queries. Часть правил активируется только при заданной ширине экрана браузера.

Например, можно увеличить размер шрифта на больших экранах и сделать его мельче для малых:

Для ознакомления полезно посмотреть больше примеров с media queries.

Еще одна древняя проблема это анимация HTML разметки: чтобы сообщения появлялись красиво и плавно, чтобы навигационное меню выезжало слева. Раньше все это делалось средствами JS, что приводило к низкой производительности. Браузеру сложно перерисовывать страницу десять раз в секунду. И вот, появилась CSS анимация. Она оптимизирована по производительности, почти не требует JS, работает «из коробки». Примеры можно посмотреть там же, на сайте MDN.

Со временем Веб становится все красочнее. Возможности браузеров и компьютеров растут, дизайнеры спешат привнести что-то новое, свежее. Теперь даже одностраничный лендинг требует многих тысяч строк кода CSS. Энтузиастов готовых писать такое раз за разом с нуля становится все меньше. Чтобы сократить объем работы придумали фреймворки. Это библиотеки с большим количеством стилизованных и хорошо подогнанных друг к другу элементов. Один из самых популярных — это Bootstrap. От фреймворка разработчик получает мощные механизмы адаптивной верстки, богатый набор стандартных элементов, инструменты для создания своих тем. Когда на одной чаше весов 10К строк глючного CSS, а на другой Bootstrap + 400 тривиальных строк кода, многие выбирают второй вариант.

Валидация верстки и CSS

Одна из частых проблем на сайтах — это сломанная верстка. Где-то забыли закрыть тег, где-то опечатались в названии стиля. Не всегда ошибки бросаются глаза, порой заметны они становятся только в других браузерах. Например, разрабатываешь под Chrome, а в Firefox все ломается, потому что движок webkit менее чувствителен к ошибкам верстальщика.

Для решения этой проблемы создали автоматические валидаторы верстки. Один из самых популярных это W3C HTML Validator. Все что нужно — это указать URL страницы сайта либо загрузить файл с HTML разметкой.

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

Форматирование кода HTML и CSS

Синтаксис позволяет использовать любое форматирование, браузер все проглотит. Однако, код также читают люди, и они куда более привередливы. Вот несколько идей как помочь им ориентироваться в разметке.

Не видно где закрываются теги, сложно понять что к чему относится. Вот так много лучше:

В качестве размера отступа в HTML, CSS и JS принято использовать 2 пробела, против 4х в Python.

CSS тоже должен быть пригоден для быстрой навигации по нему. Вот так плохо:

В разметке HTML и CSS также не стоит использовать табуляцию. Она по-разному отображается в текстовых редакторах и на GitHub. Лучше обозначать отступ двумя пробелами.

Правила оформления кода на проекте могут отличаться от рекомендованных, по историческим причинам. Важно придерживаться стиля принятого в команде. Для этого используют EditorConfig. Установи расширение для своей IDE/текстового редактора, оно автоматически подхватит настройки из файла .editorconfig в репозитории проекта. Для нового проекта можно воспользоваться настройками рекомендованными Devman.

Более полное руководство есть на сайте Академии HTML.

Что дальше

HTML надо знать, даже если вы занимаетесь только серверным программированием. Постоянно надо что-то оживить, доделать в шаблоне или распарсить.

Тегов существует огромное количество, и еще больше разных стилей к ним. Все их знать не обязательно. Часто встречаются 30-40 тегов, и они покрывают 99% потребностей.

Вот полезные ресурсы:

  • HTML Beginner Tutorial (en) – неплохой и достаточно короткий туториал.
  • Интерактивный курс «Основы HTML» на htmlacademy.ru – он больше, подробнее и полнее. Бесплатных уроков хватит для начала.
  • Отличный туториал по HTML от MDN – осторожно, много букв, на английском.
  • Туториал по CSS от MDN.

Получи опыт серьезной веб-разработки

Python, Git, API вКонтакте и Facebook, Django, Linux и не только. Выбери с какого модуля начать.

Размеры блочных элементов в CSS

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

При изучении блочной модели CSS мы разобрали, что свойства width и height устанавливают ширину и высоту внутренней области элемента (content area), которая может содержать текст, изображения и прочие элементы.

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

Рис. 99 Схема вычисления общей ширины и высоты элементов.

Общая ширина элемента вычисляется по формуле:

width (ширина) + padding-left (левый внутренний отступ) + padding-right (правый внутренний отступ) + border-left (левая граница) + border-right (правая граница).

Общая высота элемента вычисляется по формуле:

height (высота) + padding-top (верхний внутренний отступ) + padding-bottom (нижний внутренний отступ) + border-top (верхняя граница) + border-bottom (нижняя граница).

Допустим, у нас есть следующие стили для элемента

Для размещения элемента

Общая ширина элемента:

150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 5 пикселей (левая граница) + 5 пикселей (правая граница) = 180 пикселей .

Общая высота элемента:

150 пикселей (пользовательское значение высоты) + 10 пикселей (нижний внутренний отступ) + 10 пикселей (верхний внутренний отступ) + 5 пикселей (нижняя граница) + 5 пикселей (верхняя граница) = 180 пикселей .

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

Изменение модели вычисления ширины и высоты элементов

С выходом стандарта CSS 3 добавлено свойство box-sizing , оно позволяет изменить, применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов.

Для того, чтобы понять стоит ли нам использовать альтернативные способы вычисления ширины и высоты элементов, давайте рассмотрим пример, в котором создадим четыре блока одной ширины, при этом мы будем использовать процентные значения:

Обратите внимание на важный момент — все четыре блока размещены в одну строчку.

Это очень тонкий момент, дело в том, что когда вы используете display: inline-block браузер расценивает переносы строки как пробельный символ, и как следствие, добавляет после каждого блока 3-4px пустого пространства в зависимости от браузера и шрифта пользователя. По сути это является междусловным интервалом, так как блок расценивается в данном случае как слово. Может на данном этапе этот момент для вас не до конца понятен, просто запомните его, чтобы в последствии случайно не потерять пару часов, когда у вас будет «съезжать» какой-то блок, или список в панели навигации из-за вдруг появившихся «не понятно откуда пикселей». Я человек простой: вижу непонятные пиксели при display: inline-block – пишу элементы в линейку без пробелов.

В результате у нас должно получиться четыре разноцветных блока, расположенных в линейку:

Рис.100 Пример вычисления ширины и высоты элементов.

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

Теперь добавим стиль к нашему коду и посмотрим, что у нас из этого получится.

Как вы можете заметить на изображении ниже, нас ждет разочарование, так как наш макет «поплыл»:

Рис. 101 Пример вычисления ширины и высоты элементов в процентах.

Какие у нас есть варианты, чтобы исправить наш макет?

  1. Первый – брать в руки калькулятор и высчитывать проценты, которые стали занимать элементы в нашем документе.
  2. Второй – использовать альтернативную модель вычисления ширины и высоты элементов.

В нашем случае я считаю, что необходимо выбрать второй вариант:

Мы использовали CSS свойство box-sizing со значением border-box , что позволило нам изменить модель вычисления ширины и высоты элементов.

Отличительная особенность данной модели заключается в том, что значения свойства ширины (width) и высоты (height) включают в себя содержание элемента, границы (border) и внутренние отступы (padding).

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

Рис.102 Пример использования свойства box-sizing.

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

Значение content-box свойства box-sizing является значением по умолчанию и производит расчёт общей ширины и высоты элемента по классической схеме. На примере ширины:

150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 10 пикселей (левая граница) + 10 пикселей (правая граница) = 190 пикселей .

Что касается второго элемента, к которому мы применили свойство box-sizing со значением border-box , то пользовательское значение ширины и высоты элемента уже включают в себя содержание элемента, границы (border) и внутренние отступы (padding). В большинстве случаев применение свойства box-sizing со значением border-box предпочтительно на страницах, так как делает очевидным конечные размеры элемента и позволяет избежать некоторых непредвиденных ситуаций рассмотренных выше.

Результат нашего примера:

Рис. 103 Пример изменения модели вычисления ширины и высоты элементов (свойство box-sizing).

Управление переполнением блочных элементов

В процессе верстки у вас будут возникать такие ситуации, когда содержимое элемента будет отображаться за пределами границ элемента. По умолчанию браузер отображает такое содержимое (переполнение элемента отображается), что в некоторых случаях приводит к визуальным ошибкам. За такое поведение браузера отвечает CSS свойство overflow. Рассмотрим его возможные значения:

Значение Описание
visible Переполнение не обрезается, содержимое выходит за пределы размеров элемента. Это значение по умолчанию.
hidden Переполнение обрезается (контент, который выходит за размеры будет невидимым).
scroll Переполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров.
auto Если переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров.

Давайте рассмотрим следующий пример:

В данном примере мы разместили четыре блока фиксированной ширины и высоты, для которых указали различные значения CSS свойства overflow:

  • Первый блок (значение visible ) – содержимое выходит за границы элемента (значение по умолчанию).
  • Второй блок (значение hidden ) – содержимое, которое переполняет элемент обрезается.
  • Третий блок (значение scroll ) – переполнение обрезается, но добавляется полоса прокрутки.
  • Четвертый блок (значение auto ) – как и при значении scroll , только полоса прокрутки будет добавлена автоматически, если произойдет переполнение блока по определенной оси (x — горизонтальной, либо y — вертикальной), а не отображается на странице постоянно.

Результат нашего примера:

Рис. 104 Пример управления переполнением элемента.

Переполнение по определённой оси

С выходом стандарта CSS 3 были добавлены свойства, которые способны управлять по отдельности горизонтальным переполнением (ось x) – overflow-x и вертикальным переполнением (ось y) – overflow-y . В отличии от свойства overflow, данные свойства отвечают только за одну ось (x, либо y) при этом значения и синтаксис аналогичен свойству overflow (таблица выше).

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

HTML против Body в CSS

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

Нажав кнопку «Принять и продолжить», вы соглашаетесь с Политики конфиденциальности

Мы запустили рейтинг зарплат интернет-маркетологов! Прими участие в анонимном опросе.

How-to – Читать 5 минут – 29 марта 2020

Тег body — неотъемлемая часть любой HTML-страницы, необходимая для обозначения границ основного содержимого, которое показывается пользователям. Упрощенно HTML-страница имеет следующую структуру:

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

body — все содержимое страницы, доступное пользователям.

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

Топ-пост этого месяца:  Как продвинуть сайт самостоятельно, улучшая внутреннюю оптимизацию под ключевые слова и удаляя

Добавить комментарий