Полезные советы Веб-Дизайнеру.

• Вопрос\Ответ

Подписаться на рассылку.

Уважаемые подписчики! В этом разделе содержатся наиболее часто задаваемые вопросы. Вы можете задать свои вопрсы нам по адресу: web-design@hotmail.ru

ВОПРОС\ ОТВЕТ.

Как менять бэкграунд в ячейке таблицы при наведении на нее мыши?

Как сделать так, чтобы все четыре границы таблицы были разного цвета?

Kак можно применить ":first-letter" (первая буква) к тегу "А" (ссылка)?

Как можно при помощи CSS менять бэкграунд в ячейке таблицы при наведении на нее курсора мыши? После того, как курсор убирается - цвет снова возвращается.

Для этого необходимо написать небольшой обработчик cобытия, в данном случае попадание курсора мышки в область таблицы:

<HTML>
<HEAD>
<TITLE></TITLE>
<BODY>
<table id=table onMouseover="table.bgColor='blue'"
onMouseOut="table.bgColor='white'" bgcolor=white border=1>
<tr><td> </td></tr></table>
</BODY>
</HTML>

Необходимо присвоить таблицe идентификатор (в данном случае 'table' (выделен жирным шрифтом)), который и уазывает обработчику событий где именно нужно поменять цвет. При чем для каждой ячейки (если их несколько) нужно указывать идентификаторы отличные друг от друга.
При наведении мышки на область таблицы она изменит цвет с белого на cиний. Соответственно, когда курсор мышки вновь покинет эту область, она вновь станет белой.
Аналогичным образом можно менять не только цвет, но и фоновый рисунок таблицы:

<HTML>
<HEAD>
<TITLE></TITLE>
<BODY>
<table id=table onMouseover="table.background='имя файла'"
onMouseOut="table.background='none'" bgcolor=white border=1>
<tr><td> </td></tr></table>
</BODY>
</HTML>

Здесь мы вместо цвета задали имя графического файла, который будет фоном для ячейки при наведении на эту область курсора мыши. Соответственно фон исчезнет , когда курсор мыши покинет данную ячейку.

Как сделать так, чтобы все четыре границы таблицы были разного цвета?

Для этого существуют такие свойства CSS как border-top-color; border-left-color; border-right-color; border-bottom-color; которые позволяют задавать разные цвета для каждой стороны объекта. Т.е. , например : в код страницы между тегами <head> и </head> нужно вставить:

<style type="text/css">

</style>

А между тегами <body> и </body> вставьте:

<table id="table">
<tr><td>
Содержимое вашей таблицы
</td></tr>
</table>
Мы задали цвета каждой стороне вашей таблицы. Теперь поясним:
1. Мы задали таблице идентификатор ( #table ) с помощью CSS . Это значит, что стиль описанный в CSS будет применяться ко всем объектам с этим идентификатором, в данном случае мы присвоили его таблице при помощи атрибута "id".
2. Далее при помощи все тех же свойств CSS "border: 1px solid" мы задали ширину рамки и ее стиль. Где "1px" есть ширина в пикселях, а "solid" стиль рамки , означающий сплошную линию .

Как можно применить ":first-letter" (первая буква) к тегу "А" (ссылка)?
Я хочу что-бы первая буква ссылки была жирная. Сейчас я выделяю ее с помощью "strong", но при этом происходит разрыв слова (поисковые системы при индексации первыю букву отделяют от остальных пробелом).

Тут такое дело, что в CSS пaраметр A: сам по себе не может включать в себя "first-letter". Поэтому нам нужно присвоить значение "first-letter" параграфу или иному средству форматирования текста .
В теле документа между тегами <head> & </head> в описании листа каскадных стилей нужно указать, что первая буква параграфа должна быть выделена жирным шрифтом :

<style type="text/css">
P: first-letter{font-weight: bold;}

либо

DIV:first-letter{font-weight: bold;} </style>

А затем самой ссылке присвоить параграф(или тег DIV) , т.е. <p><a href="адрес ссылки">текст ссылки</a></p>. Но в этом случае следует учесть, что параметр , указанный в листе каскадных стилей распространяется на все параграфы(или DIV) в документе. Поэтому тег <p></p> следует применять только к нужным частям текста. В остальных же случаях можно использовать альтернативные средства форматирования текста.