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

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

 

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

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

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

 

 

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


Первая таблица

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

<TABLE background="images/top_bg.gif" bgcolor="#FFFF69" border="0" cellspacing="0" cellpadding="0" width="100%">
... Код строк и столбцов таблицы ... </TABLE>

Таким образом, в этом фрагменте кода мы видим, что для таблицы задается следующее визуальное оформление:
  • фоновое изображение background="images /top_bg. gif";
  • цвет фона bgcolor="#FFFF69";
  • отсутствие границ border="0".
Так как таблица с такими параметрами на нашей странице всего одна, уместно будет ввести для нее селектор по идентификатору. Назовем его, например, id="top". Тогда в открывающем теге таблицы следует записать:

<TABLE cellpadding="O" cellspacing="O" id="top" width="100%">

Остальные атрибуты можем легко перенести в соответствующее CSS-правило. Оно будет таким:

#top {
/* задаем цвет фона */
background-color:#FFFF69;
/* задаем фоновое изображение*/
background-image: ur1("images/top_bg.gi f");
/* разрешаем повторение только по горизонтали */
background-image: repeat-x; }

Получилось довольно длинно, но если вспомнить о стенографическом свойстве background, то эту запись можно существенно сократить:

#top { background: #FFFF69 url("images/top_bg.gif") repeat-x; }

Заметьте, что атрибут border="0" исчез безвозвратно, мы вполне можем это допустить, так как по умолчанию границы у таблицы и так отсутствуют. Для этой таблицы мы, пожалуй, больше ничего сделать не можем. По большому счету, выигрыша в коде мы не получили, зато сделали маленький шажок в направлении к разделению структуры и визуального оформления документа.

 

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

 

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

 

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