INGVARR.NET.RU

Меню сайта
Главная Форум HiTech Статьи Фото Блог Сайты Объявления Гостевая Поиск по сайту Полная версия сайта

Рекомендуем
Войти
Зарегистрироваться

Главная » Статьи » WEB и WAP мастеру » Уроки CSS
Урок 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; - задание размера шрифта.
Всего комментариев: 0
Имя *:
Email:
Код *:

Статистика



Онлайн всего: 21
Гостей: 18
Жителей: 3
ingvarr, Pashaletnik, LeX

Полная версия сайта