... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Практический пример применения стилей. Вторая таблица.

 

 

Заголовок ||  Первая таблица ||  Вторая таблица ||  Навигационное меню ||  Анализ результатов


Вторая таблица

Рассмотрим следующий фрагмент кода. Далее идет таблица, состоящая из трех столбцов. В первом находится меню сайта, во втором - декоративный фон, и в третьем располагается основное содержимое странички.

<TABLE bgcolor="white" border="0" cellspacing="O" cellpadding="O" width="100%">
<TR>
<TD background="images/bg_menu.gif" align="right" valign="top" width="127">... Код меню сайта </TD>
<TD background="images/bg_line.gif" width="20"><TD>
<TD>... Основное содержимое страницы ... </TD>
</TR>
</TABLE>

Давайте все, относящееся к визуальному оформлению, по возможности перенесем из этой конструкции в таблицу стилей. При этом введем еще несколько селекторов по идентификатору:

  • #main - для всей второй таблицы целиком;
  • #menu - для первого столбца, содержащего меню сайта;
  • #line - для второго столбца, содержащего декоративную линию;
  • #сontent - для третьего столбца, который содержит основное содержимое страницы.

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

Имена классам и идентификаторам всегда старайтесь выбирать такие, чтобы по ним можно было определить, что в том или ином блоке находится. В нашем примере это правило, на мой взгляд, соблюдено. Прочитав идентификатор #menu, вы сразу догадаетесь, что это блок навигационного меню сайта. Итак, код изменится следующим образом:



<TABLE cellspacing="0" cellpadding="0" id="main" width="100%">
<TR>
<TD id="menu" width="127">
... Код меню сайта
</TD>
<TD id=nline" width="20"></TD>
<TD id="content">
... Основное содержимое страницы ...
</TD> </TR> </TABLE>

Теперь в таблице стилей необходимо записать CSS-правила для этих идентификаторов, которые заменят удаленные из HTML-кода атрибуты фона, выравнивания и позволят задать дополнительные свойства для идентификаторов.

Начнем с идентификатора #main. Для него, как определяющего основную таблицу, нужно задать белый цвет фона, и пока все. Лучше всего цвет представить шестнадцате-ричным кодом, и так как белый цвет кодируется записью #ffffff, то можно использовать сокращенную запись #FFF:

#main { background: #FFF; }

С идентификатором #menu еще проще. Из HTML-кода мы изъяли следующие атрибуты:

{ background="images/bg_menu.gif" align="right" valign="top" }

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

#menu {
/*задаем фоновое изображение*/
background: url("images/bg_menu.gi f") repeat-y;
/*задаем выравнивание текста по правому краю*/
text-align: right;
/*задаем вертикальное выравнивание по верхнему краю*/
vertical-align: top; }

Стиль для идентификатора #line формируется достаточно просто, поскольку нужно указать лишь свойства фона.

#line { background: url("images/bg_line.gif") repeat-y; }

В открывающем теге <TD> последнего столбца, которому мы присвоили идентификатор #content, не было вообще никаких атрибутов. Но пустое правило лишено смысла, поэтому самое время вспомнить о том, что нам средствами HTML не удалось создать отступы для содержимого ячейки этого столбца таблицы. Был вариант с использованием вложенной в ячейку таблицы, для которой мы могли бы указать атрибут cellpadding="10", чтобы сделать отступы по 10 пикселей с каждой стороны. Однако это только бы излишне усложнило код. Теперь с помощью CSS желаемые отступы можно сделать очень просто. Воспользуемся свойством padding:

#content { padding:10px }

Использование атрибута cellpadding для вложенной таблицы позволило бы нам задать только одинаковые отступы со всех сторон. Свойство padding позволяет задать любые значения для каждого из отступов. Для этого в качестве значения свойства надо дашь четыре значения для верхнего, правого, нижнего и левого отступов соответственно. Например:

#content { padding: 10рх 5рх 10рх 15рх }

Абзацы в этом блоке можно оставить как они есть, интерес для нас имеет только заголовок: <Н1 align="center">Уважаемый посетитель!</Н1>

Для заголовка первого уровня при помощи HTML задано выравнивание по центру. В зависимости от того, требуется ли менять способ выравнивания для всех заголовков в документе или только для первого, могут быть предприняты разные действия. Если нужно изменить выравнивание всех заголовков, то можно написать такое CSS-правило:

Н1 { text-align: center }

Если требуется изменить выравнивание заголовков для всех их шести уровней, то следует воспользоваться группировкой селекторов, и правило будет выглядеть так:

HI, Н2, НЗ, Н4, Н5, Н6 { text-align: center }

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

 

Заголовок ||  Первая таблица ||  Вторая таблица ||  Навигационное меню ||  Анализ результатов

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены