40. Бордюры (border) - Дикие уроки HTML

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

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

Так что оставим свои амбиции и пойдем проторенным путем вслед за Рафаэлем и Рублевым. Конечно же, в наш современный век мы не будем вырубать рамы из бронзы и золота. А зачем? Ведь у нас есть мошнейшее оружие всех времен и народов - стили 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"> вокруг блока текста — двойная линия</p>	вокруг блока текста — двойная линия
groove — углубленная трехмерная рамка
<p style="border-style: groove;">вокруг блока текста — углубленная трехмерная рамка</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 г.)