Span html что это

Строчные элементы

Разница между блочными и строчными элементами следующая.

В примере 1 показано использование тега для выделения отдельных слов.

Пример 1. Применение строчных элементов

Результат примера показан ниже (рис. 1).

Span html что это. 093 1. Span html что это фото. Span html что это-093 1. картинка Span html что это. картинка 093 1

Рис. 1. Текст, оформленный с помощью стилей

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

Пример 2. Свойство display

Результат примера приведен на рис. 2.

Span html что это. 093 2. Span html что это фото. Span html что это-093 2. картинка Span html что это. картинка 093 2

Рис. 2. Замена блочного элемента на строчный

В данном примере блочный тег

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

в виде строчного элемента. В принципе, аналогичным решением будет использовать вместо

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

Пример 3. Наложение слоев

Результат примера представлен на рис. 3.

Span html что это. 093 3. Span html что это фото. Span html что это-093 3. картинка Span html что это. картинка 093 3

Рис. 3. Положение рисунка относительно текста

В примере 3 можно вообще отказаться от добавления тега

Пример 4. Использование тега SPAN

Результат примера показан ниже (рис. 4).

Span html что это. 093 4. Span html что это фото. Span html что это-093 4. картинка Span html что это. картинка 093 4

Рис. 4. Положение рисунка относительно текста

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

Резюме

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

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

Источник

Тег SPAN

БраузерSpan html что это. browser ie. Span html что это фото. Span html что это-browser ie. картинка Span html что это. картинка browser ieInternet ExplorerSpan html что это. browser netscape. Span html что это фото. Span html что это-browser netscape. картинка Span html что это. картинка browser netscapeNetтscapeSpan html что это. browser opera. Span html что это фото. Span html что это-browser opera. картинка Span html что это. картинка browser operaОпераSpan html что это. browser safari. Span html что это фото. Span html что это-browser safari. картинка Span html что это. картинка browser safariSafariSpan html что это. . Span html что это фото. Span html что это-. картинка Span html что это. картинкаMozilla Firefox
Версия5.56.07.08.08.09.07.08.09.29.51.32.03.11.52.03.0
ПоддерживаетсяДаДаДаДаДаДаДаДаДаДаДаДаДаДаДаДа
ШТМЛ:3.24XШТМЛ:1.01.1

Описание

Тег предназначен для определения встроенных элементов объекта. В отличие от блочных элементов, таких как

,

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

Синтаксис

Закрывающий тег

Пример 1. Использование тега

ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ниже.

Span html что это. tag span. Span html что это фото. Span html что это-tag span. картинка Span html что это. картинка tag span

Рис. 1. Вид контента, оформленного с помощью тега и стилей

Источник

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *