Как сделать мигающий текст на сайте? : : Блог Ловцовых

Как сделать мигающий текст на сайте?

Рубрика: HTML для новичков,Вопросы и ответы,Новости,Создание сайта в деталях,язык стилей CSS. Автор: ElenAleksy

01 Апр 2011

Как сделать мигающий текст на сайте?

Интересная и полезная статья о применении css-свойства text-decoration для создания эффекта мигания строки текста с примером.

Иногда разработчики сайтов используют разные эффекты для того, чтобы обратить внимание пользователя на какую-нибудь важную информацию на странице. Так вот для этой цели эту важную информацию нужно выделить среди другой информации на странице сайта (т.е. нужно сделать информацию заметной для пользователей сайта). Конечно, очень часто для рекламирования товаров или услуг используют анимированные баннеры (в формате GIF или Flash). Но мы в данной статье рассмотрим другую возможность. Мы рассмотрим пример создания мигающей строки текста средствами языка стилей CSS. В спецификации CSS2 доступно специальное свойство text-decoration, с помощью которого можно сделать текст «мигающим». Рассмотрим небольшой пример.

1 Открываем Блокнот и пишем следующий код:

<html>
<head>
</head>
<body>
<center>
<strong>
Уличные светильники</strong>
</center>
</body>
</html>

2 Сохраняем этот код. Если Вы пользуетесь Блокнотом, то нужно нажать меню Файл – Сохранить как, затем ввести имя файла, включая расширение (например, index.html).
Теперь давайте разберемся с нашим кодом.

В данном html-коде, все что находится между html-тегами <body> </body> выводится на экран (конечно, сами теги не выводятся на экран как текст). За тегом <body> в нашем примере сразу же следует тег <center>, который предназначен для центрирования. Далее, перед конечным тегом </center>, следует начальный тег <strong> и конечный тег </strong>. Между этими тегами размещается строка текста «Уличные светильники». Текст, размещенный между тегами <strong></strong>, отображается в браузере жирным шрифтом. После конечного тега </strong> следуют конечные теги </center> </body> и </html>. На этом заканчивается html-код страницы.

Как сделать мигающий текст на сайте?

Теперь давайте посмотрим на результат, открыв созданную страницу с помощью браузера (например, Firefox).
После открытия этой страницы браузером мы видим размещенную по центру окна просмотра строку «Уличные светильники». Но, предположим, что нам нужно сделать именно эту строку мигающей. Для решения этой задачи воспользуемся css-свойством text-decoration со значением blink. Запись будет выглядеть так:

text-decoration:blink;

Эта запись должна находится между фигурными скобками { }. Перед открывающейся скобкой должен находится селектор, к которому будет применяться правило, записанное в фигурных скобках. Поскольку строка «Уличные светильники» размещена между тегами <strong> </strong> мы можем применить данное правило к тегу <strong>. В таком случае нам нужно написать слово strong перед открывающейся фигурной скобкой. Это и есть селектор. Теперь нужно разместить эту запись в html-коде страницы. Итак, наша запись будет выглядеть так:

strong {text-decoration:blink;}

Между тегами <head> </head> напишем теги <style> </style>. Между тегами <style> </style> разместим нашу запись.
Вот, что получится в результате:

strong{
text-decoration:blink;
}
</style>

</head>

<body>
<center>
<strong>
Уличные светильники</strong>
</center>
</body>
</html>

Что ж, вот мы и рассмотрели небольшой пример, который может оказаться для вас полезным.

Удачи!

автор: Ловцова Елена

На сегодняшний день дизайн сайта играет не маловажную роль. Для правильного понимания этой информации нужно изучать статьи о дизайне и исходя из этого правильно распорядиться полученной информацией.

Кстати тоже интересно почитать

No related posts.

Вы можете оставить отзыв или трекбек со своего сайта.

Один отзыв на «Как сделать мигающий текст на сайте?»

Lena:

13.10.2011 в 3:59 пп

А не громоздко ли задавать правила в хтмл-страницах? Для этого же можно подключать таблицу стилей, где все прописывать и не перезагружать информацией каркас самой страницы кучей правил.

Ответить