• Авторизация
Дневник boginja007 Лента друзей - Дневник - Полная версия


Шпаргалка HTML 06-07-2009 11:42 к комментариям - к полной версии - понравилось!

Это цитата сообщения НК_Белые_кроссовки Оригинальное сообщение

По этой шпаргалке можно делать так, чтобы строка ползала слева направо или сверху вниз, делать буквы разноцветными и увеличивать их, делать всплывающие надписи на картинках и многое другое.

 

[показать]
Форматирование текста
          Зачеркнутый текст <s> ТЕКСТ </s> — ТЕКСТ

          Подчёркнутый текст<u> ТЕКСТ </u> — ТЕКСТ

          Полужирный текст<b> ТЕКСТ </b> — ТЕКСТ

          Полужирный крупный <big> ТЕКСТ </big> — ТЕКСТ

          Курсивный текст<i> ТЕКСТ </i> — ТЕКСТ

          Маленький текст<small> ТЕКСТ </small> — текст

          Неразрывный пробел &*nbsp; (* убрать)

          Сноска вверху <sup> сноска</sup> ТЕКСТ сноска

          Сноска внизу <sub> сноска</sub> ТЕКСТ сноска

          Отступ <blockquote> текст</blockquote> —
          отступ от отстального текста
          вот так


          Ударéние (тэг ставим после нужной буквы) — &*#769; (* убрать)

          Текст с подсказкой:
          Подведи курсор к тексту!

          <q title="текст подсказки"> Подведи курсор к тексту!</q>

манипуляции с курсором
          С помощью стилей можно переопределить вид курсора и выбрать один из пятнадцати доступных вариантов.
                • Наведите курсор на текст! Это default.
                • Наведите курсор на текст! Это auto.
                • Наведите курсор на текст! Это text.
                • Наведите курсор на текст! Это crosshair.
                • Наведите курсор на текст! Это e-resize.
                • Наведите курсор на текст! Это w-resize.
                • Наведите курсор на текст! Это n-resize.
                • Наведите курсор на текст! Это s-resize.
                • Наведите курсор на текст! Это ne-resize.
                • Наведите курсор на текст! Это sw-resize.
                • Наведите курсор на текст! Это nw-resize.
                • Наведите курсор на текст! Это se-resize.
                • Наведите курсор на текст! Это wait.
                • Наведите курсор на текст! Это hand.
                • Наведите курсор на текст! Это pointer.
                • Наведите курсор на текст! Это help.
                • Наведите курсор на текст! Это move.
          Если вы желаете переопределить курсор мыши для всей веб-страницы целиком, а не только для ссылок, воспользуйтесь селектором BODY:


          <html>

          <head>

          <style type="text/css">

          body { cursor: crosshair }

          </style>

          </head>
          Также можно задать разный вид курсора для отдельных областей веб-страницы, используя теги DIV или SPAN:

          На этом тексте курсор примет вид перекрестья.


          Синтаксис:
          <span style="cursor:crosshair">На этом тексте курсор примет вид перекрестья.</span>

          Внимание!

          Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту.
          Многих пользователей подобные изменения могут ввести в заблуждение: когда, например, вместо традиционной «руки», появляющейся при наведении на ссылку, возникает нечто другое.
          В большинстве случаев лучше оставить все по умолчанию.
Тег SPAN
          Тег SPAN предназначен для определения встроенных элементов документа. Иначе говоря, Элемент SPAN определяет контейнер для внутреннего текста.

          В отличие от блочных элементов, таких как TABLE, P или DIV, с помощью тега SPAN можно выделить часть информации внутри других тегов и установить для нее свой стиль.
          Например, внутри параграфа (тега P) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег SPAN и определить для него стиль текста.

          Вот несколько примеров применения этого тега:

          ЧЕРНЫЙ ТЕКСТ ПЕРЕЧЕРКНУТ КРАСНОЙ ЛИНИЕЙ

          <span style="color:red;text-decoration:line-through;"><span style="color:black">ЧЕРНЫЙ ТЕКСТ ПЕРЕЧЕРКНУТ КРАСНОЙ ЛИНИЕЙ</span></span>
          СИНИЙ ТЕКСТ ПЕРЕЧЕРКНУТ ЖЕЛТОЙ ЛИНИЕЙ

          <span style="color:YELLOW;text-decoration:line-through;"><span style="color:BLUE">СИНИЙ ТЕКСТ ПЕРЕЧЕРКНУТ ЖЕЛТОЙ ЛИНИЕЙ</span></span>
          КОРИЧНЕВЫЙ ТЕКСТ ПОДЧЕРКНУТ ОРАНЖЕВОЙ ЛИНИЕЙ

          <span style="color:darkorange;text-decoration:underline;"><span style="color:brown">КОРИЧНЕВЫЙ ТЕКСТ ПОДЧЕРКНУТ ОРАНЖЕВОЙ ЛИНИЕЙ</span></span>
          ОРАНЖЕВЫЙ ТЕКСТ В СЕРОЙ РАМКЕ

          <span style="border:1px solid darkgray;"><span style="color:orange;">ОРАНЖЕВЫЙ ТЕКСТ В СЕРОЙ РАМКЕ</span></span>
          Скоро сказка сказывается...

          <span style = "font-size: 100px;"><FONT FACE="Comic Sans MS"><FONT COLOR="#FF0000">С</FONT></FONT></span>коро сказка сказывается...

          Д а не скоро дело делается... а не скоро дело делается...

          <span style = "font-size: 100px;"><FONT FACE="Monotype Corsiva"><FONT COLOR="#0000FF">Д</FONT></span> а не скоро дело делается...</FONT>

          В зависимости от того, где мы пропишем второй закрывающий тег </font>, текст после нашей "буквицы" будет набран таким же шрифтом или вернется в свое исходное состояние, обусловленное стилем страницы. Во втором предложении этот тег поставлен только после многоточия, а в первом после буквы "С".
Бегущая строка
          1. <MARQUEE>Ваш текст</MARQUEE>
          Вот так!

          2. <MARQUEE style="HEIGHT: 50px" direction=up>Ваш текст</MARQUEE>
          или так

          3. <MARQUEE style="HEIGHT: 50px" direction=down>Ваш текст</MARQUEE>
          ну и вот так

          4. <MARQUEE style="WIDTH: 200px" direction=right>Ваш текст</MARQUEE>
          или даже так

          5. <MARQUEE style="WIDTH: 200px" direction=left>Ваш текст</MARQUEE>
          а уж так!

          6. <MARQUEE style="WIDTH: 200px" behavior=alternate>Ваш текст</MARQUEE>
          и так можем



          Переменные:
          HEIGHT высота "окошка", в котором двигается текст;
          WIDTH расстояние, на которое перемещается текст.

          Можно ли уменьшить скорость прокрутки при использовании тега marquee?
          Так вот, для этого необходимо в открывающий тег добавить параметр scrollamount="Х", где Х — скорость прокрутки от 1 до 9.
          Результат будет выглядеть так:

          <MARQUEE style="WIDTH: 200px" direction=right scrollamount="Х">

          Тег <marquee> заставляет двигаться не только текст, но всё, к чему он относится.
          Пример:
[показать]
          Синтаксис: <MARQUEE><img src="ros.gif"></MARQUEE>
Работаем с графикой
          Если нужно просто дать пояснение к своей картинке, то для того, чтобы получить всплывающую строку, нужно вписать тэг ALT="Пояснение"
вверх^ к полной версии понравилось! в evernote
Комментарии (20):
FIERWIND 06-07-2009-11:48 удалить
Очень мне понравилось,классно*
Обратиться - Ответить - К полной версии
Андрей_Усманов 06-07-2009-11:49 удалить
Спасибо, заберу на память;)
Обратиться - Ответить - К полной версии
boginja007 06-07-2009-11:54 удалить
Ответ на комментарий FIERWIND # Еще бы это все запомнить!
Обратиться - Ответить - К полной версии
boginja007 06-07-2009-11:54 удалить
Ответ на комментарий Андрей_Усманов # На здоровье!
Обратиться - Ответить - К полной версии
Фея77 06-07-2009-11:59 удалить
Здорово. Спасибо большое.
Обратиться - Ответить - К полной версии
boginja007 06-07-2009-12:44 удалить
Ответ на комментарий Владимир_Шильников # На здоровье
Обратиться - Ответить - К полной версии
boginja007 06-07-2009-13:32 удалить
Ответ на комментарий Азовец # Ага! Всегда есть рядом девочки. которые это сделают::))
Обратиться - Ответить - К полной версии
boginja007 06-07-2009-15:00 удалить
Ответ на комментарий Ириночка_Копылова #
Обратиться - Ответить - К полной версии
boginja007 06-07-2009-15:01 удалить
Ответ на комментарий Lusha_Lenina # ^^))
Обратиться - Ответить - К полной версии
ANDREI-STOLIAR 06-07-2009-22:47 удалить
спасибо!!!заберу а вдруг пригодиться...
Обратиться - Ответить - К полной версии
Zosik_K 06-07-2009-23:37 удалить
спасибо за полезность!!!
Обратиться - Ответить - К полной версии
boginja007 07-07-2009-14:01 удалить
Ответ на комментарий Симонова_Галина #
Обратиться - Ответить - К полной версии
boginja007 07-07-2009-14:01 удалить
Ответ на комментарий Zosik_K #
Обратиться - Ответить - К полной версии
boginja007 07-07-2009-14:01 удалить
Ответ на комментарий ANDREI-STOLIAR # ::))
Обратиться - Ответить - К полной версии


Комментарии (20): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник Шпаргалка HTML | boginja007 - Дневник boginja007 | Лента друзей boginja007 / Полная версия Добавить в друзья Страницы: раньше»