TIPS OF WEB - заморочки с css

Vadias

Спецвыпуск Xakep, номер #025, стр. 025-106-2

<STYLE TYPE="text/css">

#left {

padding: 5px;

width: 25%;

position: absolute }

</STYLE>

Либо, если это изменение применимо для всех контейнеров на паге, чтобы не париться и не увеличивать объем кода, это свойство можно вписать в стиль тега <DIV>, который необходим для объявления любого блока:

<STYLE TYPE="text/css">

DIV {

padding: 5px }

</STYLE>

TIPSa 6

Выравнивание текста внутри блоков можно также вписать в стиль тега <DIV>, так как обычно выравнивание одинаково по всей странице. По умолчанию текст равняется по левой стороне, в примере ниже это свойство меняется на выравнивание по ширине (текст растягивается на ширину блока):

<STYLE TYPE="text/css">

DIV {

text-align: justify }

</STYLE>

TIPSa 7

Если возникла необходимость взять какой-нибудь блок в рамку, смотри сюда:

<STYLE TYPE="text/css">

#vramke {

width: 40px;

border-width: 5px;

border-color: yellow;

border-style: ridge}

</STYLE>

Это стиль блока шириной в 40 пикселей, с выпуклой трехмерной рамкой желтого цвета толщиной в 5 пикселей. Кроме значения ridge, есть еще стили solid, double, groove, inset и outset.

TIPSa 8

Мы можем позаботиться и о заднем фоне любого отдельно взятого блока. Для этого нам предоставляется целый набор средств. Например:

<STYLE TYPE="text/css">

#bgrulez {

width: 40px;

background-color: #333;

background-image: url(img/fon.gif);

background-repeat: no-repeat }

</STYLE>

Итак, у данного блока цвет бакграунда будет #333, фоновая картинка - fon.gif из папки img, фоновая картинка не будет размножаться по осям (no-repeat). Кроме no-repeat, свойство background-repeat принимает значения repeat (картинка размножается по обеим осям), repeat-x (по горизонтали), repeat-y (по вертикали). Очень полезно, если хочется намутить, например, полосатый задник - достаточно всего одной полосочки.

TIPSa 9

Слабое место рассмотренной верстки блоками CSS - трудное регулирование высоты, особенно это может повредить дизайну при разных заданных цветах блоков-колонок. Эту проблему можно попробовать обойти, установив достаточную одинаковую высоту для всех колонок, скажем, 70%.

TIPSa 10

Если ты хочешь больше узнать о верстке с помощью CSS и вообще накачаться инфой о каскадных листах стилей, смело рекомендую книгу Михаила Дубакова "Веб-мастеринг средствами CSS" издательства BHV. Этот белорусский веб-мастер действительно может немало поведать о своем нелегком искусстве; кроме того, альтернативы у этой книги, в отличие от "верстки с помощью таблиц" :), можно сказать, пока что нет. В Инете подобной инфы также мало, хотя на английском языке есть неплохие тематические ресурсы - например, сайт Джеффри Зелдмана, ярого поборника CSS - www.alistapart.com.

BONUS

Если ты настоящий графический дизайнер, то при подготовке страницы сначала юзаешь графический редактор (CorelDraw, Photoshop), лабаешь в них макет, а уже потом его реализуешь подручными средствами верстки HTML. Одной из проблем такого подхода является то, что цвет, заданный в редакторе шестнадцатеричным числом, иногда при экспорте в gif или jpg оказывается несколько иным :(, и при верстке страницы приходится ориентироваться на него. Есть неплохая маленькая утилита для определения шестнадцатеричного значения цвета на экране - "Web Designers Tool Set" (WTS), ее можно найти по адресу www.slhi.com.ru. Кроме цвета, с ее помощью можно точно измерять расстояния между объектами, что тоже не самая маловажная деталь сайтопроизводственного процесса.