Один из самых полезных сниппетов — это HTML-код для прокрутки текста. Это усложняет представление вашего контента и очень легко реализуется без особого кода.
Базовый HTML-код для прокрутки текста
Строго говоря, в настоящее время для этого эффекта используется не чистый HTML-код . Это действительно относится к области каскадных таблиц стилей, использующих тег <DIV> и связанные с ним свойства, такие как «переполнение». Однако, поскольку вы можете установить все эти свойства непосредственно в HTML на своей странице, это имеет значение; просто помните, что вы можете установить это в отдельном документе .CSS, если вы планируете использовать много текстовых полей с полосами прокрутки.
Во-первых, Кодекс
Вот основной синтаксис прокручиваемого текстового поля:
<div style="height:150px;width:225px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">Здесь находится ваш текст. Полосы прокрутки появляются только тогда, когда текст выходит за пределы заданного вами поля.</div>
Теперь, чтобы понять код, важно понять, что все это в первую очередь заключено в <DIV> . Это то, что определяет область этого конкретного текстового поля, и если вы не определяете границы, браузер просто делает границы настолько большими, насколько это возможно. Поскольку это противоречит цели прокручиваемого текстового поля, вам необходимо определить размер с помощью свойств «высота» и «ширина» (в данном случае 150 пикселей в высоту, 225 пикселей в ширину). Вы заметите, что после каждого свойства значение дается после двоеточия, а после определения свойства и значения после этого ставится точка с запятой. Важно включить их даже для последнего свойства, иначе CSS не будет работать.
Следующее свойство после размера — шрифт . Вы можете заметить, что хотя размер, высота строки и тип шрифта определены, ни одно из этих слов не используется. Это одно из достижений HTML 5.0 и CSS. Некоторые свойства определяются без указания их значения.
Последнее свойство <DIV> — один из примеров: «переполнение: прокрутка;». Он сообщает блоку <DIV>, что делать, если текст внутри выходит за границы, определяемые высотой и шириной. В этом случае предполагается разместить полосу прокрутки с левой стороны, чтобы зритель мог прочитать весь текст. Обратите внимание, что вам не нужно указывать браузеру, куда поместить полосу прокрутки; он по умолчанию был справа. Что, если вы хотите, чтобы полоса прокрутки располагалась горизонтально внизу? Вы просто становитесь более конкретным, говоря «переполнение-x: прокрутка» (что указывает на горизонтальную или «x» ось).
Другие варианты
Есть много других свойств, которые вы можете использовать для настройки <DIV> и, следовательно, чтобы ваше прокручиваемое текстовое поле выглядело именно так, как вы хотите:
- Фон : Вы можете определить цвет фона, используя шестнадцатеричные или другие цветовые коды.
- Фоновое изображение : для большей текстуры вы можете использовать фоновое изображение, даже контролируя значения повторения X и Y.
- Граница : также возможно выделение текстового поля рамкой в виде линии, тире, вставки или другого варианта.
Другие типы кода можно вводить с помощью других свойств CSS и HTML, определенных на таких сайтах, как Page Resources или Quackit .
Marquee: другой прокручиваемый текст
Существует еще один тип прокручиваемого текста, который сейчас редко используется, потому что, как и мигающий тег, он считался раздражающим для глаз. Но тег <MARQUEE> можно использовать так же, как тег <DIV> , включая настройку таких свойств, как:
- Поведение : слайд, прокрутка, чередование
- Направление : влево, вправо, вверх, вниз
- ScrollAmount : это значение указывает скорость, где 1 — медленно, а 20 — быстро.
На сайте Quackit.com есть полное изложение реализации такого HTML-кода для прокрутки текста, включая ссылку на Falling Text Generator . Однако, хотя этот вид прокручиваемого текста может показаться крутым для начала, он быстро начинает раздражать пользователя на вашем сайте.
С другой стороны, использование <DIV> для компактного размещения содержимого вашего сайта сделает ваш сайт более профессиональным и понятным для пользователя. Понимание кода является основным этапом обучения любого разработчика.