Tекст
Your text | <s>Your text</s> |
Your text | <u>Your text</u> |
Your text | <b>Your text</b> |
Your text | <samp>Your text</samp> |
Your text | <big>Your text</big> |
Your text | <i>Your text</i> |
Your text | <b><i>Your text</i></b> |
Your text | <u><b><i>Your text</i></b></u> |
Your text | <small>Your text</small> |
TEXTsup | TEXT<sup>sup</sup> |
TEXTsub | TEXT<sub>sub</sub> |
Your text
<font size="+4">Your text</font>
Your text
<font size="+3">Your text</font>
Your text
<font size="+2">Your text</font>
Your text
<font size="+1">Your text</font>
Your text
<font size="-2">Your text</font>
<font style="font-size:7pt;">ТЕКСТ</font> Минимальное значение font-size:1pt (самый мелкий)
Аналогично делается суперкрупный шрифт. Меняем вид шрифта:
Your very intresting text
<font face="Monotype Corsiva">ТЕКСТ</font>
Your very intresting text
<font color="FF0000">ТЕКСТ</font> На заметку: typetester.org — полезный сайт для желающих поэкспериментировать с текстом
Your very intresting text
<font face="Monotype Corsiva" size="+2" color="FF0000">TEXT</font>
СИНИЙ ТЕКСТ ПЕРЕЧЕРКНУТ КРАСНОЙ ЛИНИЕЙ<span style="color:red;text-decoration:line-through;"><span style="color:blue">YOUR TEXT</span></span> Синий текст подчеркнут красной линией
<span style="color:red;text-decoration:underline;"><span style="color:blue">Your text</span></span>
Синий текст в красной рамке<span style="border:2px solid red; padding:3px;"><span style="color:blue;">Синий текст в красной рамке</span></span> Цветной текст с цветным фоном
<span style="background-color:blue; color:white; padding:3px;">Цветной текст с цветным фоном</span>
Цветной текст с цветным фоном в цветной рамке
<span style="background-color:dodgerblue; color:white; padding:3px; border:3px solid red;">Текст</span>
Текст, подчеркнутый пунктиром<span style="border-bottom: 2px dashed red;">Текст, подчеркнутый пунктиром</span>
Текст, подчеркнутый точками<span style="border-bottom: 3px dotted lime;">Текст, подчеркнутый пунктиром</span>
Текст, подчеркнутый двойной чертой<span style="border-bottom: double red;">Текст, подчеркнутый двойной чертой</span>
Текст, окаймленный разноцветным пунктиром
<span style=border-style:dashed; border-top-color:blue; border-bottom-color:red; padding:5px;> Текст </span>
Текст в двойной рамке
<span style="border-style: double; padding:3px;">Текст в двойной рамке</span>
Цветной текст в двойной цветной рамке
<span style="border-style: double; color: green; padding:3px;"><span style="color:blue;">Цветной текст в двойной цветной рамке</span></span>
Ваш текст в объемной 3D-рамке
<span style="border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст в объемной 3D-рамке</span>
Тег span (строчный) во всех приведенных примерах можно заменять на div (блочный элемент) и получим (на примере выше): Ваш текст в объемной 3D-рамке
то бишь рамку на всю ширину поста.
Размеры блока div задаются атрибутами:
div style=width:200px; height:50px;
где width:200px; — ширина блока 200 пикселей,
height:50px; — высота блока 50 пикселей
Получим:
Ваш текст в объемной 3D-рамке<div style="width:200px; height:50px; border-width:thick; border-style:groove; padding:4px; border-color:#FF5730"> Ваш текст </div>
№ 1 | № 2 | № 3
Аббревиатура: HTML
<acronym title="Hiper Text Markup Language">HTML</acronym>
Так называемый «спойлерный» текст, проявляющийся при его выделении. Типа:«А убийцей в том кино был дворецкий«
<span style="background-color:#FFFFFF; color:#FFFFFF">спойлерный текст</span> Так называемая «буквица»: В некотором царстве…
<font size="+4" face="Monotype Corsiva" color="#0000FF">В</font> <i>некотором царстве…</i>
Всплывающее окошко с пояснением при наведении на текст курсора (подведите курсор к следующему тексту):Ваш офигительно креативный текст
<p title="Пояснительный текст">Основной текст</p>
Текст «наоборот»:Повернуть текст задом-наперед
<bdo dir="rtl">Повернуть текст задом-наперед</bdo> Расстояние между словами
<div style="word-spacing: 20px;">Расстояние между словами</div>
Больше расстояние между словами<div style="word-spacing: 40px;">Больше расстояние между словами</div>
Расстояние между буквами<div style="letter-spacing: 10px;">Расстояние между буквами</div>
А здесь задано расстояние между строками по вертикали пятьдесят пикселов<div style="line-height:50px;">Расстояние между строками</div>
Невидимый фрагмент записи (интересно, что невидим даже в OperaMini, хотя мобильные браузеры игнорируют многие стилевые настройки): опаньки! Невидимый фрагмент записи<div style="visibility: hidden;">Невидимый фрагмент записи</div>
Еще способ скрыть текст:<!— Ваша служебная невидимая пометка —>
Приподнять одну фразу на 5 пикселей над текстомПриподнять <span style="position: relative; top:-5px;">фразу</span>
Опустить одну фразу на 5 пикселей ниже текстаОпустить <span style="position: relative; bottom:-5px;">фразу</span>
Повернуть текст на 90 градусов (работает только в IE):Раз, два, три, четыре, пять, шесть, семь
<span style=writing-mode:tb-rl;>Текст</span>
Следующий трюк, напротив, работает только в Opera и Mozilla FF:Раз, два, три, четыре, пять, шесть
<span style=text-decoration:blink;>TEXT</span>
Выделение цитаты в тексте.Пример:
Еще поэт-романтик Новалис писал в Средние Века: Любимая! Ты — аббревиатура Вселенной.
<div style="border-right: #000080 1px solid; padding-right: 4px; border-top: #000080 1px solid; padding-left: 3px; font-size: 92%; padding-bottom: 4px; border-left: #000080 1px solid; color: #000080; padding-top: 2px; border-bottom: #000080 1px solid; background-color: #f0f0ff"> ТЕКСТ ЦИТАТЫ</div>
Написать текст, имея фоном картинку: Светить всегда, светить везде — до дней последних донца! Светить — и никаких гвоздей!<div style="font-size: 15px; font-weight: bold; font-family: Georgia; color: white; padding: 8px; background-image:url("URL картинки");"> ТЕКСТ</div>
Лучше брать маленькую картинку — она будет автоматом повторяться, пока продолжается текст. Атрибутами width и height в % или px (пикселах) можно задать определенный размер фоновой области
Эффект с подсветкой текста (наведите курсор на текст):в некоторых блогсервисах (жж) может не работать
МОЙ ЗАМЕЧАТЕЛЬНЫЙ И КРЕАТИВНЫЙ ТЕКСТ
<font onmouseover="style.backgroundColor='pink'; style.cursor='hand'" onMouseOut="style.backgroundColor='silver';">МОЙ ТЕКСТ</font>
Разбить текст на две колонки:текст левой колонки | текст правой колонки |
Код:
<table width=100%>
<tr><td width=50%>
текст левой колонки
<td width=50%>
текст правой колонки
</table>
Пример © J.Shaffer 1928
<div align=right><cite title="Информация">© АВТОР</cite></div>
“Тег-закрепитель” (фиксирует текст так, как и расположите его в поле поста):Я
Пешу
Лесинкой!!! <pre>ваш текст</pre>
Есть особенность. Текст, заключенный в тег pre отобразится в окне браузера так называемым «моноширинным» шрифтом. Обычно в качестве такого шрифта используется Courier New. Если вас это не устраивает, воспользуйтесь встроенными стилями и назначьте свой шрифт: C Днем Рождения!
<pre style="font-family:'Arial Black'">ваш текст</pre>
Первые ситкомы, как правило, снимались в студии, перед публикой, поэтому для них характерен закадровый смех.
Ситком устроен по-другому, нежели фильм, где стиль игры более реалистичный. Обычно на съемках 95% ситкомов есть живая публика, аудитория, смех которой и звучит за кадром. Это преувеличенный стиль игры, голоса должны передавать больше эмоций и быть просто громче; много не вполне естественной мимики и жестов.<p style="padding-right: 15px; margin-top: 0px; float: left; margin-bottom: 3px; width: 30%; color: blue;">Текст внутри</p> Обтекающий текст
Быстро написать так: Мои поздравления!!!
Можно ЗДЕСЬ