Уроки CSS для новичков - Границы

Бордюры

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

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

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

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

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

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

Листинг 28.

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

Посмотрим на результат:

Страничка без стилей CSS

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

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

заглавие, заключенное между тегами <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).

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

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, пунктирная и зеленая.

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

Листинг 29.

<HTML>
  <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="image/foto.jpg" align="left">
    <P class="abz">
      Шилов как увидел Пчелку, так чуть и не умер от радости. Потому что без этой Пчелки он никогда не смог нарисовать такой замечательной картины! А может и вообще бы так и прожил никому не известным бедным художником! И никогда бы не попал в такие знаменитые "Дикие уроки".
    </P>
  </BODY>
</HTML>

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

Вот теперь порядок!

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