Тег span HTML
Сегодня я предлагаю Вам рассмотреть использование тега span. Данный тег является очень полезным, с точки зрения применения к нему CSS свойств. При создании сайтов, этот тег бывает просто незаменим, ведь при его помощи, мы можем выделять различные элементы внутри определенных тегов и применять к ним стили, которые нам нужны. Например, мы можем в произвольном абзаце текста выделить в тег span некоторые буквы, и задать им определенный цвет, размер шрифта, фоновый цвет, а также другие CSS свойства, которые Вам нужны. Давайте я приведу пример использования данного тега, а потом мы разберем данный код.
<html>
<head>
<title>Использование тега span</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<p>Текст с
<span class="red">красным</span>,
<span class="green">зеленым</span>
и <span class="blue">синим</span> шрифтом.</p>
</body>
</html>
И в файле стилей пишем следующее:
.red {
color: #f00;
font-size: 20px;
}
.green {
color: #0f0;
font-size: 25px;
}
.blue {
color: #00f;
font-size: 30px;
}
Если вы все сделали верно, то на экране браузера будет следующий результат:
В html коде мы выводим абзац, в котором выделяем три элемента в отдельный тег span, и задаем каждому тегу отдельный класс. Если не применять никаких css свойств, то разницы в коде мы не увидим, будет идентично, что с использованием тега span, что без его использования. Однако если применить вышеуказанные css свойства, то результат выполнения кода будет совершенно другим, ведь мы установили для каждого класса, свой цвет текста, а также размер шрифта. Мы выделяем нужные нам элементы в html коде, которые помещаем в отдельный тег span, и в дальнейшем применяем к нему нужные нам css свойства, в итоге получаем нужный нам результат. Для реализации подобных задач и используется тег span. Теперь, после изучения этого тега, вы будете постоянно применять его в своей практике, и он будет решать множество задач довольно легко и просто.
