Версия для печати темы

Нажмите сюда для просмотра этой темы в оригинальном формате

Форум на все случаи жизни _ WEB дизайн и прикладное программирование _ Форматируем текст

Автор: Ann 25.02.2011 - 11:09

Тут рассматриваем варианты форматирования текста - рецепты, тонкости, секреты :)

Как правило в тексте бывает "красная строка".
Как ее сделать?
Простейший способ - поставить в начале строки несколько пробелов

Код

Но правильнее использовать свойство text-indent, задающее отступ первой строки блока.
Например, прописываем для тега:

Код

p {
text-indent: 20px;
}

В дальнейшем все абзацы, вложенные в этот тег будут начинаться с красной строки.

---------------------------
Делаем подзаголовок

Используем свойство :first-line - оно задает стиль первой строки текста

Код

P:first-line {
     color: #009966;
     font-style: italic;
     font-weight: bold;
}

Автор: Ann 25.02.2011 - 11:21

Междустрочный интервал - задаем свойством line-height - указываем его размер :)
1.5 интервала, 2 интервала и т.д.

Код

p {
line-height: 1.5;
}

Между абзацами по умолчанию большой отступ. Уменьшить его можно с помощью свойства margin-bottom, дав ему ему отрицательное значение.

Код

p {
margin-bottom: -10px;
}

Автор: Ann 25.02.2011 - 18:27

применим сразу все вышесказанное

Код

в результате получим такой текст

Автор: Ann 25.02.2011 - 19:10

Создаем буквицу
используем для этого - :first-letter, который определяет стиль первой буквы в тексте

задаем стили, в том числе картинку - подложку под заглавную букву в красной строке.
например так:

Код

p:first-letter
{
background: url(2.jpg) no-repeat;
color: #009966;
font-size: 600%;
margin-right: 5;
float: left
}

в результате получим примерно следущее

Прикрепленное изображение