logo
dronov_v_samouchitel_adobe_dreamweaver_cs5_5

Практикум по созданию стилей

Теперь осталось только закрепить полученные теоретические знания, занявшись практикой.

Исправим созданный ранее стиль переопределения тега <BODY>, задав для него цвет фона. Укажем в селекторе цвета Background-color категории Фон светло-синий цвет с RGB-кодом #DFE9DC.

Откроем Web-страницу с контактными данными. Таблица с величинами наценок за доставку, что на ней находится, слишком маленькая и поэтому плохо читается. Давайте ее немного расширим, указав для ее ячеек внутренние отступы, и обведем ячейки рамками.

Создадим стиль переопределения тега <TD> и зададим для него такие параметры:

величина внутреннего отступа для всех сторон — 5 пикселов (комбинированный список Top группы элементов управления Padding при установленном флажке Одинаково для всех той же группы; все это находится в категории Рамка);

сплошная рамка из четырех сторон (пункт solid комбинированного списка Top в группе элементов управления Style при установленном флажке Одинаково для всех той же группы; все это находится в категории Граница);

тонкая рамка (пункт thin комбинированного списка Top в группе элементов управления Width при установленном флажке Одинаково для всех той же группы; все это находится в категории Граница);

цвет рамки — светло-серо-синий с RGB-кодом #B3BDB0 (селектор цвета Top в группе элементов управления Color при установленном флажке Одинаково для всех той же группы; все это находится, опять же, в категории Граница).

После этого создадим стиль переопределения тега <TH> и зададим для него такие же параметры, что и для только что созданного стиля переопределения тега <TD>. Проще всего сделать это, продублировав стиль <TD> и указав полученный в результате этого стиля-копии селектор th. (Как продублировать стиль, было описано в главе 9.)

Если мы теперь протестируем Web-страницу с контактными данными в Webобозревателе, то увидим, что между рамками соседних ячеек таблицы присутствует просвет (см. рис. 11.5). Нам следует его убрать, что возможно только ручной правкой CSS-кода нашей таблицы стилей.

Выведем на экран ее CSS-код (как это сделать, было описано в главе 9) и добавим в ее конец такой фрагмент: