Span что это в html

Span что это в html

Помогает выделить стилем часть текста в блоке.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

• Алёна Батицкая ,
• Светлана Коробцева

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

С помощью тега можно выбрать часть текста или другой информации в блоке и стилизовать её.

Пример

Скопировать ссылку «Пример» Скопировано

   Добавьте базилик, арахис и чеснок в блендер и перемешайте.  p> Добавьте span class="ingredient">базиликspan>, span class="ingredient">арахисspan> и span class="ingredient">чеснокspan> в блендер и перемешайте. p>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Например, хочется, чтобы одно слово в абзаце было написано красным цветом. Помести это слово в коде в контейнер . < / span>и примени к нему CSS-стиль.

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 .  span>. span>    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Иногда, чтобы отформатировать часть текста, можно использовать семантические элементы — это те, которые не просто являются контейнерами, а имеют своё значение, например, тег , с помощью которого вы создаёте «шапку» своей страницы с меню и логотипом. Поэтому, если вместо можно использовать семантический тег, например, для выделения автора материала курсивом или для выделения текста жёлтым маркером, то используйте их.

Ещё пример

Скопировать ссылку «Ещё пример» Скопировано

   Разумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей. 
Бернард Шоу p class="quote__text"> span class="quote__text-letter">Рspan>азумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей. p> p class="quote__author">Бернард Шоуp>    Скопировать Скопировано Не удалось скопировать   

 .quote__text-letter  float: left; /* Обтекание символа текстом справа */ margin-right: 7px; /* Отступ справа */ color: #ed6742; /* Цвет символа */ font-family: "Roboto Slab", serif; /* Шрифт с засечками */ font-size: 52px; /* Размер шрифта */ line-height: 52px; /* Высота строки */> .quote__author  margin-top: 10px; padding: 10px 0; border-top: 1px solid #ed6742; /* декоративная граница */ font-style: italic; font-size: 14px; font-weight: 300;> .quote__text-letter  float: left; /* Обтекание символа текстом справа */ margin-right: 7px; /* Отступ справа */ color: #ed6742; /* Цвет символа */ font-family: "Roboto Slab", serif; /* Шрифт с засечками */ font-size: 52px; /* Размер шрифта */ line-height: 52px; /* Высота строки */ > .quote__author  margin-top: 10px; padding: 10px 0; border-top: 1px solid #ed6742; /* декоративная граница */ font-style: italic; font-size: 14px; font-weight: 300; >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

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

Фишка в том, что в можно встраивать вообще всё, что угодно. Внутри можно собирать целые блоки, списки и, по факту, он может работать не только с текстом: я такое встречал очень часто. можно встраивать друг в друга сколько угодно раз, чего не сделаешь, например, с тегом

. Допустим, ты хочешь, чтобы текст на сайте появлялся по одной букве, то ты добавляешь каждую букву в отдельный , делаешь задержку и отдельно уже управляешь через JavaScript или CSS. — тег, без которого современные сайты практически не могут существовать.

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

�� — строковый элемент, поэтому по умолчанию у него нет высоты. Если нужна высота, то элементу стоит задать display : block или display : inline — block , или подумать: «А не нужен ли там ?»

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Тег удобен, если нужно оформить другими стилями отдельное слово или словосочетание в тексте. Этот приём очень любят дизайнеры, чтобы акцентировать внимание на какой-то информации.

Например, выделим цветом важное для нас сообщение внутри заголовка на первом экране:

    We are  the best   company    header class="header"> h1 class="header__title"> We are span class="header__title-accent header__title-accent_color"> the best span> span class="header__title-accent"> company span> h1> header>    Скопировать Скопировано Не удалось скопировать   

 .header  display: flex; justify-content: center; align-items: center; min-height: 480px; background: #18191c url("../images/background.svg") no-repeat center / cover; z-index: 0; color: #ffffff;> .header__title  max-width: 500px; color: #fff; font-family: "Roboto", sans-serif; font-size: 25px; text-align: center; text-transform: uppercase; font-weight: normal; line-height: 30px; letter-spacing: 1px;> /* задаём стили для текста, который нужно выделить */.header__title-accent  display: block; /* перенос на новую строку */ font-size: 55px; line-height: 58px; font-weight: bold;> /* цветовой акцент */.header__title-accent_color  color: #000000; background-color: #FF8630;> .header  display: flex; justify-content: center; align-items: center; min-height: 480px; background: #18191c url("../images/background.svg") no-repeat center / cover; z-index: 0; color: #ffffff; > .header__title  max-width: 500px; color: #fff; font-family: "Roboto", sans-serif; font-size: 25px; text-align: center; text-transform: uppercase; font-weight: normal; line-height: 30px; letter-spacing: 1px; > /* задаём стили для текста, который нужно выделить */ .header__title-accent  display: block; /* перенос на новую строку */ font-size: 55px; line-height: 58px; font-weight: bold; > /* цветовой акцент */ .header__title-accent_color  color: #000000; background-color: #FF8630; >    Скопировать Скопировано Не удалось скопировать   

Span что это в html

HTML5 IE Cr Op Sa Fx

       
 
Бернард Шоу
  

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

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

Статьи по теме

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

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

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

div, span и display — Основы HTML, CSS и веб-дизайна

В этом уроке мы познакомимся с принципами, по которым элементы выводятся на страницу и получают определённый размер.

display

У элементов есть свойство display . Оно задаёт то, как элемент выводится на экран.

Здесь к слову display можно относиться как к глаголу: to display — показывать, выводить на экран.

• display: block начинается с новой строки и занимает всю ширину
• display: inline начинается в любом месте и занимает столько ширины, сколько нужно для помещения содержания

Всего у этого свойства 20 возможных значений, но прямо сейчас остальные не так важны.

Браузер обычно применяет базовые стили по умолчанию ко многим элементам. Например, элемент p по умолчанию имеет display: block .

Разные браузеры могут задавать разные стили по умолчанию, и иногда эти стили могут отличаться. Поэтому одна и та же страница может выглядеть по-разному в разных браузерах. Это в основном касается размеров и отступов. Для решения этой проблемы существуют так называемые CSS Reset — наборы CSS-стилей, которые «сбрасывают» браузерные стили.

Вот пример таких reset-стилей .

div & span

Элемент p имеет семантическое значение. Он определяет абзац текста.

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

Два самых используемых элемента — div и span — не имеют семантического значения. Они нужны исключительно для структуры и стилей.

• div — это блочный (block-level) элемент, у него свойство display: block .
• span — это строчный (inline-level) элемент, у него свойство display: inline .

Конечно, вы можете изменить эти свойства в своём CSS, но лучше так не делать. В целом, лучше не менять базовые свойства у типов элементов, а добавлять классы по необходимости.

div обычно используется для определения какого-то крупного блока на странице. А span — для небольшого элемента на строке.

 class="info"> После Второй мировой войны  class="city">Нью-Йорк стал одним из неоспоримых мировых городов-лидеров. Строительство штаб-квартиры ООН в Нью-Йорке символизировало уникальное политическое значение города.  

Блочная модель

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

У каждого прямоугольника есть несколько свойств, влияющих на размер:

• width, height — ширина и высота элемента
• padding — отступ внутри элемента (расстояние от содержания до границы прямоугольника)
• border — толщина границы (обводки)
• margin — отступ снаружи элемента (расстояние от границы прямоугольника до соседних элементов)

Давайте сделаем элемент, в котором явно видно все эти части:

See the Pen Div Box by Hexlet (@hexlet) on CodePen.

Мы использовали значение inline-block у свойства display . Это в какой-то степени комбинация inline и block . Элемент не занимает всю ширину и может находится на одной строке с другими элементами. При этом у него можно задать параметры, свойственные block : конкретную ширину и высоту.

Сколько же места требуется всему элементу? Нужно сложить показатели:

• Высота: высота элемента + внутренний отступ + толщина границы + внешний отступ (height + padding + border + margin) — 70 + 10 + 8 + 15 = 103px.
• Ширина: ширина элемента + внутренний отступ + толщина границы + внешний отступ (width + padding + border + margin) — 100 + 10 + 0 + 15 = 125.

Границы и отступы можно задать свои для каждой из сторон:

#box2  width: 100px; height: 70px; border-top: 8px solid #001f3f; margin-left: 15px; margin-top: 5px; padding-left: 10px; padding-top: 10px; > 

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Урок «Как эффективно учиться на Хекслете»
• Вебинар « Как самостоятельно учиться »

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

HTML тег

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

Тег не оказывает никакое влияние на визуальное оформление элементов и не имеет семантического значения.

Синтаксис

Тег — парный, его содержимое пишется между открывающим () и закрывающим () тегами.

Пример

html> html> html> head> title>Заголовок документа title> head> body> p>У моей кошки span style="color: green;">зеленые span> глаза. p> body> html>

Результат

В этом примере мы задали стиль непосредственно в теге.

Пример

html> html> head> title>Заголовок документа title> style> .letter < color: red; font-size: 300%; /* Размер шрифта в процентах */ position: relative; /* Относительное позиционирование */ top: 7px; /* Сдвиг сверху */  style> head> body> p>span class="letter">О span>на нанесла в руках отвратительные, тревожные желтые цветы. И эти цветы очень отчетливо выделялись на черном ее весеннем пальто. p> p>Михаил Булгаков p> body> html>

Результат

В этом примере мы добавили к тегу атрибут class , и отдельно задали стили для содержимого тега.

Атрибуты

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

• CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
• CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
• CSS свойство font-size задает размер щрифта.
• CSS свойство font-weight устанавливает насыщенность шрифта.
• CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
• CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

• CSS свойство color определяет цвет контента и оформления текста.
• CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега :

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.