Здравствуйте уважаемые начинающие веб-мастера. В этой статье мы научимся делать красивую заглавную букву, и заставим бежать по странице любой элемент контента.
Забегая вперёд, предупрежу, что сделать красивую заглавную букву, только тегами html — не получится.
Можно конечно применить атрибут style (что я тоже покажу), и заполнить его различными свойствами, но такой код применять не рекомендуется, хотя он прекрасно работает и проходит валидацию.
Поэтому, после отладки, все свойства из атрибута style, лучше перенести в файл style.css, а элементу (красивой заглавной букве), задавать class.
Сначала посмотрим, как выглядит код заглавной буквы, созданной при помощи глобальных стилей. Тут ничего переносить и задавать не нужно.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Красивая заглавная буква</title>
<style>
/* Оформление заглавной буквы */
#yau{
color:#0000FF; /* Цвет буквы */
font-size:30px; /* Размер буквы */
font-family:"Monotype Corsiva"; /* Шрифт буквы */
}
p{
text-indent:30px; /* Красная строка */
}
</style>
</head>
<body>
<!--Первую букву абзаца берём в тег span и задаём ему идентификатор (можно class) yau-->
<p><span id="yau">Г</span>де искать Бога, и откуда ждать дьявола?
Да только в себе самом, и из себя самого! Туточки они оба.
А то - небеса-а-а, подземелья.</p>
</body>
</html>
Результат.
Где искать Бога, и откуда ждать дьявола? Да только в себе самом. Туточки они, оба. А то — небеса-а-а-а, подземелья.
И то же самое, но немного по другому — встроенные стили. Такой вариант кода можно применить, для оладки красивой заглавной буквы, в редакторе TinyMCE, установленном на CMS WordPress.
После чего, как я уже говорил, все свойства нужно будет перенести в файл style.css.
<p style="text-indent:30px;"><span style="color:#0000FF; font-size:30px; font-family:Monotype Corsiva;">Г</span>де искать Бога, и откуда ждать дьявола?
Да только в себе самом. Туточки они оба. А то небеса-а-а-а, подземелья.</p>
И ещё один вариант кода красивой заглавной буквы, который на сегодняшний день является уже устаревшим. Но так как он ещё часто встречается, я его покажу, чтоб Вы, встретив такой код, знали что это такое.
<span style = "font-size: 50px;"><font face="Monotype Corsiva">
<font color="#0000FF">Г</font></font></span>де искать Бога, и откуда ждать дьявола?
Да только в себе самом. Туточки они оба.
А то небеса-а-а-а, подземелья.
Теперь осталось выбрать красивый шрифт для буквы, и можно украшать текст. Но вот тут есть один подводный камень.
Дело в том, что декоративных шрифтов, обладающих кроссбраузерностью, в интернете нет.
«Monotype Corsiva» из семейства cursive, который я указал в коде, пожалуй единственный шрифт с заявкой на декоративность, который отобразится в большинстве браузеров.
Чтобы решить эту проблему, и выбрать что-то оригинальное, Вам нужно прочитать статью Шрифты для сайта в CSS.
В ней я рассказал, где найти оригинальный шрифт, и как применить его на своём сайте.
Как сделать красивую заглавную букву, сразу для всех абзацев статьи, можно узнать в статье Как сделать красивую заглавную букву CSS
Переходим к бегущей строке. Для того, чтобы любой элемент контента «побежал» по странице, нужно заключить его в тег
<marquee></marquee> — создаёт бегущую строку.
К сожалению этот тег до сих пор не включён в спецификацию и поэтому выдаёт ошибку при валидации.
Одна ошибка — ерунда, но когда их десяток на странице — это уже плохо. Поэтому я привожу только код, без примеров, чтоб избежать множества ошибок.
Посмотрим, как изменяется скорость, направление движения, длина беговой дорожки, и ещё кое-какие параметры.
Направление движения бегущей строки задаётся атрибутом direction. В значении указывается направление движения объекта.
left — движение влево;
right — движение вправо;
ur — движение снизу вверх;
down — движение сверху вниз;
Длина беговой дорожки, при движении по горизонтали, определяется атрибутом width, а при движении по вертикали — атрибутом height, и внедряется в тег атрибутом style.
Бежим слева направо
<marquee style="width: 300px" direction="right">Бежим слева направо</marquee>
Бежим справа налево
<marquee style="width: 300px" direction="left">Бежим справа налево</marquee>
Бежим снизу вверх
<marquee style="height:100px;" direction="up">Бежим снизу вверх</marquee>
Бежим сверху вниз
<marquee style="height:100px;" direction="down">Бежим сверху вниз</marquee>
Можно окрасить полосу в любой цвет, добавив атрибут bgcolor
<marquee style="width: 300px" bgcolor="#39c4b3" direction="right">Бежим справа налево</marquee>
Можно сделать, чтобы элемент вышел из-за границы окна и остановился, добавив атрибут behavior со значением slide.
<marquee style="width: 300px" bgcolor="#39c4b3" direction="right" behavior="slide">Выходим и останавливаемся</marquee>
Скорость движения определяется атрибутом scrollamount, в значении которого и указывается скорость, с которой будет двигаться строка. Величина значения от 1 до 10. Скорость увеличивается по мере увеличения значения.
<marquee style="width: 300px" bgcolor="#39c4b3" direction="right" scrollamount="1">Изменяем скорость движения</marquee>
Дальше, бегущей строке, можно задать различные варианты оформления, добавляя свойства в атрибут style.
И фон, и цвет, и рамку, но так же, как и в случае с красивой заглавной буквой, после отладки, все свойства лучше будет перенести в файл style.css.
Можно вставить в тег, вместо текста, любое изображение, и оно тоже станет «бегущим».
К сожалению, не знаю почему, тег maqruee не включён в спецификацию w3c, и является не валидным.
Поэтому я не могу показать Вам тут действующие примеры, слишком много ошибок получится на одной странице.
Привожу лишь код различных вариантов бегущей строки.
Желаю творческих успехов!
Перемена
-Сынок, а у вас в садике уже топят?
-Нет, пока только в угол ставят!
— Мам, а как узнать про собачку болеет она или нет?
— По носу!
— Мам, нет у нее поносу.
Кнопка HTML. < < < В раздел > > > Создание директории сайта
Нет!
Вопросов не осталось… Хорошо пояснили!
))
Ещё бы интернет пошустрее, что выдерживал все эти примочки.
Применил несколько.
Спасибо за эти коды, и с новым годом.
Да, хорошие кодики.