Как использовать HTML и CSS для создания вкладок и интервалов

Как пробелы в HTML обрабатываются браузерами

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

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

Интервал в печати

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

Почему кто-то использует вкладки?

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

Использование CSS для создания вкладок и интервалов HTML

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

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

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

Поля, отступы и текстовые отступы

Наиболее распространенные способы создания интервалов с помощью CSS – это использование одного из следующих стилей CSS:

  • поле
  • набивка
  • отступ текста

Например, вы можете сделать отступ в первой строке абзаца, например, в виде вкладки, с помощью следующего CSS-кода (обратите внимание, что это предполагает, что к вашему абзацу прикреплен атрибут класса «first»):

  p.first { 
текстовый отступ: 5em;
}

Этот абзац теперь будет иметь отступ около пяти символов.

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

Перемещение текста более чем на один пробел без CSS

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

Чтобы использовать неразрывный пробел, вы просто добавляете

 & nbsp; 

столько раз, сколько вам нужно в вашей HTML-разметке.

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

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

Оцените статью
Solutics.ru
Добавить комментарий