Хотите красиво оформленную важную цитату или эпиграф?
А вот такой блок ссылок на свои посты (мини-оглавление)?Другие полезные советы:
Почти каждый иногда задаётся вопросом: как красиво оформить текст в ЖЖ: выделить цитату или другой участок текста, сделать несколько картинок для быстрого перехода в нужные места и т.п.
Всё это решается минимальными средствами - надо только не бояться переключать редактор в режим HTML.
Тогда вы сможете легко сделать всякие красивые дизайнерские штуки.
Для тех, кому лениво пользоваться поиском или кто боится кучи незнакомых символов, покажу некоторые приёмы. Не из тех, которые гуглятся на раз, а те, которые по большей части сам сконструировал, пользуясь справочниками по HTML.
- Можно, я не буду подробно писать про цвет?
И, наконец, я надеюсь, что не надо объяснять специально, что все использованные здесь стилевые параметры можно добавлять и комбинировать в нужных сочетаниях; а синтаксис будет понятен из приведённых примеров.
Предполагается, что читатель знает на базовом уровне язык HTML и может при необходимости задать, к примеру, размеры картинки параметрами width и height, грамотно оформить ссылки, закрыть теги и т.п.
Но можно и без этого - просто скопируйте выделенный текст (не забудьте! редактор должен быть переведён в режим HTML!) и подставьте свой текст, и измените нужные значения и параметры.
Поехали.
- Выделение текста "маркером":
<span style="background-color:#FF8888;">отмеченный текст</span>
- Выделение текста с закруглением:
<span style="border-radius:8px; padding: 4px; background-color:cyan;">отмеченный текст с закруглением 8 пикселов и границей маркера с отступом в 4 пиксела от текста</span>
;- А вот так можно красиво оформлять цитаты (пример в начале поста):
<div style="border-radius:20px; padding: 20px; background-color:#6DA6C4; margin-left:40%;"><i>Хотите красиво оформленную важную цитату или эпиграф?</i></div>
Хотите красиво оформленную важную цитату или эпиграф?
Обратите внимание на разницу между тегами span и div - второй выделяет блок из целых строк, тогда как первый используется внутри строки для отдельных символов. Выделение блока имеет ряд преимуществ:
- возможность указания отступов блока (margins) для его расположения на странице (а заодно покажу и отступы текста от границ блока - padding):
<div style="background-color:#CCCCFF; margin-left:10%; margin-right:40%; padding-left:60px; padding-top:30px; padding-bottom:10px; border-right:dotted blue 7px;">размещаемый в блок текст
из нескольких строк</div>
из нескольких строк</div>
- возможность обтекания блока текстом, например, слева:
<div style="background-color:#FFCCCC; width:50%; float:right; padding:18px; margin-left:5%;">размещаемый в блок текст
из нескольких строк</div>
(Здесь текст, написанный сразу после блока div): Обратите внимание, что все размеры в HTML можно задавать как в абсолютных величинах - удобнее всего в пикселах (80px, например), так и в процентах от ширины страницы: вот здесь написали про ширину и расположение: "width:50%; float:right;" и получили блок строго в правой половине основного текста, независимо от разрешения экрана и размера окна браузера. Отступ от обтекаемого текста регулируется в данном случае параметром "margin-left:5%;"из нескольких строк</div>
- Рамка вокруг текста:
<div style="border: dotted 7px lime; border-radius:20px; padding: 8px 20px; background-color:#6DA6C4;">Текст в точечной рамке, а ещё <span style="border: ridge blue; border-radius:8px; background-color:cyan;">текст внутри строки с хитрым типом рамки, с закруглением 8 пикселов</span>
текст</div>
Кстати, в этом примере заданы отступы по вертикали и горизонтали, без подробного указания каждой из сторон.текст</div>
Надеюсь, вы также поняли, что можно тут же задавать ширину рамки (от 1px, а по умолчанию считается 3px).
И даже каждую сторону по отдельности, как в примере выше.
И вот какие типы обрамления бывают:
solid , dotted , dashed , double , groove , ridge , inset , outset
- Как писать стихи.
Чтобы написать стихотворение "лесенкой", можно использовать так называемые неразрывные пробелы:
Мы вам скажем пару слов о погоде,
Где какой открыть сезон на природе,
О дождях и о снегах,
О ветрах и облаках
И о том, как утром солнце восходит!
Где какой открыть сезон на природе,
О дождях и о снегах,
О ветрах и облаках
И о том, как утром солнце восходит!
Мы вам скажем пару слов о погоде,
Где какой открыть сезон на природе,
О дождях и о снегах,
О ветрах и облаках
И о том, как утром солнце восходит!
(читать полностью)
Где какой открыть сезон на природе,
О дождях и о снегах,
О ветрах и облаках
И о том, как утром солнце восходит!
(читать полностью)
Есть и более простой и наглядный способ с применением тега предварительного форматирования pre:
<pre>Края синих туч
на закатной поре
сияют огнём зололтым...</pre>
Края синих туч
на закатной поре
сияют огнём зололтым...
(читать полностью)
К сожалению, на многих серверах (как на упомянутом Стихи.ру) HTML-теги запрещены совсем, и там для форматирования стихов лесенкой остаётся только первый способ с неразрывными пробелами.
- Красивое мини-оглавление.
Раньше был единственный способ сделать такую конструкцию - через таблицу.
Приведу без пояснений, чтобы не затягивать на несколько страниц рассказ про то, как делать таблицы:
<table border="0" cellspacing="8" cellpadding="7" bgcolor="#BBEEEE">
<tr valign="top" bgcolor="#BBEEEE">
<td colspan="3">Заголовок</td></tr>
<tr valign="top" bgcolor="#BBEEEE">
<td bgcolor="#DDFFF8">Ячейка 1</td>
<td bgcolor="#DDFFF8">Ячейка 2</td>
<td bgcolor="#DDFFF8">Ячейка 3</td>
</tr></table>
<tr valign="top" bgcolor="#BBEEEE">
<td colspan="3">Заголовок</td></tr>
<tr valign="top" bgcolor="#BBEEEE">
<td bgcolor="#DDFFF8">Ячейка 1</td>
<td bgcolor="#DDFFF8">Ячейка 2</td>
<td bgcolor="#DDFFF8">Ячейка 3</td>
</tr></table>
| Заголовок | ||
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
В последнее время, с развитием стандарта HTML, стало возможно обойтись без таблицы, одними тегами div (хотя я не уверен, что во всех браузерах это будет показываться правильно). Зато без дополнительных телодвижений получаются закруглённые углы:
<div style="width:278px; border-radius:20px; background-color:#6da6c4; padding:8px;">Заголовок
<div style="border-radius:15px; padding:12px; margin-top:8px; margin-left:8px; background-color:#bdd6d4; width:60px; float:left">Ячейка 1
</div><div style="border-radius:15px; padding:12px; margin-top:8px; margin-left:8px; background-color:#bdd6d4; width:60px; float:left">Ячейка 2
</div><div style="border-radius:15px; padding:12px; margin-top:8px; margin-left:8px; background-color:#bdd6d4; width:60px; float:right">Ячейка 3
</div>
</div>
<div style="border-radius:15px; padding:12px; margin-top:8px; margin-left:8px; background-color:#bdd6d4; width:60px; float:left">Ячейка 1
</div><div style="border-radius:15px; padding:12px; margin-top:8px; margin-left:8px; background-color:#bdd6d4; width:60px; float:left">Ячейка 2
</div><div style="border-radius:15px; padding:12px; margin-top:8px; margin-left:8px; background-color:#bdd6d4; width:60px; float:right">Ячейка 3
</div>
</div>
Заголовок
Ячейка 1
Ячейка 2
Ячейка 3
P.S. И верно, не везде показывается правильно. Как всегда, проблемы вылезают в ленте из-за увеличенных шрифтов.
Посмотрите, как у вас?
Ещё по теме:
• Большой справочник по HTML, где следует смотреть подробную справку и варианты использования всех тегов и их параметров.
Спрашивайте, что непонятно, или что хотите ещё узнать про HTML-дизайн текста в ЖЖ!
