Блоки и CSS

Используя CSS Вы можете менять внешний вид и местоположение любого элемента на страницах. На этой странице несколько вариантов использования CSS и картинок для изменения вида блока (div'а). Вы естественно можете менять картинки, окрашивать фон и линию бордюра в разные цвета так, как Вам нравится. Те же правила можно применять для таблиц и ячеек.

Цвет фона и рамки DIV

HTML

<div class="outline">
содержимое
</div>

CSS

div.outline {
border: 2px dotted #000080 ; /* Цвет и толщина рамки*/
background: #C0C0C0; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}

HTML

<div class="commentbox">
Камни-целители, хранители и защитники от скверны. К ним относится весь род нефритов. Нефрит, жадеит, жад - это родственные камни, разные очень, от зеленоватых до белых, розоватых, голубых, оранжевых.
Цвет нефрита колеблется от серого до травяно-зеленого, может быть желтым, голубым и черным. Интенсивность окраски меняется в зависимости от содержания в составе минерала окислов железа. Часто присутствующие коричневые полоски являются результатом окисления железа по трещинам в камне.
</div>
<div class="commentfooter">
Добавлено 12 сентября 2007 года
</div>

CSS

.commentbox{
background: url(images/fon.gif);
background-color: #ffffff;
border: 1px solid #D9EBF6;
padding: 10px;
}

.commentfooter{
background: url(images/001.jpg) 20px 0 no-repeat;
padding-left: 58px;
padding-top: 1px;
margin-bottom: 2em;
font-size: 90%;
color: #4A4A4A;
}

HTML

----------------------------------------------------------------------------
<div class="curlycontainer">
<div class="innerdiv">
Камни-целители, хранители и защитники от скверны. К ним относится весь род нефритов. Нефрит, жадеит, жад - это родственные камни, разные очень, от зеленоватых до белых, розоватых, голубых, оранжевых. Цвет нефрита колеблется от серого до травяно-зеленого, может быть желтым, голубым и черным. Интенсивность окраски меняется в зависимости от содержания в составе минерала окислов железа. Часто присутствующие коричневые полоски являются результатом окисления железа по трещинам в камне.
</div>
</div>

CSS

----------------------------------------------------------------------------
.curlycontainer{
border: 1px solid #b8b8b8;
margin-bottom: 1em;
width: 100%;
}

.curlycontainer .innerdiv{
background: transparent url(images/brcorner.gif) bottom right no-repeat;
position: relative;
left: 2px;
top: 2px;
padding: 1px 4px 15px 5px;
}

HTML

<div class="roundcont">
<div class="roundtop">
<img src="images/tl.gif" alt="" width="15" height="15" class="corner"
style="display: none" />
</div>
<p>
Цвет нефрита колеблется от серого до травяно-зеленого, может быть желтым, голубым и черным. Интенсивность окраски меняется в зависимости от содержания в составе минерала окислов железа. Часто присутствующие коричневые полоски являются результатом окисления железа по трещинам в камне.
</p>
<div class="roundbottom">
<img src="images/bl.gif" alt="" width="15" height="15" class="corner"
style="display: none" />
</div>
</div>

CSS

.roundcont {
width: 450px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}

Вид рамки в зависимости от стиля и толщины границы DIV
1 пиксел	3 пиксела	5 пикселов	7 пикселов
dotted	dotted	dotted	dotted
dashed	dashed	dashed	dashed
solid	solid	solid	solid
double	double	double	double
groove	groove	groove	groove
ridge	ridge	ridge	ridge
inset	inset	inset	inset
outset	outset	outset	outset

Блоки и CSS

Свойства CSS

Учим CSS