СОРОКОВОЙ УРОК

Красота без границ - не красота!

А сегодня, дорогие мои ученики, мы с вами займемся разными рамочками, отступами и бордюрчиками. Потому что без этих самых рамочек и отступов все наши творения, созданные потом и кровью - тьфу! Ничего не стоят. Не верите? А вот вспомните... когда вы были в картинной галерее, видели ли вы хоть одну картину пусть самого развеличайшего художника без рамки? То-то же! Без рамки ни одну картину не повесят! Пусть ты сам Ван Гог или там Рембрандт, без рамочки тебя и на порог не пустят!

Так что оставим свои амбиции и пойдем проторенным путем вслед за Рафаэлем и Рублевым. Конечно же, в наш современный век мы не будем вырубать рамы из бронзы и золота. А зачем? Ведь у нас есть мошнейшее оружие всех времен и народов - стили CSS! Вот ими и воспользуемся.

А примером нам будет служить картина Шилова "Перед венчанием", с персонажем которой я знакома уже несколько лет. И хочу от себя добавать, вкус у Шилова есть! :))

И я покажу вам, как можно, не вставая со стула создать любому шедевру достойную оправу. Да и не только шедевру! Мы "ошедеврим" даже свои мысли, высказанные по поводу да и без повода. И неважно, что мы там напишем - может глупость какую несусветную, но смотреться будет все очень даже красиво! И может, вслед за квадратом Малевича займем свое законное место в какой-нибудь скромной Третьяковке...

Я как всегда размечталась и, как всегда забыла о деле. Это никуда не годится! Так что вот перед вами простенькая страничка, которую мы попробуем разукрасить стилями CSS, кто во что горазд:

<HTML>
<HEAD>
<TITLE>Страничка без CSS</TITLE>
<HEAD>
<BODY>
<H2>Картина Шилова "Перед Венчанием"</H2>
<IMG src="foto.jpg"> align=left;
<P>
Шилов как увидел Пчелку, так чуть и не умер от радости. Потому что без этой Пчелки он никогда не смог нарисовать такой замечательной картины! А может и вообще бы так и прожил никому не известным бедным художником! И никогда бы не попал в такие знаменитые "Дикие уроки".
</P>
</BODY>
</HTML>

Как видим, слева у нас код html без всяких стилей, а справа - то, что мы увидим в окне браузера. Не впечатляет, правда? Но это ненадолго, сейчас мы с вами всему научимся. Дай нам только время!

Давайте сначала повнимательней рассмотрим что у нас написано слева. Итак, у нас имеется:

  • заглавие, заключенное между тегами H2 и /H2;
  • сама картина, заключенная в тег img src, который не требует закрывающегося тега;
  • и текст, заключенный между тегом P и /P, закрывющийся тег можно ставить, а можно и и не ставить.

Вот для кратости (а ведь она сестра таланта!), будем считать, что у нас есть три блока:

  • блок заголовка
  • блок картинки
  • блок текста

И дальше будем с этими блоками работать. Самое приятное, что любой блок можно считать за самостоятельную единицу и облагораживать его, не обращая внимания что это такое - картинка, текст, цитата или еще что-нибудь...


Border

Начнем с самого простого и легкого свойства - BORDER, которое устанавливает цвет (border-color), ширину границы (border-width) и стиль границы (border-style), как для всех четырех границ блока (элемента), так и для каждой его стороны.

Я думаю, с border-color у вас не будет никаких сложностей, можете писать и просто названием цвета (border-color:blue), и через решеточку (border-color:#039) и даже в цветовой гамме RJB (border-color:rgb(51,51,255))

Теперь разберемся со стилями рамок. И лучше - сразу на примерах!

dashed - прерывистая линия
<p style="border-style: dashed"> вокруг блока текста - прерывистая линия</p>

вокруг блока текста - прерывистая линия

dotted - пунктирная линия
<p style="border-style: dotted">вокруг блока текста - пунктирная линия</p>

вокруг блока текста - пунктирная линия

double - двойная линия
<p style="border-style: double"&/gt; вокруг блока текста - двойная линия</p>

вокруг блока текста - двойная линия

groove - углубленная трехмерная рамка
<p style="border-style: groove #333;">вокруг блока текста - углубленная трехмерная рамка</p>

вокруг блока текста - углубленная трехмерная рамка

inset - углубленная рамка
<p style="border-style:inset">вокруг блока текста - углубленная рамка</p>

вокруг блока текста - углубленная рамка

outset - выпуклая рамка
<p style="border-style: outset">вокруг блока текста - выпуклая рамка</p>

вокруг блока текста - выпуклая рамка

ridge - выпуклая трехмерная рамка
<p style="border-style:ridge">вокруг блока текста - выпуклая трехмерная рамка</p>

вокруг блока текста - выпуклая трехмерная рамка

solid - сплошная линия рамки
<p style="border-style:solid">вокруг блока текста - сплошная линия рамки</p>

вокруг блока текста - сплошная линия рамки

none - рамка отсутствует
<p style="border-style:none">вокруг блока текста - рамка отсутствует</p>

вокруг блока текста - рамка отсутствует

Следующее свойство - это border-width. Позволяет определить толщину рамки. Думаю, тут тоже все понятно. Толщина может задаться как словами: thin, medium, thick, что соответствует 2 px, 4 px и 6 px, так и числовым значением с размерными единицами.

И еще, хочу вам заметить, что все эти бордюры можно задать как для всех сторон, так и для каждой стороны блока. Для этого существуют еще несколько свойств:

  • border-top
  • border-right
  • border-bottom
  • border-left

Приведем примерчик:

<p style="border-top:4px inset red; border-right:8px outset yellow; border-left:6px solid blue; border-bottom:4px dotted green"> Мы задали в свойствах - верхняя граница толщиной 4 px, утопленная рамка красного цвета; правая сторона - толщиной 8 px, выдавленная рамка желтого цвета; а левая - толщиной 6 px, голубая рамка сплошной линией. Нижняя же - толщиной 4 px, пунктирная и зеленая. </p>

И вот результат:

Мы задали в свойствах - верхняя граница толщиной 4 px, утопленная рамка красного цвета; правая сторона - толщиной 8 px, выдавленная рамка желтого цвета; а левая - толщиной 6 px, голубая рамка сплошной линией. Нижняя же - толщиной 4 px, пунктирная и зеленая.

В общем, ничего тут сложного нет, давайте же скорее приступим к нашей страничке, которая просто заждалась наших рамочек! Надеюсь, вам все тут станет ясно. Я даже объяснять не буду! Просто приведу код:

<html lang="ru"> <HEAD> <TITLE>BORDER</TITLE> <STYLE type="text/css"> h1 { border-style: double; border-color: blue } P.abz { border-style: dotted; border-color: red; border-width: 10px; width: 400 } IMG { border-style: inset; border-color: gold; border-width: 20px; padding: 20px } </STYLE> </HEAD> <BODY> <h1>Картина Шилова "Перед Венчанием"</h1> <img src="foto.jpg" align="left"> <P class="abz"> Шилов как увидел Пчелку, так чуть и не умер от радости. Потому что без этой Пчелки он никогда не смог нарисовать такой замечательной картины! А может и вообще бы так и прожил никому не известным бедным художником! И никогда бы не попал в такие знаменитые "Дикие уроки". </P> </BODY> </HTML>

Ну и вот результат:

Да... рамка для картины получилась хоть куда! А вот тексты не радуют. Ни в верху, ни слева... Но это можно исправить на следующем уроке, где мы займемся разными отступами!


К списку всех уроков

(В. Ахметзянова, 2005 г)