»

 Будь в курсе событий:

oformlenie citati s pomoshyu css

Оформляем цитаты с помощью CSS
Оформляем цитаты с помощью CSS

Часто в своих блогах мы используем цитаты известных или малоизвестных людей. Но вот к сожалению достойного оформления таких блоков нет. Поэтому данный урок будет посвящен оформлению цитат.

Оформляем цитаты с помощью CSS

Накануне сидел и думал, что можно новенького написать еще для пользователей Jimdo. Не сразу мысли приходят в голову, скажу я вам. Но тем не менее, я вспомнил, что сам пользовался оформлением цитаты в одной из своей ранней статье. В стандартном наборе Jimdo я не нашел подобного оформления, а ведь порой без них никак не обойтись. Можно конечно придумать замечательный табличный код с использованием html. Но это как-то не совсем что ли профессионально и смотрится довольно глупо. Удобно когда цитату можно просто заключить в тег и она нарисуется так, как вы ее хотели бы видеть.

Именно об этом и пойдет сегодня речь. Давайте начнем с того, что дадим определение самому слову "цитата".

 

Цита́'та — дословная выдержка из какого-либо текста. При этом важно, что цитируемый (вставленный) текст однозначно идентифицируется как вставленный (то есть как часть другого текста). В русском языке и типографике цитаты принято оформлять в кавычках (« », „ “) или особым шрифтом (уменьшенным кеглем, со втяжкой, курсивом). В других языках способ оформления цитат и вид кавычек могут отличаться.

 

Источник: ru.wikipedia.org

HTML вставка

Сразу сделаю оговорку. Все изображения кавычек отображаться не будут, ссылки к этим картинкам вы задаете сами в css и, соответственно, рисунок кавычек тоже можете подобрать самостоятельно, желательно в *.png формате.

 

Html код будет одинаков для всех пяти примеров. Изменяться будет лишь номер стиля в зависимости от CSS, который вы пропишите в хедере, то есть <blockquote class="style1">.

 

html
    <blockquote class="style1">
      <span>Ut nonummy habent soluta claritas veniam. Typi nunc soluta
      hendrerit mutationem sollemnes. Quis lius dolore et insitam vel.
      Aliquip consequat futurum claram ut mazim. Facilisi accumsan
      dolore ii imperdiet consequat. Claritatem aliquip quod putamus
      vulputate iusto. Doming minim typi zzril lius usus. In clari
      mutationem autem non sit. Qui augue mirum dynamicus gothica ut.
      Demonstraverunt processus soluta sequitur autem
      demonstraverunt.</span>
    </blockquote>

Пример 1

css
blockquote.style1 {
font:14px/20px italic Times, serif;
background-color:#faebbc;
border-top:1px solid #e1cc89;
border-bottom:1px solid #e1cc89;
background-image:url(images/openquote1.gif); /* укажите свою ссылку на кавычки */
background-position:top left;
background-repeat:no-repeat;
text-indent:23px;
margin:5px;
padding:8px;
}

blockquote.style1 span {
display:block;
background-image:url(images/closequote1.gif); /* укажите свою ссылку на кавычки */
background-repeat:no-repeat;
background-position:bottom right;
}

Чтобы увидеть результат, наведите курсор мыши на пример 1

Пример 2

css
blockquote.style2 {
font:14px/22px normal helvetica, sans-serif;
margin-top:10px;
margin-bottom:10px;
margin-left:50px;
padding-left:15px;
border-left:3px solid #ccc;
}

Чтобы увидеть результат, наведите курсор мыши на пример 2

Пример 3

css
blockquote.style3 {
font:18px/30px normal Tahoma, sans-serif;
padding-top:22px;
background-image:url(images/openquote3.gif); /* укажите свою ссылку на кавычки */
background-position:top left;
background-repeat:no-repeat;
text-indent:65px;
margin:5px;
}

blockquote.style3 span {
display:block;
background-image:url(images/closequote3.gif); /* укажите свою ссылку на кавычки */
background-repeat:no-repeat;
background-position:bottom right;
}

Чтобы увидеть результат, наведите курсор мыши на пример 3

Пример 4

css
blockquote.style4 {
font:14px/20px italic Times, serif;
background-color:#dadada;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
background-image:url(images/openquote4.gif); /* укажите свою ссылку на кавычки */
background-position:middle left;
background-repeat:no-repeat;
text-indent:23px;
margin:5px;
padding:18px 10px 18px 70px;
}

Чтобы увидеть результат, наведите курсор мыши на пример 4

Пример 5

css
blockquote.style5 {
font:12px/18px normal "Courier New", sans-serif;
padding-left:70px;
padding-top:2px;
padding-bottom:2px;
background-color:#000;
color:#FFF;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
background-image:url(images/openquote5.gif); /* укажите свою ссылку на кавычки */
background-position:middle left;
background-repeat:no-repeat;
text-indent:23px;
margin:5px;
}

blockquote.style5 div {
padding-right:50px;
display:block;
background-image:url(images/closequote5.gif); /* укажите свою ссылку на кавычки */
background-repeat:no-repeat;
background-position:bottom right;
}


Чтобы увидеть результат, наведите курсор мыши на пример 5

Если урок оказался полезным, оставляйте свои комментарии или задавайте вопросы по теме урока.

Оставить комментарий

Комментарии: 0