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

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

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

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

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

Реклама

Тематическое приложение Digital Signage
Программиста спрашивают: Скажите пожалуиста, который час? Программист: Который час, если вас это прикалывает девушка.
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

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