Поздравляю Вас с Днем Святого Валентина и представляю Вашему вниманию десятый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске мы рассмотрим несколько примеров использования каскадных таблиц стилей.
Если нужно определить стиль так, чтобы один и тот же элемент в разных случаях отображался по-разному, то на помощь приходят классы. Класс описывается в виде .имя_класса {свойства}. Для присвоения класса выбранному тегу используется свойство 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. В следующем выпуске рассмотрим различные стили отображения текста.
P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").