Решение проблем связанных с созданием веб сайтов на языках разметки гипертекстов css, html.

5,207 Просмотров

Как оформлять текст (цитату) в красивых ковычках с помощю css???

Как оформлять текст (цитату) в красивых ковычках с помощю css???
Вопрос

Как оформить текст, так же как на различных CMS-ах - в начале вверху красивая ковычка и в конце внизу тоже стоит закрывающая ковычка???

Пытался и у меня получается тупо ставить картинку перед началом текста и в конце текста :) , но это же так сильно достаёт, каждый раз проделывать данную процедуру!!!!

Может можно, как то сделать так, чтобы прописывать только тег или стиль к примеру blockquote, как в CMS - ках и на форумах или ещё что нить в этом роде..
Надеюсь, что это возможно сделать на языках гипертекстовой разметки, а не на скриптах?

Заранее спасибо!!!!

Ответ

Да можно сделать на языке гипертекстовой разметки (Css - каскадные таблицы стилей).
Смотрим пример ниже:
НАЖМИ ЧТОБЫ ПРОСМОТРЕТЬ ПРИМЕР

Чтобы сделать такое же оформление - тебе нужно создать отдельный файл таблиц стилей и прописать следующие стили:

.pullquote {
width: 50%;
font-size:100%;
line-height:140%;
margin:60px;
background: url(closequote.gif) no-repeat bottom right !important;
background /**/:url(); /* Disabling quote effect in IE5 + */
padding:0px 25px 5px 0px;
}


.pullquote:first-letter {
background: url(openquote.gif) no-repeat left top!important;
padding:5px 2px 10px 35px!important;
padding /**/:0px; /* Disabling quote effect in IE5 + */
background /**/: url(); /* Disabling quote effect in IE5 + */
}

А так же тебе нужно создать две картинки с изображениями ковычек или ещё чего.
А так же можеш воспользоваться этими:

И немного поясню про код:

width: 50%; - Здесь ставиш ширину цитаты, в данном случае 50% - тоесть половина экрана
font-size:100%; -
Это размер шрифта.
line-height:140%; -
Это очень грубо говоря высота твоей цитаты, в данном случаи цитата будет растянута в верх на 40% процентов выше нормы, а норма 100%.

Страницы: 1 2

Оставить отзыв

Вы должны войти, чтобы оставлять комментарии.