IPB

Здравствуйте, гость ( Вход | Регистрация )

> Правила форума

Все ссылки на сторонние ресурсы, за исключением офсайтов программ, должны оформляться с помошью тега скрытого текста - [hide=1]Ссылка[/hide]

> Форматируем текст, красивое оформление
Ann
25.02.2011 - 11:09
Сообщение #1



 
Group Icon
Группа: Супермодераторы
Сообщений: 906
Регистрация: 1.12.2002

Пользователь №: 3212




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

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

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

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


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

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

Код
P:first-line {
     color: #009966;
     font-style: italic;
     font-weight: bold;  
}
User is offlineProfile Card PM
Go to the top of the page
+
 
Reply to this topicStart new topic
Ответов(1 - 3)
Ann
25.02.2011 - 11:21
Сообщение #2



 
Group Icon
Группа: Супермодераторы
Сообщений: 906
Регистрация: 1.12.2002

Пользователь №: 3212




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

Код
p {
line-height: 1.5;
}


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

Код
p {
    margin-bottom: -10px;
   }
User is offlineProfile Card PM
Go to the top of the page
+
Ann
25.02.2011 - 18:27
Сообщение #3



 
Group Icon
Группа: Супермодераторы
Сообщений: 906
Регистрация: 1.12.2002

Пользователь №: 3212




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

Код
<style type="text/css">
p {
margin-bottom: -20px;
text-align: justify;
text-indent: 25px;
line-height: 1;
}

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


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

Прикрепленное изображение
User is offlineProfile Card PM
Go to the top of the page
+
Ann
25.02.2011 - 19:10
Сообщение #4



 
Group Icon
Группа: Супермодераторы
Сообщений: 906
Регистрация: 1.12.2002

Пользователь №: 3212




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

задаем стили, в том числе картинку - подложку под заглавную букву в красной строке.
например так:
Код
p:first-letter
{
background: url(2.jpg) no-repeat;
color: #009966;
font-size: 600%;
margin-right: 5;
float: left
}


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

Прикрепленное изображение
User is offlineProfile Card PM
Go to the top of the page
+
Реклама

Reply to this topicStart new topic
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0 -

 



- Текстовая версия Сейчас: 21.11.2017 - 19:02
]]> ]]>
]]> Яндекс.Метрика Google+ ]]>
Загружается, подождите...