Среда, 20 Февраля 2013 13:15

Элемент span

Written by 
Оцени эту запись
(1 Голос)

Элемент span предназначен для оформления части текста. Например, для изменения цвета текста или размера.

 

Элемент spanПример:

 

 

Я купила красные и желтые сережки.

 

 

<p>Я купила <span style="color: red">красные</span> и <span style="color: yellow">желтые</span> сережки.</p>
 
 
Элемент span поддерживается всеми современными браузерами. 
 
 
Элемент span является строчным и должен содержать открывающий и закрывающий теги.
 
 
Элемент span служит для группировки строчных элементов, для визуального оформления их содержимого.
 
 
 
 
Kate-land - блог верстальщика и для верстальщика - HTML, CSS, Javascript. Создание html страницы с таблицами стилей и скриптами. Полезная информация, работающие примеры, решение конкретных задач.
 
 
<div> Kate-land - блог верстальщика и для верстальщика - <span style="color: blue"><b>HTML</b>, <b>CSS</b>, <b>Javascript</b></span>. Создание html страницы с <span style="color: violet"><i>таблицами стилей</i> и <i>скриптами</i></span>. Полезная информация, работающие примеры, решение конкретных задач.</div>
 
 
Также при помощи элемента span  можно добавить иконку, значок для оформления родительского элемента:
 
 
Добро пожаловать на  Kate-land!
 
 
<div>Добро пожаловать на <span style="padding: 0px 6px; background: url(/kate/favicon.ico); background-size: 100%;">&nbsp;</span>Kate-land!</div>
 
 
Когда часть текста находится в элементе span, его можно стилизировать при помощи CSS или изменять при помощи JavaScript.
 
 
CSS:
 
span {
color: violet;
}
 
 
 
К элементу span применимы все глобальные атрибуты и атрибуты событий.
 
Элемент span, являясь строчным, может быть потомком любого блочного или строчного элемента, даже другого элемента span.
 
У элемента span нет особого семантического значения, как например у ссылки a или списков ol, ul. Потому элемент span является нейтральным.
 
 
Поскольку элемент span является строчным, его оформление при переносе строки переносится также. Например, если у строчного элемента заданы левый и правый внутренние отступы (padding) по 10 пикселей, то при переносе строки они не прибавятся в месте переноса:
 
 
<div>Kate-land - блог верстальщика и для верстальщика - HTML, CSS, Javascript. Создание html страницы с <span style="padding: 0 10px; background: violet;">таблицами стилей и скриптами</span>. Полезная информация, работающие примеры, решение конкретных задач.</div>
 
 
Результат:
 
 
Kate-land - блог верстальщика и для верстальщика - HTML, CSS, Javascript. Создание html страницы с таблицами стилей и скриптами. Полезная информация, работающие примеры, решение конкретных задач.
 
 
Как видим, указанные отступы есть вначале и вконце элемента, но в месте разрыва страницы отступов нету.
 
 
 
 
 
 
 
 

Additional Info

Еще в этой категории: « Элемент textarea Элемент li »

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов