Классы 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" во всем документе с красного, на другой цвет, то достаточно поменять значение цвета в одном месте - в определении этого класса. А изменения вступят в силу сразу же во всем документе. Если на всех страницах сайта подключается один и тот же стилевой файл, то изменение свойств класса в этом файле приведет и к изменению стиля соответствующий тегов на всех страницах сайта. В этом и заключается вся прелесть каскадных таблиц стилей.

Анонс следующего выпуска

В этом выпуске вы познакомились с практическим использованием классов CSS. В следующем выпуске рассмотрим различные стили отображения текста.

Новости сайта Наш сайт - Уроки по веб дизайну. Еженедельные обновления. Многое, что не вошло в выпуски рассылки, вы найдете на этом сайте. Если у Вас есть тематический сайт, предлагаю обмен ссылками. Новым подписчикам будет интересен архив рассылки.

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

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").