Границы справа слева сверху и снизу отдельно.

Для того, что бы определить стиль, цвет и ширину бордюра для одной из сторон элемента, пользуйтесь свойствами border-bottom, border-left, border-right, border-top и их дочерними "коллегами по цеху" список которых приведён ниже:

border-bottom - Определяет стиль, цвет и ширину нижней границы элемента.

· border-bottom-color - Устанавливает цвет нижней границы элемента.

· border-bottom-style - Определяет стиль нижней границы элемента.

· border-bottom-width - Определяет ширину нижней границы элемента.

border-left - Определяет стиль, цвет и ширину левой границы элемента.

· border-left-color - Устанавливает цвет левой границы элемента.

· border-left-style - Определяет стиль левой границы элемента.

· border-left-width - Определяет ширину левой границы элемента.

border-right - Определяет стиль, цвет и ширину правой границы элемента.

· border-right-color - Устанавливает цвет правой границы элемента.

· border-right-style - Определяет стиль правой границы элемента.

· border-right-width - Определяет ширину правой границы элемента.

border-top - Определяет стиль, цвет и ширину верхней границы элемента.

· border-top-color - Устанавливает цвет верхней границы элемента.

· border-top-style - Определяет стиль верхней границы элемента.

· border-top-width - Определяет ширину верхней границы элемента.

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

Приведу пример:

<html>

<head>

<title>Граница слева</title>

<style type="text/css">

div{

border-left: 10px solid #008000;

background: #c6f2de;

}

</style>

</head>

<body>

<div>

<p>В этом примере у контейнера div мы обозначили только его левую границу с помощью свойства border-left написав:</p>

div{<br>

border-left: 10px solid #008000;<br>

background: #c6f2de;<br>

}

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

<p>Это выглядело бы вот так:</p>

div{<br>

border-left-color: #008000;<br>

border-left-style: solid;<br>

border-left-width: 10px;<br>

background: #c6f2de;<br>

}

<p>Кстати Вам этот блок ничего не напоминает? :)</p>

</div>

</body>

</html>

Border

Свойство border - базовый атрибут одновременно определяет стиль, цвет и толщину границы элемента.

Так как атрибут border является базовым, значения родственных свойств указываются в любом порядке через пробел.

Пример:

<html>

<head>

<title>border</title>

<style type="text/css">

div{

border: RGB(25, 125, 25) 6px ridge;

}

</style>

</head>

<body>

<div>

<h3>А знаете ли Вы что:</h3>

<p>Слон - символ положительного характера - используется в Азии как царское верховное животное и высоко ценится за ум и хитрость.</p>

</div></body></html>

Однако если Вы хотите присвоить разные свойства различным сторонам границы элемента или только одной из них, пользуйтесь свойствами border-bottom, border-left, border-right, border-top.

Границы таблицы.

Свойство CSS border-collapse определяет стиль отображения границ таблицы.

По умолчанию каждая ячейка таблицы имеет собственную рамку (ну если конечно использован атрибут HTML border или одноимённое свойство CSS), так вот в местах соприкосновения ячеек образуется двойная линия, border-collapse заставляет браузер анализировать таковые места и поступать с ними согласно присвоенному значению данному свойству.

Внешний вид границ таблицы может принимать следующий вид:

· separate - ячейки таблицы отделены друг от друга (по умолчанию).

· collapse - ячейки таблицы не имеют промежутков между собой.

· inherit - свойства наследуются у родителя элемента. (работает далеко не во всех браузерах.)

Пример:

<html><head><title>Стиль таблицы</title></head>

<body>

<table cellpadding="5" border="5">

<caption>Таблица с бордюром по умолчанию</caption>

<tr>

<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>

</tr>

<tr>

<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>

</tr>

</table>

<hr>

<table cellpadding="5" border="5" style="border-collapse: collapse">

<caption>А эта таблица использует свойство CSS border-collapse с значением collapse</caption>

<tr>

<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>

</tr>

<tr>

<td>ячейка</td><td>ячейка</td><td>ячейка</td><td>ячейка</td>

</tr>

</table> </body></html>

Лекция №23. Слои

Код слоя:

<div id="имя слоя" style="position:absolute; left:204px; top:143px; width:171px; height:62px; z-index:2">содержимое слоя</div>

id - это индивидуальное имя слоя, совпадать и повторяться оно не должно!

style - это вид слоя, то есть способ его отображения. Без этого параметра сам по себе тег div может служить лишь способом форматирования вложенного в него текста - без главных особенностей, присущих слоям - таких, как расположение поверх чего угодно.

left - расстояние от левого края: может быть как в пихелях, так и в процентах от общей ширины экрана.

top - расстояние от верха.

ну, ширина и высота вам уже известны, их не упоминаю.

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

Казалось бы, дизайн, построенный на слоях, намного удобнее и проще, чем дизайн на банальных таблицах, но есть нюансы, как положительные, так и отрицательные.

Дополнительные возможные теги:

background-color: цвет фона

layer-background-color: цвет слоя

border: 1px none - если убрать "ноне", то вокруг слоя появится бордюрчик 1 пиксель толщиной.

Основная особенность слоев и их основное отличие в использовании от других способов верстки — точное позиционирование и способность накладываться друг на друга. Благодаря этой особенности с помощью слоев можно создавать разные эффекты на веб-странице.

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

Наши рекомендации