<span>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since иÑÐ»Ñ 2015 г..
HTML-ÑÐ»ÐµÐ¼ÐµÐ½Ñ <span> ÑвлÑеÑÑÑ Ð¾ÑновнÑм ÑÑÑоковÑм конÑейнеÑом Ð´Ð»Ñ ÑÑазового конÑенÑа, коÑоÑÑй, по ÑÑÑеÑÑвÑ, ниÑего не пÑедÑÑавлÑеÑ. Ðн Ð¼Ð¾Ð¶ÐµÑ Ð¸ÑполÑзоваÑÑÑÑ Ð´Ð»Ñ Ð³ÑÑппиÑовки ÑлеменÑов в ÑелÑÑ
ÑÑилизаÑии (иÑполÑзование аÑÑибÑÑов class или id) или поÑомÑ, ÑÑо они Ð¸Ð¼ÐµÐµÑ Ð¾Ð±Ñие знаÑÐµÐ½Ð¸Ñ Ð°ÑÑибÑÑов, напÑÐ¸Ð¼ÐµÑ lang. Ðн должен бÑÑÑ Ð¸ÑполÑзован ÑолÑко когда Ð½ÐµÑ Ð´ÑÑгого подÑ
одÑÑего по ÑеманÑике ÑлеменÑа. <span> оÑÐµÐ½Ñ Ð¿Ð¾Ñ
ож на ÑÐ»ÐµÐ¼ÐµÐ½Ñ <div>, но <div> ÑвлÑеÑÑÑ Ð±Ð»Ð¾ÑнÑм ÑлеменÑом, в Ñо вÑÐµÐ¼Ñ ÐºÐ°Ðº <span> ÑвлÑеÑÑÑ ÑÑÑоÑнÑм.
ÐнÑеÑакÑивнÑй пÑимеÑ
<p>
Add the <span class="ingredient">basil</span>,
<span class="ingredient">pine nuts</span> and
<span class="ingredient">garlic</span> to a blender and blend into a paste.
</p>
<p>
Gradually add the <span class="ingredient">olive oil</span> while running the
blender slowly.
</p>
span.ingredient {
color: #f00;
}
| ÐаÑегоÑии конÑенÑа | ÐоÑоковÑй конÑенÑ, ÑÑазовÑй конÑенÑ. |
|---|---|
| ÐопÑÑÑимое ÑодеÑжимое | ФÑазовÑй конÑенÑ. |
| ÐÑопÑÑк Ñегов | ÐеÑ, оÑкÑÑваÑÑий и закÑÑваÑÑий Ñеги обÑзаÑелÑнÑ. |
| ÐопÑÑÑимÑе ÑодиÑели | ÐÑбой ÑлеменÑ, коÑоÑÑй ÑазÑеÑÐ°ÐµÑ ÑÑазовÑй или поÑоковÑй конÑÐµÐ½Ñ Ð² каÑеÑÑве ÑодеÑжимого. |
| ÐопÑÑÑимÑе ARIA-Ñоли | ÐÑбÑе |
| DOM-инÑеÑÑÐµÐ¹Ñ | HTMLSpanElement (до HTML5, инÑеÑÑейÑом бÑл HTMLElement) |
ÐÑÑибÑÑÑ
Ð ÑÑÐ¾Ð¼Ñ ÑлеменÑÑ Ð¿ÑÐ¸Ð¼ÐµÐ½Ð¸Ð¼Ñ ÑолÑко глобалÑнÑе аÑÑибÑÑÑ.
ÐÑÐ¸Ð¼ÐµÑ 1
HTML
<p><span>Ðакой-нибÑÐ´Ñ ÑекÑÑ</span></p>
РезÑлÑÑаÑ
ÐÑÐ¸Ð¼ÐµÑ 2
HTML
<li>
<span>
<a href="portfolio.html" target="_blank">ÐоÑмоÑÑеÑÑ Ð¼Ð¾Ñ Ð¿Ð¾ÑÑÑолио</a>
</span>
</li>
CSS
li span {
background: gold;
}
РезÑлÑÑаÑ
СпеÑиÑикаÑии
| Specification |
|---|
| HTML # the-span-element |
СовмеÑÑимоÑÑÑ Ñ Ð±ÑаÑзеÑами
СмоÑÑиÑе Ñакже
- HTML-ÑлеменÑ
<div>