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

👍 Научим создавать сайты на WordPress бесплатно за 19 уроков. Подробнее →

Часто я применяю одно и то же оформление текста с помощью разных методов. В основном это код 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. Хотите сойти за умного, вставив мудрые высказывания? Как вывести цитаты.
Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий