Что такое span html
HTML5 IE Cr Op Sa Fx
Тег SPAN
Бернард Шоу
Результат данного примера показан ниже.
Рис. 1. Вид текста, оформленного с помощью тега и стилей
Статьи по теме
- Строчные элементы
- Строчные элементы
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Что такое span html
Тег (от англ. span — интервал) предназначен для выделения отдельных строк, символов или других строчных элементов для дальнейшего изменения их оформления с помощью стилей.
Демо¶
Текстовые элементы
Синтаксис¶
span>. span> Закрывающий тег обязателен.
Атрибуты¶
Для этого элемента доступны универсальные атрибуты.
Спецификации¶
- WHATWG HTML Living Standard
- HTML 5
- HTML 4.01 Specification
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
html> head> meta charset="utf-8" /> title>SPANtitle> style> span color: red; /* Красный цвет символов */ > style> head> body> p> Разумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей. p> p>Автор: span>Бернард Шоуspan>p> body> html> Что такое span html
HTML5 IE Cr Op Sa Fx
Тег SPAN озумні люди пристосовуються до навколишнього світу. Нерозумні люди пристосовують світ до себе. Ось чому прогрес визначається діями нерозумних людей.
Бернард Шоу
Результат даного прикладу показаний нижче.
/.mso-page-only—>
Типи HTML тегів
Довідкова інформація
- Використання скриптів
- Колір в HTML
- Назви кольорів
- Коди мов
- MIME-типи
- Універсальні атрибути в HTML
- Події в HTML
© HTML / CSS довідник | 2020 — 2023 рр.
Всі матеріали сайту захищені Законом України «Про авторське та суміжні права». Весь контент створюється у відповідності з нашою «Редакційною політикою» та поширюються на умовах відкритої ліцензії Creative Commons Attribution-ShareAlike. Копіювання матеріалів сайту у будь-якому вигляді без дозволу редакції сайту заборонено!
Всі зібрані на сайті дані про відвідувачів використовуються виключно згідно чинного Закону України «Про інформацію» та нашої «Політики конфіденційності».
Користуючись сайтом html-css.co.ua відвідувачі автоматично погоджуються з «Правилами користування сайтом».
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 устанавливает расстояние между словами в тексте.