Создать бегущую строку
на сайте – проще простого.
Используют бегущую строку для различных целей, например, для рекламного сообщения, новостей, акций, объявлений и т.д.
Для создания бегущей строки используют тег:
Атрибуты для бегущей строки
width
="..." - ширина бегущей строки (в пикселях или процентах).
Пример:
height
="..." - высота бегущей строки (в пикселях или процентах).
Пример:
bgcolor
="..." - цвет фона бегущей строки (цвет задается кодом или словом).
Пример:
behavior ="..." поведение бегущей строки. Имеет такие значения:
scroll - обычная прокрутка (по умолчанию);
slide – строка начинает свой путь из одного края и останавливается у другого;
alternate
– строка будет двигаться от края до края
Пример:
direction ="..." - направление бегущей строки. Имеет такие значения:
left – движение текста влево (по умолчанию);
right – движение текста вправо;
up – движение текста снизу вверх;
down
- движение текста сверху вниз
Пример:
scrollamount
="..." - скорость движения строки (в пикселях).
Пример:
scrolldelay
="..." - временной интервал между шагами (в миллисекундах).
Пример:
loop
="..." – сколько раз пробежит бегущая строка. Если в значение поставить «0»(По умолчанию), бегущая срока будет прокручивать текст бесконечное количество раз, если в значение поставить «2», тогда текст прокрутится 2 раза.
Пример:
hspace
="..." – отступ от левого и правого края бегущей строки (в пикселях).
Пример:
Если все собрать вместе, код бегущей строки в HTML будет выглядеть вот так:
Бегущее изображение
Так как перемещали текст в бегущей строке, так можно переместить и изображение.
Достаточно между тегами вставить картинку:
Дополнение
В бегущую строку можно установить текст со ссылкой. Для этого нужно прописать следующий код в HTML:
Вот и разобрались с бегущей строкой в HTML-документе.
Прежде чем перейти к изучению очередной большой главы, расскажу немного о некоторых мелочах, которые как-то выпали из общего строя, но порой без них никак не обойтись. Эти, фигурально выражаясь, элементы html языка помогут решить ряд задач с которыми частенько приходится сталкиваться при создании той или иной странички, так что не стоит относится к ним с пренебрежением.
Спецсимволы
Иногда, а порой даже часто, как например в этом сайте, в тексте не обойтись без знаков "меньше чем"-< и "больше чем"- > , но как быть если браузеры определяют <слово> или фразу заключенные в эти знаки как тег и следовательно не будут его отображать на мониторе? Или допустим Вам и вправду в тексте надо написать некий <тег>, но не для того чтобы дать очередную команду браузеру, а чтобы привести пример его написания посетителям страницы?
Для этих целей были придуманы так называемые спецсимволы.
Так например спецсимвол < - будет значить что в этом месте текста нужно поставить знак < а спецсимвол > обозначит символ >.
Все спецсимволы начинают писаться со знака & - амперсант этот знак указывает браузеру, что далее будет идти имя спецсимвола и воспринимать его следует не как текст, а как команду. Тут встаёт очередной вопрос, а как собственно в тексте предназначенного для вывода на экран поставить сам знак & - амперсант?
Для знака & тоже есть свой спецсимвол - &
Такая вот путаница получается..
Ещё, пожалуй, отдельного внимания заслуживает спецсимвол - это неразрывный пробел мы с ним уже сталкивались. Дело в том, что когда Вы пишите текст в блокноте или html редакторе "простых" пробелов между словами можно поставить сколь угодно много, но вот при чтении страницы браузером все они "удаляются" и между словами на странице будет не более одного пробела. Отсюда часто возникают проблемы с оформлением текста, красную строку, например, никак не сделать... вот и придумали люди спецсимвол он воспринимается браузером не как пробел, а как знак, только невидимый человеческому глазу.
А неразрывным он называется по тому, что группа таких пробелов воспринимается как цельное слово, следовательно, не переносится на следующую строку, если предложение подходит к установленным рамкам или же к краю окна. Так что в окне может появиться горизонтальная полоса прокрутки, если Вам это ненужно, ставьте между ними обыкновенные пробелы
Пример использования спецсимволов:
| <
/td> | < html> < head> < title> Моя первая страничка< /title> < /head> < body> < center>< h2> Привет мир!!!< /h2>< /center> < br> Это моя первая страничка! < /body> < /html> |
Пример в примере… навивает на философские мысли о бесконечности…
Ну вот теперь Вы знаете, как примерно выглядят все эти примерчики по "ту сторону экрана". Кстати, раз уж начал открывать военные тайны, данный пример является таблицей из двух ячеек, одна тоненькая слева выполняет сугубо декоративную функцию.. так вот если перед Вами встанет задача нарисовать ячейку таблицы без какого либо содержания вставляйте в неё знак пробела . Помните правило <тег>здесь что то обязательно должно быть? Спецсимвол пробела один из выходов в данном случае.
Кроме выше указанных есть еще целый ряд спецсимволов, чего там только нет: знаки зодиака, карточные масти, палочки, точечки, ёлочки, кругляшки, дроби.. Предназначены они уже не для каких-то "особых" задач, а просто выполняют свою роль ввиду отсутствия данных знаков на клавиатуре. Мою "коллекцию" спецсимволов можете
Горизонтальная линия
Простой новый тег
рисует в окне горизонтальную линию, не требует закрывающего тега. Часто применяется при верстке страницы в качестве декоративного элемента.
Имеет ряд атрибутов, align -выравнивание с одним из трёх значений (center, left, right ) может быть применен, если задана длина линии атрибут width в пикселях или процентах. Так же можно задать толщину линии атрибут - size , цвет атрибут - color , и при необходимости отключить тень линии noshade .
Это просто линия по умолчанию:
Это линия без тени:
Это линия окрашенная в кранный цвет:
Линия длиной 250 пикселей:
Линия длиной 250 и толщиной 5 пикселей:
Линия длиной 500, толщиной 50, синяя:
Примеры выравнивания:
По моему достаточно просто и эффективно.
Бегущая строка
Тег заставляет текст помещённый в него двигаться в том или ином направлении, проще говоря делает его бегущей строкой. Бегущая строка имеет ряд настроек скроллинга, которые задаются следующими атрибутами:
behavior - определяет тип скроллинга, может иметь следующие значения:- alternate - колебательные движения от края к краю
- scroll - прокручивание текста. текст будет выходить за рамки экрана и снова появляться с противоположной его стороны
- slide - прокручивание текста c остановкой.
loop задает количество прокруток бегущей строки.
direction - направление движения текста. значения:
- up - вверх,
- down - вниз,
- left - влево,
- right - вправо.
height - высота строки,
width - ширина строки.
Бегающие строки
Бегущая строка по умолчанию
Бегущая строка слева направо
Бегущая строка бегает от края к краю
Бегущая строка со скоростью 10
Бегущая строка со скоростью 1
Эта строка будет прокручиваться только два раза
Бегущая строка с остановкой
Бегущая строка с фоном
Бегущая строка с ограничением ширены прокрутки
Бегущая строка снизу вверх
Бегущая строка с отступами от границ
Ну думаю, сами разберётесь, что к чему. Попробуйте использовать различные сочетания атрибутов для достижения нужного Вам эффекта. Добавлю лишь то, что с текстом бегущей строки можно делать то же самое, что и с обыкновенным текстом: менять размер, цвет, стиль, шрифт, сделать фразу из строки ссылкой.. прописывая нужные теги внутри тега
Таблица стилей CSS, если уж брать само определение, это язык описания внешнего вида документа. То есть за структуру страницы отвечает HTML, а за всё оформление именно таблицы стилей CSS. Я собрал здесь информацию, которая позволит Вам свободно использовать таблицу стилей. Я не буду писать о том, как необходимо ее знать, потому что и так понятно — без нее Вы не сможете привести сайт в более менее нормальный вид. Если кто-то только начинает изучать CSS стили, то этих материалов хватит чтобы начать изучение CSS.
1. Базовые вещи
Начну с самых основ. Когда я начинал вести этот сайт, я написал небольшие уроки по изучению таблиц стилей CSS. Уроки хорошо подойдут как для тех кто только начинает, так и для тех кто уже кое-что знает, чтобы освежить свои знания. Там всё оформлено в картинках и на реальных примерах.
Маленькое отступление: когда я сам начинал изучать тему сайтостроения, я выучил практически все HTML теги и они меня не сильно вдохновили. Но после того как я начал изучать таблицу стилей CSS и пробовать применять каждое из свойств — мне это так сильно понравилось (я бы не создал , если бы мне это не нравилось). Я увидел что можно делать просто поразительные вещи только с помощью CSS. Это не язык программирования, который нужно учить месяцами. Таблицу стилей можно освоить за одну (максимум за две) недели.
Конечно, Вы не изучите абсолютно все свойства и их значения, да это и не нужно! Вам нужно знать лишь основы, чтобы Вы начали применять и использовать в своих проектах. Одним важным нюансом является то, что нужно СРАЗУ же применить свойство, которое Вы только что узнали, на реальном примере. Пусть это будет Ваш собственный сайт или же простой HTML сайт — нет разницы. Важно то, чтобы Вы своими руками попробовали написать и увидели результат.
У меня на сайте есть очень много примеров в которых используется CSS. Только и вместе содержат более 100 уроков! Когда Вы будете знать хотя бы основы, тогда Вы сможете смело менять и применять все примеры из уроков.
Мои уроки об основах каскадных стилей CSS
2. Шпаргалки CSS и CSS3
Ну вот изучили Вы основы и через пару дней всё с «успехом» забыли и, наверное, думаете что это не Ваше и всё сложно. Хочу Вас сразу немного подбодрить — я сам не знаю всех свойств CSS. Но что мне мешает посмотреть их в интернете?
Правда пока зайдешь в Яндекс или Google, потом наберешь тот запрос, который нужен. А если еще и не выдаст в поиске то что нужно. Так можно потратить очень много времени но так и не найти то, что действительно искал.
К счастью, хорошие люди составили очень полезные шпаргалки, которые не раз меня выручали. Достаточно один разобраться где что находится и затем поиск нужных свойств не составляет никаких трудностей.
Шпаргалки CSS и CSS3
Это просто незаменимые материалы при верстке и разработке дизайна сайта. Время на то, чтобы отвлекаться и искать в интернете описание свойств уменьшается во много раз.
Правда, как Вы понимаете, чем больше верстаешь сайты или занимаешься дизайном, тем меньше приходится заглядывать в эту подсказку, так как в памяти постоянно остаются все необходимые свойства. Но всё же иметь под рукой этот набор шпаргалок будет не лишним.
Это как в школе: даже если не пользуешься шпаргалкой, но с ней всё равно как-то на душе спокойнее 😆 .
CSS (Cascading Style Sheets), или каскадные таблицы стилей , используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.
Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style . Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).
Вот как это выглядит для элемента
:Способы добавления CSS стилей
Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:
- Внешняя таблица стилей — определение правил таблицы стилей в отдельном файле.css, с последующим подключением этого файла в HTML-документ с помощью тега
- Внутренняя таблица стилей — определение правил таблицы стилей с использованием тега
Пример: Внутренняя таблица стилей
- Попробуй сам »
Заголовок
Текст первый
Текст второй
Текст третий
Внутренняя таблица стилей Заголовок
Текст первый
Текст второй
Текст третий
В данном примере мы с помощью CSS установили цвет фона для элемента
: background-color:palegreen , цвет и тип шрифта для заголовков: color: blue; font-family:verdana , а также размер шрифта, цвет и выравнивание текста по центру для параграфов
: font-size:20px; color:red; text-align:center .
Встроенный стиль
Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:
Параграф
Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе
Заголовок
Текст первый
Текст второй
Текст третий