УРОКИ CSS для начинающих. Базовый курс.


Урок 5. Создание собственных стилей (стилевых классов).

С помощью таблиц стилей можно не только задавать стили для тегов, но и создавать собственные стили или стилевые классы.

Что это такое и как это делать, разберём в данном уроке.

Создадим стиль для текста статьи.

Перейдите в файл стилей, открытый в "Блокноте", и допишите следующее:

Листинг 5.1.

……
.txt {
color : Black;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 14px;
margin : 20px;
text-align : justify;
text-indent : 30px;
}

.txt - так обозначается какой-либо стилевой класс. Имя стилевого класса можно придумывать какое угодно; в таблице стилей перед именем стилевого класса ставится точка.

Далее с помощью свойств и их значений мы задаём цвет шрифта (color : Black; - чёрный, хотя чёрный он по умолчанию, так что можно было и не прописывать), начертание шрифта (font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; - обратите внимание: sans-serif означает шрифт без засечек), размер шрифта (font-size : 14px;), отступы (поля) текста от границ ячейки (margin : 20px;), выравнивание текста по ширине (text-align : justify;), красную строку (text-indent : 30px;).

Возможно, Вы обратили внимание, что цвет можно задавать как с помощью кода (например, #008000), так и конкретным названием цвета (Black - чёрный, Blue - синий и т. д.)

Теперь нужно прописать наш новый стилевой класс для тега <p> в коде страницы.

Делается это с помощью атрибута class, которому присваивается значение данного стилевого класса. Вот так:

<p class="txt">

В код страницы, к каждому тегу <p> текста статьи приписываем созданный стилевой класс. Сделаем это пока только для текста статьи:

Листинг 5.2.

……
<H3> <a name="начало_страницы"> Собака - друг человека. </a> </H3>
<p class="txt"> Содержание и разведение собак - часть мировой культуры, историческая традиция, восходящая к тем древним временам, когда у далёкого нашего предка появился преданный друг, помогавший добывать пищу и охранять жилище. </p>
<p class="txt"> За долгие века привязанность человека к братьям его меньшим не утратила своей теплоты, а собаки остаются для людей помощниками и компаньонами. </p>
<p class="txt"> Вопрос о происхождении собаки до настоящего времени остаётся открытым. Точно не установлено, от какого предка и в какой части земного шара произошла собака. Одни учёные предполагают, что родоначальниками далёких предков собак могли быть волки и шакалы. Доказательство этому - биологическая близость видов, сходство их внешних форм, внутреннего строения и поведения. Другие более вероятным считают, что собака произошла от нескольких вымерших её диких видов, останки которых найдены в позднейших отложениях третичного периода. Подтверждением тому служит огромное разнообразие существующих пород и большое различие между ними. </p>
<p class="txt"> Древнейшие породы северных волкообразных собак могли произойти от прирученного дикого волка или гибрида волка и так называемой болотной, или торфяной, собаки. В последующем от них повели свой род многие пастушьи собаки. Это предположение подтверждается найденными останками разных видов первобытных собак в северо-западных и северо-восточных районах нашего континента... </p>
<p> <a href="#начало_страницы"> К началу страницы </a></p>
</td>
……

Сохраните результат и обновите страницу в браузере. Вот как выглядит теперь статья:

Уроки css для начинающих
Рис. 6

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

Создадим так же стилевые классы для других фрагментов текста: для надписей "Здесь будет рекламный баннер" и "К началу страницы", для панели навигации и для текста в третьей ячейке нижней строки:

Уроки css для начинающих
Рис. 7

Дадим следующие названия стилевым классам:

.banner - для "Здесь будет рекламный баннер";

.menu - для панели навигации;

.zl - для "К началу страницы";

.td_right - для текста в правой колонке.

Прейдите в файл стилей и добавьте следующую запись:

Листинг 5.3

.banner {
color : Black;
font-family : "Times New Roman", Times, serif;
font-size : 18px;
font-weight : bold;
text-align : center;
}
.menu{
color : Black;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
text-align : center;
}
.zl {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 14px;
text-align : center;
}
.td_right {
font-size : 12px;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align : justify;
margin : 5px;
}

Сохраните результат и откройте код страницы в программе "Блокнот". В код страницы добавим следующее:

Листинг 5.4.

……
<tr height="40">
<td colspan="3">
<p class="banner"> Здесь будет рекламный баннер </p> </td>
</tr>
<tr>
<td WIDTH="200" valign="top">
<div
class="menu">
Главная <br>
<a href="poroda1.html">
Породы </a><br>
Выбор <br>
Содержание <br>
Дрессировка <br>
Выставки <br>
<a href="mailto:pochta@mail.ru?subject=Hello&Body=text&cc=
copy@mail.ru&bcc=hidden_copy@mail.ru">
Контакты </a>
</div>
</td>
<td>
<H3> <a name="начало_страницы">
Собака - друг человека. </a> </H3>
<p class="txt">
Содержание и разведение собак - часть мировой культуры, историческая традиция, восходящая к тем древним временам, когда у далёкого нашего предка появился преданный друг, помогавший добывать пищу и охранять жилище. </p>
<p class="txt"> За долгие века привязанность человека к братьям его меньшим не утратила своей теплоты, а собаки остаются для людей помощниками и компаньонами. </p>
<p class="txt"> Вопрос о происхождении собаки до настоящего времени остаётся открытым. Точно не установлено, от какого предка и в какой части земного шара произошла собака. Одни учёные предполагают, что родоначальниками далёких предков собак могли быть волки и шакалы. Доказательство этому - биологическая близость видов, сходство их внешних форм, внутреннего строения и поведения. Другие более вероятным считают, что собака произошла от нескольких вымерших её диких видов, останки которых найдены в позднейших отложениях третичного периода. Подтверждением тому служит огромное разнообразие существующих пород и большое различие между ними. </p>
<p class="txt"> Древнейшие породы северных волкообразных собак могли произойти от прирученного дикого волка или гибрида волка и так называемой болотной, или торфяной, собаки. В последующем от них повели свой род многие пастушьи собаки. Это предположение подтверждается найденными останками разных видов первобытных собак в северо-западных и северо-восточных районах нашего континента... </p>
<p class="zl"> <a href="#начало_страницы"> К началу страницы </a></p>
</td>
<td WIDTH="200">
<p class="td_right"> Здесь будет разная служебная информация: форма подписки на рассылку, информация о партнёрских программах и пр. </p>
<Hr> ……

Сохраните результат, обновите страницу в браузере. Вот, какие произошли изменения:

Уроки css для начинающих
Рис. 8

Сделайте то же самое самостоятельно для второй страницы сайта.

Если какие-то свойства и значения стилей не понятны, можно посмотреть в справочнике, скачав его здесь.

Успехов. И до встречи на следующем уроке.

Важно! Те уроки по CSS, что выложены на нашем сайте - это очень далеко не всё, что следует знать по каскадным таблицам стилей. К тому же, web-технологии постоянно развиваются! Поэтому рекомендую скачать бесплатно видеоуроки по CSS, в которых вы найдёте много нового, соответствующего современным стандартам сайтостроения.

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

осторожно, мошенник!

Эта информация поможет сохранить вам деньги >>>

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

"PHP-песочница"
- PHP для начинающих: уроки с подробным анализом скриптов, необходимых для вашего сайта:

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта