Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS » Урок CSS 2. Создание двойных кавычек
Не нравится(-) 47 Нравится(+)
Урок CSS 2. Создание двойных кавычек

В этом уроке я расскажду Вам о том, как при помощи CSS оформить текст красивыми кавычками.
Итак, приступим...

1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о нем читайте в конце урока):

blockquote {
width: 500px;
background: url(quote_o.gif) no-repeat right bottom;
padding-left: 20px;
font-size: 20px;
}

blockquote:first-letter {
background: url(quote_c.gif) no-repeat left top;
padding-left: 20px;
}

Для создания открывающих и закрывающих кавычек нам понадобятся 2 рисунка. Их можно нарисовать самостоятельно, или скачать готовые.
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:

<html>
<head>
<link href="style.css" rel="stylesheet" type=text/css>
</head>
<body>
<blockquote>Простой способ создания двойных кавычек с помощью CSS.</blockquote>
</body>
</html>


4) Сохраняем и смотрим, что получилось.

Пояснения к коду:
width: 500px; - Задание ширины поля текста
background: url(quote_o.gif) no-repeat right bottom; - Создание открывающей кавычки и запрет на её повторение
padding-left: 20px; - задание левого отступа
font-size:20px; - задание размера шрифта.

---------------------------------------
Правила копирования материалов урока
Демо
Скачать (zip, 16 Kb)
Дополнительные материалы по уроку


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 11534 раз(а) и написали 7 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!