Веб-мастерская / Уроки по CSS.
Создание буквицы с помощью CSS
Категория CSS
Этот урок CSS будет посвящен созданию буквицы (увеличенной, специально оформленной буквы в начале текста) с помощью стилей.
Итак, попробуем сделать буквицу…
1) Для удобства вынесем CSS в отдельный файл. Для этого откроем блокнот -> Сохранить как -> style.css.
2) Вставьте в этот файл следующий код (подробнее о командах – в коде):
/* Задание стилей для всего текста */
.content {
width:300px; /* Задание ширины блока текста */
letter-spacing:1px; /* Задание расстояния между символами */
font-size:16px;
border:1px solid #ccc; /* Задание цвета границ блока */
padding:5px;
}/* Задание стилей для буквицы */
.bukv {
font-size:50px; /* Задание размера шрифта буквицы */
color:#004a95; /* Задание цвета буквицы */
font-weight:bold;
float:left; /* Задание обтекания буквицы */
height:34px;
line-height:35px; /* Задание положения буквицы */
margin-top:2px; /* Задание отступов буквицы */
margin-right:1px;
}
3) Чтобы увидеть работу стилей, создадим в той же дирректории html файл и, например вставим туда такой код:
4) Сохраняем и смотрим, что получилось.
Как видно, мы выносим буквицу в отдельный слой, отделяя её от всего слова, что может повредить нормальному прочтению слова некоторыми поисковыми системами, но эффект того стоит. Думаю, что изменить шрифт буквицы, труда не составит.
Совместимость: Internet Explorer 5.5 – 7; Mozilla Firefox 2.xx Oprea 7.хх – 9.xx
]]>Добавить в закладки
Теги: CSS, юзабилити
Оставьте комментарий: