Учебник по веб дизайну
 Свободное программное обеспечение. Доступно. Бесплатно. Легально.
Учебник
HTML
CSS
  Подключение
  Общие правила
  Классы
  Шрифт
  Текст
  Фон и цвет
  Границы
  Фильтры
DHTML
JavaScript
SSI
Раскрутка
Справочник
HTML
JavaScript
SSI
Браузеры
Хостинг
Скрипты
JavaScript
PHP
Статьи
SEO
HTML
Flash
Все об Интернет
Новости Интернет
Утилиты
Конструктор
Информер
А так же...
Наши баннеры
Контакты
Гостевая
Реклама на сайте

CSS. Классы

Если нужно определить стиль так, чтобы один и тот же элемент в разных случаях отображался по-разному, то на помощь приходят классы. Класс описывается в виде .имя_класса {свойства}. Для присвоения класса выбранному тегу используется свойство CLASS="имя_класса". Это можно продемонстрировать на следующем примере:

КодОтображение
<STYLE TYPE="text/css">
.font1 {color: yellow; background: red;}
.font2 {color: blue; background: yellow;}
</STYLE>
...
<SPAN CLASS="font1">Желтый текст на красном фоне</SPAN>
<SPAN CLASS="font2">Синий текст на зеленом фоне</SPAN>.
А здесь цвет фона и текста заданы по умолчанию.
Желтый текст на красном фоне
Синий текст на зеленом фоне.
А здесь цвет фона и текста заданы по умолчанию.

В примере прописаны два класса "font1" и "font2" задающие цвет фона и изображения. Эти классы были применены к тегу <SPAN>. Свойства, прописываемые классом, могут быть присвоены любому тегу (если он обладает свойствами, описанными в классе). Например, класс font1, определенный в предыдущем примере может быть применен к таблице:

КодОтображение
<TABLE CLASS="font1">
<TR><TD>Это ячейка таблицы</TD><TD>И это тоже</TD></TR>
<TABLE>
Это ячейка таблицыИ это тоже

Для определения класса для определенного тега используется конструкция имя_тега.имя_класса {свойства}. Например, нам нужно часть текста выделить красным. Определим класс для тега <FONT>:

КодОписание
<STYLE TYPE="text/css">
FONT.select {color: red;}
</STYLE>
...
Здесь мы выделили <FONT CLASS="select">часть текста</FONT>.
Здесь мы выделили часть текста.

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

Реклама

Plug&Pray
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

Страница сгенерированна за 0.0144 сек.
Сайт оптимизирован под разрешение 800х600 и браузер MS IE 6.0.
Copyright © 2005-2010 originweb.info, design.originweb.info.
Хостинг ruweb.net