n-wp.ru — блог о WordPress

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

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

Как написать текст нижним или верхним индексом

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

Как сделать горизонтальную черту определенного цвета

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

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

Как подчеркивать слово красной волнистой линией

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

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

Как сделать отступ первой строки абзаца (как в книгах)

Легко:

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

Пример:

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

Код примера:

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

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

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

Комментировать