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

Этот урок CSS будет посвящен созданию буквицы (увеличенной, специально оформленной буквы в начале текста) с помощью стилей.
Итак, попробуем сделать буквицу...

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

/*
=============================================================
© 2008 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS №13. Создание буквицы
style.css - Набор стилей для урока
=============================================================
*/

/* Задание стилей для всего текста */
.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 файл и, например вставим туда такой код:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="content">
<span class="bukv">П</span>ростой способ создания буквицы при помощи CSS.
</div>
</body>
</html>


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

Как видно, мы выносим буквицу в отдельный слой, отделяя её от всего слова, что может повредить нормальному прочтению слова некоторыми поисковыми системами, но эффект того стоит. Думаю, что изменить шрифт буквицы, труда не составит.

Совместимость: Internet Explorer 5.5 - 7; Mozilla Firefox 2.xx Oprea 7.хх - 9.xx
---------------------------------------
Правила копирования материалов урока
Демо
Скачать урок (zip, 0,8 Kb)


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



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

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

Публикацию посмотрели 16687 раз(а) и написали 8 комментариев.
Подписаться на канал 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!