Мобильный LiveInternet Жирный шрифт, курсив, малые прописные буквы

Авторизация

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

Жирный шрифт, курсив, малые прописные буквы 21-09-2016 17:48 к комментариям - к полной версии - понравилось!

Жирный шрифт, курсив, малые прописные буквы,
"плавающий" текст, рамочки

Жирность шрифта определяется при помощи атрибута CSS font-weight, который может принимать следующие значения:

lighter - светлее
normal - обычный
bold - жирный
bolder - более жирный

например:

Текст
<span style="font-weight:bold"> Текст</span>

100..900 - 100 соответствует самому тонкому шрифту; 900 - самому толстому

например:

Текст
<span style="font-weight:900;">Текст </span>

Атрибут font-style (начертание шрифта) служит для написания курсивом и может принимать следующие значения:

italic - курсив, края текста скруглены
normal - обычный
oblique - курсив

например:

Текст
<span style="font-style:italic; font-variant:small-caps">Текст</span>
Текст
<span style="font-style:normal; font-variant:small-caps">Текст</span>
Текст
<span style="font-style:oblique; font-variant:small-caps">Текст</span>

Атрибут font-variant (разновидность шрифта) служит для написания малыми прописными буквами и может принимать следующие значения:

normal - обычный
smaoo-caps - малые прописные

например:

Текст
<span style="font-style:italic; font-variant:normal">Текст</span>
Текст
<span style="font-style:oblique; font-variant:smaoo-caps">Текст</span>

Наряду с жирным, курсивом и малыми прописными существует еще несколько популярных видов начертания: подчеркивание и маркировка.

Атрибут text-decoration (украшение текста) служит для подчеркивания текста и может принимать следующие значения:

blink - мерцающий текст (не поддерживается IE)
line-through - перечеркнутый текст
none - без изменений
overline - линия над текстом
underline - подчеркнутый текст

например:

Текст
<span style="text-decoration:line-through; text-transform:uppercase">Текст</span>
Текст
<span style="text-decoration:none; text-transform:uppercase">Текст</span>
Текст
<span style="text-decoration:overline; text-transform:uppercase">Текст</span>
Текст
<span style="text-decoration:underline; text-transform:uppercase">Текст</span>

Атрибут text-transform (преобразование текста) служит для работы с малыми прописными буквами и может принимать следующие значения:

capitalize - все слова начинаются с прописной буквы
lowercase - весь текст пишется строчными буквами
none - без изменений
uppercase - весь текст пишется прописными буквами

например:

Текст <span style="text-decoration:none; text-transform:capitalize">Текст</span>
Текст
<span style="text-decoration:blink; text-transform:lowercase">Текст</span>

Как делать стили для текста

ЕЩЕ:

ЖИРНЫЙ
<span style="font-weight:bold">ЖИРНЫЙ</span>
Курсив
<span style="font-style:italic; font-variant:small-caps">Курсив</span>
Подчеркнутый
<span style="text-decoration:underline; text-transform:uppercase">Подчеркнутый</span>
Текст жирный шрифт
<span style="font-family: Tahoma; font-weight: 400;">Текст <b>жирный шрифт</b></span>
не жирный Жирный
<span style="font-family: Tahoma;">не жирный <b>Жирный</b></span>
ТЕКСТ
<span style="font-family:Verdana;color:#353C45;font-size:РАЗМЕР ШРИФТАpx">ТЕКСТ</span>

+++++++++++++++++++++++++++++++++++++++

Можно искусственно сделать сам заголовок не жирным, а только часто жирным шрифтом

Заголовок с жирным текстом

текст

<h1><b>текст</b></h1> <b></b>

текст

<h5><b>текст</b></h5> <b> </b>

++++++++++++++++++++++++++++++++++++++++++++
изменение вида шрифта

ВАШ ТЕКСТ
<span style="color:darkorange;text-decoration:underline;"><span style="color:brown">ВАШ ТЕКСТ</span></span>

ВАШ ТЕКСТ
<span style="border:1px solid darkgray;"><span style="color:DarkViolet;">ВАШ ТЕКСТ</span></span>

ТЕКСТ ВАШ ТЕКСТ
<span style="font-size: 100px;"><font face="Monotype Corsiva"><font color="#0000FF">ТЕКСТ”</font></font></span> ВАШ ТЕКСТ

ТЕКСТВАШ ТЕКСТ
<span style="font-size: 100px;"><font face="Comic Sans MS"><font color="#FF0000">ТЕКСТ</font></font></span>ВАШ ТЕКСТ

текст
<span style="font-size:20px;"><font face="Comic Sans MS">текст</font></span>

текст мелкий текст
<small> текст мелкий </small> текст

текст
<span style="cursor:crosshair">***ВАШ ТЕКСТ***</span>

ВАШ ТЕКСТ
<font color="red" size="5">***ВАШ ТЕКСТ***</font>

http://verano.ucoz.ru/HTML.html

++++++++++++++++++++++++++++++++++++++
Плавающий текст

Влево,
<marquee>Влево</marquee>
вправо
<marquee style="HEIGHT: 50px" direction="right">вправо, </marquee>
вверх
<marquee style="HEIGHT: 50px" direction="up">вверх</marquee>
вниз
<marquee style="HEIGHT: 50px" direction="down">вниз</marquee>
влево
<marquee style="WIDTH: 200px" direction="left">влево</marquee>
вправо
<marquee style="WIDTH: 200px" direction="right">вправо</marquee>
дрожащий
<marquee style="WIDTH: 200px" behavior="alternate">дрожащий</marquee>

__________________________________________________

Плавающая картинка:

<marquee>ФОТО,КАРТИНКА,ТЕКСТ</marquee>

кнопочка перехода по ссылке:

<a target="_blank" title="https://vk.com/tais66" href="https://vk.com/tais66"><img src="http://img1.liveinternet.ru/images/attach/d/1/131/595/131595823_704530356.gif" width="170" height="175" alt="813090969 (170x175, 12Kb)" /></a>

<a target="_blank" title="https://vk.com/tais66" href="https://сайт, страница"><img src="картинка" /></a>

<a href="1.html" target="_blank"><img src="http://img1.liveinternet.ru/images/attach/d/1/131/595/131595821_preview_846510944.gif"/> <a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://img1.liveinternet.ru/images/attach/d/1/131/595/131595821_846510944.gif" target=_blank border="0">[показать]</a></a><br />

текст между двух картинок

"***ВАШ ТЕКСТ******ВАШ ТЕКСТ******ВАШ ТЕКСТ******ВАШ ТЕКСТ***"

<image align="LEFT" valign="MIDDLE" src="картинка" alt="№1"><image align="RIGHT" valign="MIDDLE" src="картинка" alt="№2"><br /> "***ВАШ ТЕКСТ***" </image></image>

__________________________________
черта

1.

<hr />

2.

<hr size="3" color="#FF0000" />

3.

<hr size="6" color="#00B344" />

4.

<hr color="red" width="50%" size="9" style="border: dotted 5pt; border-color: red " />

5.

<hr color="black" width="50%" size="5" style="border: dashed 5pt; border-color: Forestgreen " />

6.

<hr color="blue" width="50%" size="7" style="border: dotted 5pt; border-color: red " />

можно все менять :

+++++++++++++++++++++++++++++++

рамочки:

++++1++++

***ВАШ ТЕКСТ***

<blockquote style="border:3px #00B344 dashed; padding: 15px; margin:0px 0px 0px 0px;">***ВАШ ТЕКСТ***</blockquote>

++++2++++

***ВАШ ТЕКСТ***

<blockquote style="background-color: #FFE4B5; border:3px #BC8F8F solid; padding: 10px; margin:0px 0px 0px 0px;">***ВАШ ТЕКСТ***</blockquote>

++++3++++

***ВАШ ТЕКСТ***

<blockquote style="border:3px #DA70D6 solid; padding: 5px; margin:0px 0px 0px 0px;">***ВАШ ТЕКСТ***</blockquote> КОД ДЛЯ ВСТАВКИ

++++4++++

[показать]***ВАШ ТЕКСТ***

<blockquote style="background-color: #E0FFFF; border:3px #87CEEB solid; padding: 15px; margin:0px 0px 0px 0px;"><img src="pp.gif" border="0" />***ВАШ ТЕКСТ***</blockquote>

++++5++++

Ваш текст

<br /> <blockquote style="BORDER-LEFT: #0000FF 6px solid; padding: 15px; BORDER-TOP: #ff6600 6px solid; padding: 15px; BORDER-BOTTOM: #00B366 6px solid; padding: 15px;BORDER-RIGHT: #FF0000 6px solid" 15px="15px"><br /> <br /> <table style="border:0px none #000000;background-image:url(http://img1.liveinternet.ru/images/attach/d/0/138/327/138327515_0_dac57_e07c6421_orig.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="center"><font face="Times New Roman" color="#1919B3" style="font-size:24px"><br /> Ваш текст<br /> <br /> </font></td></tr></table><br /> <br /> </blockquote>

++++6++++

<button title="картинка"><table border="5"><tbody><tr><td><center><font color="#BA55D3" size="4">***ВАШ ТЕКСТ***</font></center></td></tr></tbody></table></button>

__________________________________________

<form action="http://img1.liveinternet.ru/images/attach/d/1/131/595/131595819_67719583.gif" target="_blank" method="get"><input type="submit" value=".......***ВАШ ТЕКСТ***..............." /></form>

____________________________________________

++++++++++++++++++++++

Как сделать свою, оригинальную кнопочку, для ссылок на сайты
Для тех, кто не умеет это делать, даю ее формулу вот в этом окошечке.

ССЫЛКА

<div align="center"><br /> <br /> <a href="http://www.liveinternet.ru/journal_proc.php?action=redirect&url=адрес ссылки" target="_blank"> <img src="URL адрес картинки" border="0" /></a> <br /> </div>

[показать]

Вместо слов АДРЕС ССЫЛКИ, подставите адрес сайта, куда поведет ваша ссылка. Вместо слов URL АДРЕС КАРТИНКИ, ставите адрес вашей кнопочки. ЭТО КОД РАДИКАЛА №1, или с альбомов ЯНДЕКС ФОТО выбираете АДРЕС КАРТИНКИ. Если кнопочка ваша на прозрачном фоне, то не забывайте снять ВСЕ галочки на радикале.
Успехов в вашем творчестве. Фантазируйте, пробуйте смелее, и у вас все получится.

================================================

красивый курсор

<div align="center"><br /> <font style="cursor:URL('http://img1.liveinternet.ru/images/attach/c/9/106/872/106872757_1_KURSOR.png'),auto;"><br /> </font></div>

<div align="center"><br /> <font style="cursor:URL('ВАША КАРТИНКА'),auto;"><br /> <br /> </font></div>

===================================================

шаблоны окошек

ТЕКСТ
КОД ДЛЯ ВСТАВКИ

<div align="center"><textarea name="textpole" rows="1" cols="20"> КОД ДЛЯ ВСТАВКИ

++++++++++++++++++++++++++++++++++++

Список шрифтов для использования в HTML-коде | HD Systems Worldwide

http://www.hdsw.ru/?p=21&_utl_t=li
______________________________

Gobo

вверх^ к полной версии понравилось! в evernote

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

Дневник Жирный шрифт, курсив, малые прописные буквы | GOBO - Дневник GOBO | Лента друзей GOBO / Полная версия Добавить в друзья Страницы: раньше»

Заголовок с жирным текстом

текст

текст

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