http://www.zhitenev.ru/ispolzovanie-tega-span-dlya-formatirovaniya-teksta/
Поскольку <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, встречающихся в документе).
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 | .color { /*Название селектора. В данном случае он называется «color.*/ Color: #0000ff ; /*Задаём тексту синий цвет. Color – свойство, а #ffff00 – параметры свойства.*/ } .hero { Font-weight: bold ; /* Делаем текст жирным.*/ } .glagol:hover { /*Дополнительное свойство селектора :hover позволяет задать стиль для данного элемента, который будет отображаться при наведении мыши на элемент.*/ Background: #eeeeee ; /*Задаём фоновый цвет.*/ Color: #666666 ; } |
Сохраняем написанные стили, запускаем html-файл в браузере и радуемся результату. Если вы всё сделали правильно, то вы увидите то же самое, что и на картинке к данной статье. А если у вас что-то не работает, то посмотрите исходники и найдите свои ошибки.
Комментариев нет:
Отправить комментарий