Как красиво оформить текст | Несколько CSS-примеров

Часто я применяю одно и то же оформление текста с помощью разных методов. В основном это код CSS. Чтобы окончательно закрепить эти приемчики, я для себя и для вас приведу несколько примеров, которые можно схожу брать на вооружение.

Чтобы получить такую надпись, посмотрите ее код:

Как написать текст <sub>нижним</sub> или <sup>верхним</sup> индексом

Для этого нужно в файле style.css прописать оформление горизонтальной черты, которая будет, например, красного цвета:

hr {color:red;background-color:red;height:1px;border-width:0px;}

После этого у вас в блоге все сплошные горизонтальные линии, которые ставятся через разметку hr, будут красные.

Например, вы пишите об орфрграфических ошибках, и хотите привести пример такой ошибки, выделенный привычным всем способом —как в Ворде, красной волнистой линией. Сделать это можно, описав такую линию в style.css, предварительно расположив в блоге картинку красной волнистой линии:

.redline {background: url(redline.gif) repeat-x 100% 100%; padding-bottom: 2px; text-decoration: none; white-space: nowrap;}

После этого пишен наше слово с ошибкой с подчеркиванием:

 <span class="redline">ашипка</span> 

Легко:

<p style="text-indent: 20px">Ваш текст</p>

20 — это количество точек отступа. Можно применять и отрицательное значение — тогда первая строчка быдет выделяться из обзаца. Отступ/выступ действует только на первую строчку.

Пример:

Лорем ипсум.
Второй лорем ипсум.

Код примера:

<p style="text-indent: 20px">Лорем ипсум.<br><em>Второй лорем ипсум.</em></p>

Пять постов для перелинковки:

1. Хотите сами установить порядок страниц в блоге? Как отсортировать страницы.
2. Страницы отсортировали, а теперь очередь за ссылками? Как отсортировать ссылки.
3. Надоело записывать на листочках? Заведите записную книжку прямо в блоге! Как сделать в блоге список дел.
4. Нужно красивое облако тегов? Как красиво вывести облако тегов.
5. Хотите сойти за умного, вставив мудрые высказывания? Как вывести цитаты.