Http://css.Find-info.Ru/css/003/css.Htm - ogl

3.13 Размер элемента

Таблица 3.11

min-height	Устанавливает или получает минимальную высоту элементаTR {min-height: 10px;}Данный атрибут применим к TR, TD, TH в таблице, у которой свойство table-layout имеет значение fixed
width	Устанавливает ширину элемента

Примеры

Рисунок 3.8

<table border="1" style="table-layout:fixed; width:450px">

<tr>

<td style="height:35px;background-color:#FFCC00">Высота данной ячейки равна 35 пикселям.

Так что содержимое в ячейку не влезает и обрезается

<tr>

<td style="min-height: 150px; background-color:#09F">Минимальная Высота данной ячейки

равна 150 пикселям. Так что текст в нее влезает и не обрезается

</td>

</tr>

</table>

3.14 Ссылки

Таблица 3.11

A:link	Определяет стиль для обычной непосещенной ссылки.
A:visited	Определяет стиль для посещенной ссылки.
A:active	Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hover	Определяет стиль для ссылки при наведении на нее мышью. Не поддерживается браузером Netscape до 6 версии.

Одно из наиболее популярных применений CSS - это убирание подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли - раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и то и другое одновременно. Параметр hover не работает в Netscape до 6 версии, поэтому его следует использовать осторожно. Пример использования параметра HOVER

<style type="text/css">A:link {text-decoration: none} // убирает подчеркивание для ссылокA:visited {text-decoration: none} A:active {text-decoration: none}A:hover {text-decoration: underline; color: red;} // делает ссылку красной и подчеркнутой при наведении на нее курсора</style>

Ниже приведено использование данного примера. При наведении курсора на ссылку, она становится подчеркнутой и красной.

Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением параметра text-decoration: underline overline в A:hover.

Пример использования подчеркивания в ссылках

<style type="text/css">A:link {text-decoration: none}A:visited {text-decoration: none}A:active {text-decoration: none}A:hover {text-decoration: underline overline; color: red;} // ссылка подчеркнутая, надчеркнутая и красного цвета</style>

Пример изменения размера ссылки

<style type="text/css">A:link {text-decoration: none}A:visited {text-decoration: none}A:active {text-decoration: none}A:hover {font-size: 24; font-weight: bold; color: red;} // ссылка изменит свой размер на больший</style>

http://css.find-info.ru/css/007/index.htm

3.15 Размещение рисунока на кнопке

Самый простой вариант создания кнопки, содержащей на себе рисунок - это нарисовать ее в каком-нибудь графическом редакторе. Такие кнопки поддерживаются в форме с помощью параметра input type=image.

Рисунок 3.9

Пример рисованной кнопки

<form><input type="image" border="0" src="button.gif" width="50" height="20"></form>

Созданные указанным в примере способом кнопки, в полном смысле таковыми не являются, а скорее похожи на ссылки. При наведении курсора мыши на такую кнопку, курсор меняет свою форму, как и при работе со ссылками, а при нажатии на кнопку происходит отправка формы на сервер.

Стили позволяют на кнопках, созданных с помощью параметра input type=button или input type=submit, размещать любой фон или рисунок.

Пример создания фона на кнопке

<form><input type=button style="background: url(bgbutton.gif); height:20px; line-height:12px;" value="Кнопка с фоном"></form>

Параметр url(bgbutton.gif) определяет, какой файл будет использоваться в качестве фона.

Точно таким же образом делается на кнопке и небольшой рисунок. Подготавливается изображение, которое будет использоваться в качестве фона, а на нем размещаете любую иконку.

Пример размещения рисунка на кнопках

<form><input type=button style="background: url(imgbutton.gif) no-repeat left; height:20px; line-height:12px;" value="    Кнопка с рисунком"></form>

url(imgbutton.gif) указывает пукть к рисунку, no-repeat left означает, что фон не повторяется и выровнен по левому краю.

Так как фоновое изображение, так же как и текст, выравнивается по левому краю, чтобы не произошло наложения рисунка и текста друг на друга, текст надо сместить вправо, добавив перед ним несколько пробелов.