Все тексты, представленные в данном разделе, являются плодом нашего интеллектуального труда. Перевод уроков осуществлялся вручную, по возможности сохранялся стиль автора и особенности оригинального языка.
Исходя из вышесказанного – огромная просьба к вам, коллеги web-мастера: пожалуйста, уважайте наш труд, при использовании любых материалов нашего сайта и, в частности, данного раздела ставьте ссылку на сайт www.bcat.com.ua. Заранее спасибо!
К настоящему времени, у вас должен быть простой, правильно написанный HTML документ, похожий на эту страницу. Если у вас не было времени чтобы его сделать, просто скопируйте исходный код этой странички и работайте с ним. Сейчас мы будем применять стили CSS к этому документу.
С чего начинать? Прежде всего, прочтите первые три страницы правил CSS в разделе - Управление шрифтами и текстом (часть 1 и 2), Фон и цвет. Как всегда, пока игнорируйте предупреждения о вещах, не работающих в браузере 4.x и концентрируйтесь на том, как все должно работать в версии 5.x и более поздних браузерах.
Давайте же начнем применять правила! Если вы посмотрите на исходный HTML код нашего тренировочного сайта, вы увидите, что использованы всего лишь некоторые типы тегов (HTML элементов): <h1>, <h2>, <h3>, <p>, <ul> с <li>, и <address>. Да, и не забывайте <body>! Запомните: вы можете применить большинство CSS стилей ко всему, что описано в разделе body вашего HTML документа, включая сам <body>.
Давайте изменим внешний вид шрифта для всех элементов тега <p> (абзац) на странице. Идем в раздел <style> нашего тренировочного сайта, и помещаем нижеуказанное правило между тегами <style> </style>. Мы хотим, чтобы все наши абзацы использовали шрифт Verdana.
P {font-family: verdana, arial, helvetica, sans-serif;
Затем определяем размер шрифта. Обратите внимание: в этом уроке мы собираемся придерживаться абсолютных размеров в пикселях, которые являются наиболее надежными в плане единого отображения на всех платформах и браузерах. (Мы рассмотрим абсолютное и относительное задание размеров на следующем уроке). Продолжая наш стиль, мы добавим еще одно правило:
font-size: 12px;
Посмотрев на страницу свойств шрифта, мы добавим правила для font-weight и font-style.
font-weight: 400;
font-style: normal;
Помещаем это все в один стиль и закрываем фигурную скобку }.
P {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
font-style: normal; }
Поместите все это в раздел style вашего тренировочного сайта и просмотрите в вашем браузере. Видите, как изменился шрифт во всех абзацах? Не правда ли что это гораздо удобнее, чем описывать массу тегов <font>?
А теперь наберемся храбрости и определим свойства шрифта, для всех элементов H2 в «кратком» (shorthand) виде.
H2 {
font: small-caps bold 16px/20px helvetica, arial, sans-serif;
А еще мы хотим, чтобы текст заголовков H2 отображался красным цветом. Так что добавим следующее правило:
color: #ff0033;
}
Полностью правило стиля для тега <H2> будет выглядеть следующим образом:
H2 {
font: small-caps bold 16px/20px helvetica, arial, sans-serif;
color: #ff0033;
}
Поместим его в раздел style нашей страницы и перезагрузим ее, чтобы увидеть результат.
Давайте определим фон страницы (BODY). Для начала давайте разберемся с цветом, думаю, подойдет приятный бледно желтый:
BODY {
background-color: #ffff66;
Страничка нам уже нравится, но хотелось бы добавить симпатичное фоновое изображение. Делается это так:
background-image: url(paper.jpg);
Изображение можно найти здесь, можете поэкспериментировать с ним, если хотите.
Продолжите в том же духе, пока не определите вид шрифтов, цвет и (если хотите) цвет фона всех элементов вашей страницы. К этому моменту, ваша страница должна выглядеть примерно так (примечание: то, что вы умеете пользоваться CSS, еще не означает, что вы умеете создавать красивые страницы :)).
