Основы HTML

  1. Термины и определения
  2. Принципы WEB 2.0
  3. Структура HTML-документа
  4. Основные метатеги
  5. Форматирование текста HTML
  6. Списки
  7. Текст фиксированного формата
  8. Выделение фрагментов текста
  9. Изменение параметров шрифта
  10. Графика
  11. Таблицы
  12. Гиперссылки
  13. Изображения-карты
  14. Фреймы

Основы CSS3

  1. Что такое CSS
  2. Синтаксис CSS
  3. Стилевые классы
  4. Комбинированные стили
  5. Таблицы CSS
  6. Правила каскадности CSS
  7. Рекомендации применения стилей
  8. Параметры шрифтов
  9. Разрывы строк, вертикальное выравнивание
  10. Параметры фона
  11. Параметры абзаца
  12. Параметры списков
  13. Параметры курсора
  14. Параметры отступов
  15. Параметры рамки
  16. Параметры выделения
  17. Параметры отображения
  18. Контейнеры


   

Стилевые классы

На предыдущем уроке был рассмотрен стиль переопределения тега. Рассмотрим другой стиль


.warning {
	font-family: "Arial";
	font-size: 12px;	
	color: Red;
	font-style: italic
}

Принципиальное отличие данного примера заключается в том, что в качестве селектора используется "произвольное слово", не html-тег. Такая разновидность стиля CSS называется стилевым классом.

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

Для привязки стилевого класса к конкретному html-тегу служит атрибут CLASS, который поддерживается тегами, к которым может быть применен стиль. В качестве значения атрибута CLASS указывается имя стилевого класса без символа точки, которое заключается в кавычки.

ПРИМЕР 1:

<P CLASS="warning">Будьте внимательны!<P>

Абзац, к которому применен стилевой класс "warning", будет отображаться красным наклонным шрифтом Arial размером 12 пикселей.

В качестве атрибута CLASS допускается указывать одновременно несколько имен стилевых классов, при этом имена разделяются пробелом, а действие стилевых классов суммируется.

ПРИМЕР 2:

<P CLASS="style-1 style-2 style-3">...<P>

Именованный стиль

Именованный стиль, как и стилевой класс, явно привязывается к html-тегу, но имеет ряд отличий:

ПРИМЕР 3:


#warning {
	font-family: "Arial";
	font-size: 12px;	
	color: Red;
	font-style: italic
}

...
<P ID="warning">...<P>

TOP ↑