Использование тэга span для форматирования текста

Что же это за тэг такой, <span>? Данный тэг необходим для форматирования элементов. Он не является блочным элементом и позволяет, например, изменить стиль для одного слова. Его можно использовать внутри блочных элементов (<p>,<table>,<div>). Span поддерживается всеми известными браузерами (ну ещё бы он не поддерживался каким-либо браузером – стыд и позор :lol:)

Приступим к самому форматированию текста. В html это требует лишь пару символов кода, а всё остальное – чистый css. Хотя, можно прописать стили в html-коде, но это не хорошо, т.к. «нагружает» страницу лишним кодом, поэтому стили надо выносить в отдельный файл. Поскольку <span> это тэг для форматирования, то большая часть статьи будет о изучении и синтаксисе CSS.

Итак, дан текст: «Шел Грека через реку, видит Грека в реке рак, сунул грека руку в реку
рак его за руку цап…». Наши задачи:

Придать словам “река” и “рак” синий цвет шрифта.
Выделить жирным имя героя, без использования тэгов strong или b
Изменить фон и цвет глаголов, при наведении на них курсора мыши.

Задачи трудные, но это только на первый взгляд. На самом деле всё очень просто. Для начала «окружим» эти слова тэгом <span>. Должно получиться что-то, типа <span>рак</span>. Затем, необходимо присвоить класс к каждому тэгу span. У нас имеется 3 задачи, поэтому нам надо будет ко всем тэгам span присвоить один из трёх соответствующих классов, которые мы назовём, к примеру, “color” (1 задание), ”hero” (2 задание) и ”glagol” (3 задание). Пример присвоения классов к тэгу span – <span class=”color”>рак</span>. Всё, с html покончено, далее будет только CSS.

Создаём отдельный файл (назовите его style.css) и сохраняем его в том же каталоге, что и html файлы с нашим текстом. Подключаем файл стилей к нашей странице, сохраняем сделанные на html странице изменения и можете смело её закрывать, теперь нам понадобиться только файл style.css. Для начала, ознакомлю вас с синтаксисом CSS. Он очень прост, задаётся селектор (название класса, айди или элемента), а затем идут различные свойства и их параметры. Сложно? Не переживайте, ниже будет пример кода, где вам всё станет понятно.

Итак, ранее мы создали 3 класса для каждой задачи. Теперь будем создавать стили для каждого их классов. Ниже я приведу отрывок кода с комментариями, где вы без труда разберётесь с синтаксисом CSS и не только. Небольшая шпаргалка: поскольку селекторы бывают разных типов, то они могут иметь одинаковые имена (Например, класс «color» и айди «color»), поэтому нам надо «сообщить» браузеру какой именно элемент нам нужен – для этого перед названием элемента ставятся специальные символы (без пробелов): «#» – перед айди, «.» – перед классом и ничего не ставиться перед названием тэга (например, span {} – этот стиль будет применяться для всех тэгов span, встречающихся в документе).

.color { /*Название селектора. В данном случае он называется «color.*/

Color:  #0000ff; /*Задаём тексту синий цвет. Color – свойство, а #ffff00 – параметры свойства.*/

}

.hero {

Font-weight: bold; /* Делаем текст жирным.*/

}

.glagol:hover { /*Дополнительное свойство селектора :hover позволяет задать стиль для данного элемента, который будет отображаться при наведении мыши на элемент.*/

Background: #eeeeee; /*Задаём фоновый цвет.*/

Color:  #666666;

}

Сохраняем написанные стили, запускаем html-файл в браузере и радуемся результату. Если вы всё сделали правильно, то вы увидите то же самое, что и на картинке к данной статье. А если у вас что-то не работает, то посмотрите исходники и найдите свои ошибки.

__________________

Украшать веб-страницы мы научились, теперь пора украшать свою девушку . Тут вместо CSS вам придётся использовать свадебные платья и прочие украшения, например ювелирные.