Тег предназначен для определения встроенных элементов объекта. В отличие от блочных элементов, таких как
,
) можно изменить цвет и размер первой буквы, если добавляем начальный и конечный тег и определить для него стиль контента. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавляем параметр class или id с именем селектора.
Синтаксис
Закрывающий тег
Пример 1. Использование тега
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ниже.
Рис. 1. Вид контента, оформленного с помощью тега и стилей
Разница между блочными и строчными элементами следующая.
В примере 1 показано использование тега для выделения отдельных слов.
Пример 1. Применение строчных элементов
Результат примера показан ниже (рис. 1).
Рис. 1. Текст, оформленный с помощью стилей
В данном примере тег и стили используются для выделения различными способами фрагментов текста. В частности, выделение происходит за счет фонового цвета, рамки вокруг текста и сменой его цвета.
Пример 2. Свойство display
Результат примера приведен на рис. 2.
Рис. 2. Замена блочного элемента на строчный
В данном примере блочный тег
отображается на веб-странице как строчный элемент. Это требуется для того, чтобы ширина фона и рамки равнялась ширине самого текста с учетом полей. А, как известно, ширина блочных элементов не зависит от ширины содержимого, поэтому и приходится представлять тег
в виде строчного элемента. В принципе, аналогичным решением будет использовать вместо
Строчные элементы применяются не только для управления видом текста, но также и при верстке веб-страниц, например, для изменения положения слоев. В примере 3 показано, как рисунок накладывать поверх блока с текстом.
Пример 3. Наложение слоев
Результат примера представлен на рис. 3.
Рис. 3. Положение рисунка относительно текста
В примере 3 можно вообще отказаться от добавления тега
Пример 4. Использование тега SPAN
Результат примера показан ниже (рис. 4).
Рис. 4. Положение рисунка относительно текста
За счет того, что тег не начинается с новой строки, рисунок и текст в данном примере находятся на одной линии. Поэтому вертикального отступа под текстом, как в случае предыдущего примера, здесь нет. Зато появился отступ сверху.
Резюме
Для верстки строчные элементы применяются реже, чем элементы блочные. Это связано в основном с тем, что внутрь строчных элементов не допускается вкладывать контейнеры
и подобные широко распространенные теги. Тем не менее, блочные и строчные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих веб-страниц.
— элементы, которые относятся к одной группе называемой строчно-блочной. Такие элементы могут иметь разные размеры, однако браузер всегда отображает их горизонтально подобно тексту. В этой главе мы узнаем о различных группах элементов в соответствии с тем, как они выкладываются на странице.
Для начала давайте разберём, как отображать один элемент под другим по вертикали. Мы в основном должны сказать браузеру: «Эй, мы хотим контейнер, который может стыковаться вертикально». К счастью, это тег контейнера известен как
Чтобы увидеть как работают элементы
Согласно приведённым выше условиям, HTML будет выглядеть следующим образом.
Посмотрим на это в браузере.
Похоже на один большой прямоугольник. Как насчёт отделить теги
Я добавил свойство margin-bottom (выделено выше), чтобы отделить каждый
Отлично! Браузер отображает эти «блоки» один под другим, в отличие от нашего предыдущего примера с формой, где элементы выводились в одну строку.
В чём различие? Когда дело доходит до отображения тегов, браузер распознаёт три группы элементов:
Строчные элементы не вызывают перевода на новую строку и показывают один элемент рядом с другим по горизонтали. Блочные элементы устанавливаются как блоки, которые укладываются по верхней части друг друга и никогда не отображаются рядом по горизонтали, если мы не используем магические трюки в CSS (о которых узнаем в следующей главе). Строчно-блочные действуют в качестве строчных элементов (отображаются рядом друг с другом), но отличаются от них тем, что им можно задать размер. К примеру, поле
может отображаться как большой прямоугольник, но при этом занять пространство за пределами одной строки текста.
Позвольте мне поделиться с вами некоторыми примерами элементов, которые можно классифицировать в соответствии с одной из этих трёх групп.
Браузер отобразит в одну линию:
Однако можно изменить это поведение, добавив одну строку в CSS:
Для этого примера мы используем
Вообще, хорошей идеей будет не злоупотреблять тегом
С нашими новыми знаниями о блоках давайте переделаем код нашей формы так, чтобы поля формы и их описания красиво отображались друг под другом.
Это выглядит чуть сложнее, но единственное что мы сделали, так это добавили теги
Ещё раз, давайте сравним новый (справа) и старый код (слева).
А теперь посмотрим, как новый код отображается в браузере!
Html теги div и span — элементы блочной верстки сайта
Доброго здоровья, дорогие друзья! Пришло время рассказать о двух важнейших html тегах div и span, которые являются определяющими при блочной верстке сайта. Я уже упоминал, что в достопамятные времена сайты верстались с помощью таблиц.
Соответственно, вместо некоторых атрибутов html тегов для каждого элемента вебстраницы прописываются правила CSS, в каждом из которых присутствуют селектор и свойства с определенными значениями. Это позволяет очистить html код документа, что приводит к успешному решению, по крайней мере, сразу двух задач. Во-первых, значительно улучшает читабельность html кода. Во-вторых, уменьшает время загрузки страниц ресурса, что, безусловно, дает возможность должным образом оптимизировать свой проект, в частности, повысить качество поведенческих факторов ранжирования, так как долго загружаемые вебстраницы отпугивают посетителей.
Использование html тегов и их атрибутов, в том числе div и span, строго регламентировано Международным Консорциумом. Соответствие принятым требованиям документа html можно проверить с помощью W3C validator. С другой стороны, можно также проконтролировать валидность CSS документа. Таким образом, мы уяснили, для чего был создан CSS. Резюмируя вышесказанное, представлю схематически, как с помощью тега div происходит блочная верстка сайта посредством присоединения стилей CSS к html документу.
Конечно, вы понимаете, что это очень упрощенная схема, при верстке сайта используются все теги, которых немало, однако на рисунке я попытался акцентировать основополагающую роль элемента div при блочной верстке. С помощью тега div создаются блоки (контейнеры), которые вкладываются один в другой.
Важность тега div подчеркивает тот факт, что он не используется в чистом виде, а только с атрибутами id (идентификатор) или class, значением которых служит селектор, свойства которого представлены в соответствующем файле со стилями.
Отличие id и class заключается в том, что идентификатор id должен быть представлен в коде лишь один раз (он представляет уникальный элемент, для которого задаются свои стили оформления). Атрибут class позволяет связать определенный тег со стилями (то есть ко всем данным тегам, которых может быть несколько, будет применяться данный набор стилей). В значении допускается указывать несколько классов, разделяя их пробелами. А теперь рассмотрим код одной из страниц и посмотрим на структуру блочной верстки с использованием контейнеров div:
Как видите, html код, представленный слева, состоит из множества контейнеров, образованных тегом div, вложенных друг в друга, причем каждый со своим идентификатором и (или) классом. Каждому элементу соответствует свой набор стилей CSS, отображенных справа. Конечно, структура html документа состоит не только из контейнеров div, в нее входят и другие теги, однако элемент div вносит решающий вклад в корректное отображение вебстраницы в браузере.
Также, кроме атрибутов id и class, для тега div доступны другие универсальные атрибуты (которые работают практически со всеми тегами) и события. Но наиболее широко используемыми являются все-таки id и class.
В файле style.css задаем соответствующие этому элементу стили.
Пожалуй, на сегодня все. Целью этой статьи было дать вам представление о схеме осуществления блочной верстки сайта, выделив значение блочного тега div и строчного элемента span. Также я считаю этот пост своеобразным мостиком между изучением основ html и стилей CSS, который должен был подтвердить их неразрывную связь. А чтобы научиться быстро применять эти знания на практике, подписывайтесь на получение новых материалов блога.
div, span и display — Основы HTML, CSS и веб-дизайна
В этом уроке мы познакомимся с принципами, по которым элементы выводятся на страницу и получают определённый размер.
display
Здесь к слову display можно относиться как к глаголу: to display — показывать, выводить на экран.
Всего у этого свойства 20 возможных значений, но прямо сейчас остальные не так важны.
Разные браузеры могут задавать разные стили по умолчанию, и иногда эти стили могут отличаться. Поэтому одна и та же страница в чем разница» rel=dofollow»>страница может выглядеть по-разному в разных браузерах. Это в основном касается размеров и отступов. Для решения этой проблемы существуют так называемые CSS Reset — наборы CSS-стилей, которые «сбрасывают» браузерные стили.
div & span
Элемент p имеет семантическое значение. Он определяет абзац текста.
Такой элемент не стоит использовать там, где это по смыслу не имеет значения. Например, не стоит помещать в p меню с кнопками для навигации по сайту.
Два самых используемых элемента — div и span — не имеют семантического значения. Они нужны исключительно для структуры и стилей.
Конечно, вы можете изменить эти свойства в своём CSS, но лучше так не делать. В целом, лучше не менять базовые свойства у типов элементов, а добавлять классы по необходимости.
div обычно используется для определения какого-то крупного блока на странице. А span — для небольшого элемента на строке.
Блочная модель
Каждый элемент на странице — прямоугольник. Это, пожалуй, самое важное утверждение в вёрстке веб-страниц. В примере в начале этого урока это можно заметить: мы задали параграфам фоновый цвет, и стало видно: каждый параграф — это прямоугольник.
У каждого прямоугольника есть несколько свойств, влияющих на размер:
Давайте сделаем элемент, в котором явно видно все эти части:
See the Pen Div Box by Hexlet (@hexlet) on CodePen.
Сколько же места требуется всему элементу? Нужно сложить показатели:
Границы и отступы можно задать свои для каждой из сторон:
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Internet Explorer
Netтscape
Опера
Safari
Mozilla Firefox
