Значение и применение
Теги <div> и <span> представляют из себя универсальные пустые контейнеры, которые необходимо заполнить каким-либо содержанием, либо сгруппировать вложенные элементы для их дальнейшей стилизации средствами CSS, и при необходимости динамически манипулировать ими с использованием скриптов, например, на таком языке программирования как Javascript.
Обращаю Ваше внимание на то, что элементы <div> и <span> сами по себе не оказывают никакого влияния на другие элементы страницы.
Тег <div> определяет любой отдельный блок содержимого и предназначен для деления веб-страницы на фрагменты. Вы можете объединить любой набор логически связанных элементов в единственном блоке <div>.
Этот элемент является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину. Не так давно, этот элемент занимал абсолютный топ, посвященный делению страницы на логические составляющие, но с приходом HTML 5 было добавлено достаточно семантических элементов, которые позволяют в некоторых ситуациях заменить тег <div> на более осмысленный.
Прочитать о разметке страницы в HTML 5 вы можете в следующей статье учебника: «Теги разметки страницы».
В отличии от блочного элемента <div> тег <span> является строчным и применяется к внутренним (inline) элементам страницы, то есть к словам, фразам, которые находятся в пределах абзаца или небольшого фрагмента текста, оглавления и тому подобное.
Тег <span> вы можете использовать для таких задач как:
- Выделение участка текста определённым цветом, фоном или даже фоновым изображением.
- Изменение отдельным словам или фразам размера шрифта, семейства шрифта или типа шрифта.
- Создание различных форматирующих стилей для выбранного участка текста.
- Использование скриптовых языков программирования к выбранным текстовым участкам, например подсветка синтаксиса кода и так далее.
Пример использования
<!DOCTYPE html> <html> <head> <title>Теги <div> и <span></title> </head> <body> <div style = "color:green"> <p>Абзацы мы объединили тегом <div>, а это <span style = "color:red">слово</span> мы заключили тегом <span>.</p> <p>С помощью встроенной таблицы стилей мы выделили это слово красным цветом, а блок текста получил зеленый цвет.</p> </div> <div style = "background-color:khaki"> <p>Обратите внимание, что тег <div> является блочным и это означает, что его содержимое всегда будет начинаться с новой строки, при этом элемент занимает всю доступную ширину.</p> <p>Этот блок тоже содержит два абзаца.
помощью встроенной таблицы стилей мы указали для всего блока цвет заднего фона - khaki, а для этога <span style = "background-color:orangered">слова</span> orangeRed (мы заключили его в тег <span>).</p> </div> </body> </html>
В этом примере мы:
- Блочными элементами <div> создали два блока, содержащие по два абзаца текста внутри (элементы <p>).
- Для первого блока с помощью встроенной таблицы стилей мы указали, что все элементы получат цвет текста зеленый, а одно слово, которое мы поместили внутри тега <span> красный.
- Для второго блока с помощью встроенной таблицы стилей мы указали, что весь блок получит цвет заднего фона хаки, а одно слово, которое мы поместили внутри тега <span> оранжево-красный.
Результат нашего примера:
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
basicweb.ru
Атрибуты
Личные атрибуты: нет.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: текст (строки).
Модель тега: inline (встроенный, уровня строки).
Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).
Открывающий тег: необходим. Закрывающий тег: необходим.
Синтаксис
<span>содержимое</span>Пример HTML: применение тега SPAN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD H.
gt; <body> <p>Одна из ошибок начинающих создателей сайтов — избыточное использование на странице <span class="bold">жирного</span>, <span class="ital">курсивного</span> шрифтов, написание текста только <span class="sm_cap">заглавными</span> буквами и т.д. Порой они вообще весь текст выводят <span class="bold">жирным</span> шрифтом или <span class="sm_cap">прописными</span> буквами, думая, что привлекут больше внимания посетителей. На самом деле такие сайты вызывают больше отторжения, например текст из одних <span class="sm_cap"><span class="bold">заглавных</span></span> букв гораздо сложнее читать, чем обычный.</p> </body> </html>Результат примера
Результат. Применение тега SPAN.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
spravka.seodon.ru
Группирование с помощью <span>
Элемент <span> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <span> может использоваться для визуальных эффектов применимо к отдельным блокам текста.
Пример — цитата из Бенджамина Франклина:
Скажем, мы хотим, чтобы Mr. Franklin увидел все преимущества бодрствования выделенные красным цветом. Для этого мы можем отметить эти преимущества с помощью <span>. Каждому блоку span будет присвоен class, который затем можно определить в нашей таблице стилей:
В CSS:
- Показать пример
Разумеется, вы можете также использовать id для определения стиля <span>-элементов. Не забывайте только, что вы должны установить уникальный id каждому из трёх <span>-элементов, как мы говорили в прошлом уроке.
Группирование с помощью <div>
В то время как <span> используется в элементах уровня блока, как в предыдущем примере, <div> применяется для группирования одного или более блок-элементов.
Кроме этого отличия, группирование с помощью <div> работает более или менее аналогично. Посмотрим на пример — два списка президентов США, сгруппированных по их политической принадлежности:
В нашей таблице стилей мы можем использовать такое же группирование, как и раньше:
- Показать пример
В этих примерах мы использовали <div> и <span> для определения очень простых вещей — цвета текста и фона. Но оба элемента несут в себе потенциал для намного более сложных операций, таких как…. Однако это — не для нашего урока. Позднее мы рассмотрим этот вопрос в данном учебнике.
Резюме
В Уроках 7 и 8, вы узнали о селекторах id и class и об элементах span и div.
Теперь вы должны уметь, более или менее, группировать и идентифицировать все части документа, что уже является большим шагом в освоении CSS. В Уроке 9 мы дадим понятие Боксовой модели.
<< Урок 7: Идентификация и группирование элементов (class и id)
Урок 9: Боксовая модель >>
ru.html.net
Поддержка браузерами
Описание
HTML тег <span> является строчным элементом и представляет из себя контейнер для текста. Он используется в ситуациях, когда нужно изменить стиль для части текста или отдельного слова, не помещая их при этом в блочный элемент. Сам по себе он не имеет ни какого-либо визуального представления ни семантического значения, но при использовании совместно со стилями CSS он является мощным инструментом для форматирования, то есть он сообщает браузеру применить правила стилей ко всему, что находиться в пределах его диапазона (внутри него).
Приведем несколько примеров использования тега <span>:
- выделение части текста цветом, изменение размера или шрифта
- добавление цветного фона или фонового изображения к тексту
- заключение фрагмента текста в рамку, подчеркивание или добавление тени
- манипулирование содержимым с помощью скриптов
Атрибуты
Тег <span> поддерживает Глобальные атрибуты и События
Стиль по умолчанию
Нет.
Пример
<p>У моей кошки <span style="color: lightblue;">светло синие</span> глаза.</p>
Результат данного примера в окне браузера:
puzzleweb.ru
В этом уроке мы познакомимся с принципами, по которым элементы выводятся на страницу и получают определённый размер.
display
У элементов есть свойство display. Оно задаёт то, как элемент выводится на экран.
Здесь к слову display можно относиться как к глаголу: to display — показывать, выводить на экран.
See the Pen Block and inline by Hexlet (@hexlet) on CodePen.
-
display: blockначинается с новой строки и занимает всю ширину -
display: inlineначинается в любом месте и занимает столько ширины, сколько нужно для помещения содержания
Всего у этого свойства 20 возможных значений, но прямо сейчас остальные не так важны.
Браузер обычно применяет базовые стили по умолчанию ко многим элементам. Например, элемент p по умолчанию имеет display: block.
Разные браузеры могут задавать разные стили по умолчанию, и иногда эти стили могут отличаться. Поэтому одна и та же страница может выглядеть по-разному в разных браузерах. Это в основном касается размеров и отступов. Для решения этой проблемы существуют так называемые CSS Reset’ы: наборы CSS-стилей, которые «сбрасывают» браузерные стили.
Вот пример такого reset’a.
div & span
Элемент
p имеет семантическое значение. Он определяет абзац текста.
Такой элемент не стоит использовать там, где это по смыслу не имеет значения. Например, не стоит помещать в p меню с кнопками для навигации по сайту.
Два самых используемых элемента — div и span — не имеют семантического значения. Они нужны исключительно для структуры и стилей.
-
div— это block-level элемент, у него свойствоdisplay: block. -
span— это inline-level элемент, у него свойствоdisplay: inline.
Конечно, вы можете изменить эти свойства в своем CSS, но лучше так не делать. В целом, лучше не менять базовые свойства у типов элементов, а добавлять классы по необходимости.
div обычно используется для определения какого-то крупного блока на странице. А span — для небольшого элемента на строке.
<div class="info"> <p> После Второй мировой войны <span class="city">Нью-Йорк</span> стал одним из неоспоримых мировых городов-лидеров. </p> <p> Строительство штаб-квартиры ООН в Нью-Йорке символизировало уникальное политическое значение города. </p> </div>
ru.hexlet.io
Написано Arnusha Прочитать цитируемое сообщение
HTML & CSS — серия 1
Пост писался для Яндекса в основном,всего их 5 серий.
Но там много полезного и для Ли.ру,и потому решила выбрать
у автора,что здесь будет полезно и показать вам!Все 5 серий
полезны как для начинающих,так и для опытных пользователей.
Сегодня 1 серия о самых простых тегах.Еще раз спасибо Проксима.
<td><table border=»2″ background=»https://imgprx.livejournal.net/8635b431fce08d546c89fad818644737c4dbfd88/wsMzV2vMqzO_rVEoXUfu7512ddbfpzz_LgMs4bFeuhrtIR5BcDmYr5i4fquqoYxeXQSERlW5lfa3PLbvcOQdKESeGlbcuiw1elbcTZnY8Fs» cellpadding=»4″ cellspacing=»3″ width=»650″>
Заголовки
Для
оформления заголовков используются теги <h1>…<h6>
С этим думаю всем понятно,это не сложно.Далее
Гарнитура (вид) и цвет шрифта Здесь есть два способа. Второй будет описан позднее. Первый — используется тег
<font>
с атрибутами face и color, соответственно:
шрифт Verdana
<font face=»Verdana»>шрифт Verdana</font>
красный шрифт
<font color=»red»>красный шрифт</font>
шрифт цвета MidnightBlue
<font color=»MidnightBlue»>шрифт цвета MidnightBlue</font>
шрифт цвета MidnightBlue
<font color=»#191970″>шрифт цвета MidnightBlue</font>
Цвет имеет название и цифровое значение, как видно в этом примере
(MidnightBlue=#191970). О цветах можно написать очень много, но я
остановлюсь на одной ссылке:Подбор цвета. Для использования подходят web-safe и web-smart цвета.
Форматирование текста: использование тега <span> и атрибута style (1)
Тег <span> относится к выделяемому (форматируемому) фрагменту текста:
<span…>текст</span>. Сразу замечу, что аттрибуты
(свойства), работающие с тегом <span>, могут применяться также с
тегами <p> и <div>. Однако тег <p> применяется к
абзацу, что не всегда нам подходит (хотя при форматировании абзаца
рационально использовать именно его). Тег <div> можно применять
так же, как и <span> — это скорее дело вкуса. Он имеет более
широкую область применения и обладает рядом дополнительных возможностей.
Но это уже не относится к форматированию текста. Поэтому для
определённости остановимся на <span>.Запись
<span>текст</span> лишена какого-либо смысла сама по себе.
Тег <span> предназначен для того, чтобы приписать тексту
какое-либо свойство. Вот их-то я сейчас попытаюсь перечислить в
более-менее логическом порядке.Цвет шрифта
Цвет шрифта можно задать с помощью тега <font>, о чём говорилось выше. Теперь воспользуемся тегом <span> и атрибутом style:
красный шрифт — <span style=»color:red»>красный шрифт</span>
Точно так же можно задавать и цифровые значения цветов (подробнее о них см. выше.
Гарнитура (вид) шрифта
О способе задать гарнитуру (вид) шрифта с помощью тега <font> также шла речь прошлый раз.
Сейчас рассмотрим второй способ — с использованием конструкции
<span style=»font-family:***»>шрифт</span>
На место ***
необходимо подставить гарнитуру (вид) шрифта. Как правило, подставляют
название не определённого шрифта, а целого семейства шрифтов, например, Verdana, Times и др. Получаем:шрифт Verdanaшрифт Times
Размер шрифта
Для указания размера шрифта используется конструкция
<span style=»font-size:***»>шрифт</span>
Размер
шрифта может задаваться различными способами. Пожалуй, самый наглядный и
простой — подставить вместо *** одно из следующих семи значений:xx-large, x-large, large, medium, small, x-small, xx-small.
Результат:
очень-очень крупный шрифт
очень крупный шрифт
крупный шрифт
средний шрифт
мелкий шрифт
очень мелкий шрифт
очень-очень мелкий шрифтМожно указывать размер шрифта способом, хорошо знакомым из Word — в пунктах (pt). 1 пункт равен 1⁄72 дюйма. Примеры:
12pt
36pt
Значения 12pt, 36pt в этих примерах подставляются на место *** в общей формуле <span style=»font-size:***»>шрифт</span>. Также можно использовать и пиксели:
шрифт 12px
шрифт 36pxПриведённые выше размеры являются абсолютными. Но размер шрифта можно задать и относительным образом — в процентах:
шрифт размера 150% от исходного<spant style=»font-size:150%»>шрифт размера 150% от исходного</span>
или по отношению к ширине буквы «m» в исходном шрифте (соответствующая единица измерения называется em):
шрифт размера 1,5em от исходного<span style=»font-size:1,5em»>шрифт размера 1,5em от исходного</span>
Вес (насыщенность) шрифта
Это — то, что можно задать с использованием простого тега <strong>
жирный текст<strong>жирный текст</strong>
С помощью <font> это делается так:жирный шрифт
<span style=»font-weight:bold»>жирный шрифт</span>
Преимущество такого способа в том, что наряду со значением веса шрифта bold можно использовать также значения bolder и lighter, получая шрифт «разной жирности» (в данном случае речь идёт об относительных значениях). А по умолчанию используется значение normal — обычный шрифт.
Стиль шрифта
Kурсив можно получить как с использованием тега <em>, так и следующим способом:
курсив<span style=»font-style:italic»>курсив</span>
Вместо font-style:italic можно написать font-style:oblique, и тогда должен получиться не курсив, а наклонный («угловатый») шрифт. Но это не всегда работает.
Капитель
Напоследок воспользуемся font-variant, чтобы сделать все буквы в нашем фрагменте текста прописными (такой вариант шрифта называется капителью):
капитель<span style=»font-variant:small-caps»>капитель<
/span>
А вот — пример использования нескольких свойств сразу:
наш шрифт <span style=»color:green; font-family:Verdana; font-size:150%; font-weight:bold; font-style:italic; font-variant:small-caps»>наш
шрифт</span>
Спасибо Проксима
</td></table>
Оригинал записи и комментарии на LiveInternet.ru
77tat.livejournal.com
Здравствуйте уважаемые начинающие веб-мастера.
Эту часть мы начнём со знакомства с двумя новыми тегами. Это теги <div> и <span>. Принадлежат они к логическому уровню, то есть явно себя не проявляют.
Но, при их помощи, можно создавать контейнеры, на которые потом очень удобно воздействовать средствами CSS.
Их можно делать видимыми и не видимыми, можно задавать им рамки и размещать в различных частях экрана.
Вы это поймёте на практике, а пока запомним следующее: <div></div> – это блочный элемент, и внутри него могут заключаться любые другие элементы, и он всегда начинается с новой строки.
А <span></span> – это встроенный элемент, и внутри его может размещаться только текст, или ещё встроенный элемент, и расположить его можно в любой части текста.
Одним из замечательных свойств тега <div>, является то, что его можно располагать внутри другого дива,хоть он и блочный элемент.
Именно благодаря этой особенности, и создаётся блочный каркас сайта.
Если взглянуть на код блочного шаблона, то видно, что он весь состоит из дивов, и вложены они друг в друга по нескольку раз.
<body> <div id="wrapper"> <div id="header"></div> <div id="sidebar1"></div> <div id="blok"> <div class="sidebar2"> <div class="dva"></div> <div class="dva1"></div> <div class="dva2"></div> </div> <div class="sidebar3"> <div class="tri"></div> <div class="tri1"></div> <div class="tri2"></div> </div> </div> <div id="content"></div> <div id="footer"></div> </div> </body> </html>
Чтобы не сбиться, и для каждого открывающего тега, не пропустить закрывающий, и не запороть тем самым весь код, сначала нужно написать пару <div></div>, а затем, между ними вставлять содержимое тега.
Количество вложений, в принципе, не ограничено. Каждому открывающему тегу задаётся идентификатор, или класс, которые потом используются в таблицах стилей для определения, какому блоку задаются те или иные свойства и значения.
В примере показано, что блоку с идентификатором (id) wrapper заданы ширина, временная рамка, внутренние и внешние отступы, и позиционирование.
#wrapper{ width: 900px; outline: 1px solid #787274; padding: 10px; margin: 0 auto; position:relative; }
Тег <span></span> в основном применяется для выделения каких либо частей текста, путём подключения к нему встроенных стилей.
В примере показано, как при помощи тега <span>, можно покрасить слово head в синий цвет.
Тег<span style="color: #0000ff;"><head></span> — голова документа
Тег<head> — голова документа
К цвету можно добавить размер, вид шрифта, и так далее.
На этом предварительное знакомство будем считать состоявшимся, ну а более основательно, как я уже говорил, будем узнавать их на практике, к которой и перейдём на следующей странице.
Перемена
Постоялец — хозяйке отеля:
— А что это за странное пятно на потолке у меня в комнате?
— Понимаете, до вас тут жил один химик. . .
— Это пятно от химикатов?
— Нет, от химика.
Подключение таблиц стилей < < < В раздел > > > Селекторы CSS
starper55plys.ru