Тег предназначен для определения встроенных элементов объекта. В отличие от блочных элементов, таких как
,
) можно изменить цвет и размер первой буквы, если добавляем начальный и конечный тег и определить для него стиль контента. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавляем параметр 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:
Для этого примера мы используем
Вообще, хорошей идеей будет не злоупотреблять тегом
С нашими новыми знаниями о блоках давайте переделаем код нашей формы так, чтобы поля формы и их описания красиво отображались друг под другом.
Это выглядит чуть сложнее, но единственное что мы сделали, так это добавили теги
Ещё раз, давайте сравним новый (справа) и старый код (слева).
А теперь посмотрим, как новый код отображается в браузере!
Здравствуйте, уважаемые читатели сайта Uspei.com. Сегодня мы успеваем на финишную прямую по изучению базового курса HTML. Сегодня мы изучим теги DIV и SPAN, которые нам понадобятся при изучении курса CSS. Это логические теги и они никак сами по себе не проявляют себя, но (!), тем не менее, это одни из самых главных тегов в CSS. Давайте рассмотрим на примере.
Если мы объединим какой-либо текст тегом
Вы будете приятно удивлены, когда узнаете, что для HTML справедливо правило 80/20, которое означает, что вам не придется изучать весь язык до последнего винтика. Но, в то же время, полученных из курса знаний вам с лихвой хватит для того, чтобы уверенно делать сайты. К стати для этого у меня есть целый раздел о том, как самому сделать сайт.
Я думаю, что вы понимаете всю силу этого тега. Вам придется использовать его чаще других. Если вы посмотрите исходный код ЛЮБОГО сайта, то вы увидите, что этого тег является практически основным. Данным тегом можно задать фоновое изображение, изменить размеры блока, а также много много других изменений элементов.
Тег span
Но это больше относится к CSS, который мы будем проходить в будущем.
Очередной выпуск рассылки будет посвящен элементу span и элементу div в HTML.
Сегодня Вам будет предложено 2 версии урока. Одна в текстовом виде – ее Вы видите перед своими глазами, а второе ВИДЕО – ее Вам нужно будет скачать.
Ссылка на видео версию урока:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
На наш взгляд видео версия Вам будет более понятна.
Так, про дополнительные элементы html…
Допустим вам нужно выделить какое-нибудь отдельное слово в тексте (предположим другим цветом и фоном), или чтобы картинка и текст, относящийся к ней, были сверху и справа в ячейке таблицы, а основное содержимое страницы, допустим в низу и ближе к левому краю. По поводу первого примера скажу, что можно это сделать тегом с набором нужных параметров, но он относится к запрещенным тегам (новые браузеры его могут не поддерживать), да и свойства замены фона у него нет.
Для подобных случаев и предусмотрены два специфических тега, которые по сути ничего не делают сами по себе. Но при применении нужных стилей к ним, можно добиться чего угодно. Можно вообще используя только два этих тега и применяя к ним стили, сделать всю страницу сайта.
Какая между ними разница, если используются они для одного и того же?
Элемент div — это блочный тег, и в нем могут быть любые нам известные теги (списки, картинки, таблицы…).
Элемент span — это строчный тег, и он применим исключительно к тексту (выделить фрагмент текста другим цветом).
Стили, которые применимы к данным тегам – это все нами изученные стили. Ограничений на применение каких-либо стилей нет.
Давайте рассмотрим стили, которые наиболее типичны для данных тегов. Они же применимы ко всем остальным тегам, и используются так же, просто чаще их используют с этими тегами (особенно к
Первое с чего хотелось бы начать это с позиционирования элементов.
position — устанавливает или определяет позицию элемента.
static — по умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам.
absolute — позиция объекта определяется относительно позиции родительского объекта или относительно объекта body. relative — Позиция объекта определяется смещением от позиции, в которой он появился по умолчанию.
left/top — устанавливает или определяет позицию элемента относительно левого/верхнего края.
Internet Explorer
Netтscape
Опера
Safari
Mozilla Firefox
