Перейти к основному содержанию
Рецепты Linux

Main navigation

  • Основы
  • Система
  • Команды
  • Программы
  • Дистро
  • Интерфейсы
  • Устройства
  • Доки
User account menu
  • Войти

Строка навигации

  1. Главная
  2. Практическая информатика
  3. Глава 6 Динамический HTML
  4. Стили и таблицы стилей

Классы стилей

При написании HTML-документов довольно часто встречается необходимость каким-либо образом выделять блоки информации, подчеркивать их уникальность или логическую нагрузку. Например, в учебнике по математике кроме обычного описания материала могут присутствовать теоремы, задания, примеры и др. Стандартный HTML предоставляет нам теги логической разметки, например, тег <blockquote> предназначен для длинных цитат. CSS дает возможность самим придумывать логические конструкции и описывать их внешний вид.

Допустим, мы хотим создать страницу, на которой будет два вида абзацев (тег <p>), причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы - интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого. Естественно, при создании такой страницы мы захотим визуально отделить вопросы и ответы друг от друга.

Сначала выделим абзацы (вопросы журналиста и ответы интервьюируемого) с помощью селектора классаclass.

<html>
...
<body>
...
<p class="ask">Вопрос журналиста</p>
<p class="answer">Ответ интервьюируемого</p>
...
</body>
</html>
В разделе head документа зададим стиль каждого класса.

p.ask{
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12pt;
 text-align: justify;
 color: gray;
 margin-left: 100px;
 font-weight: bold;
}

p.answer{
 font-family: Times, serif;
 font-size: 14pt;
 color: black;
 text-align: justify;
 margin-left: 20px;
}

Вопросы журналиста будут отображаться шрифтом серии sans-serif серого цвета, полужирным начертанием, размером 12 пунктов, с отступом 100 пикселов от левого края страницы, с выравниванием по ширине. Ответы же будут отображены шрифтом Times, размером 14 пунктов черного цвета, с отступом 20 пикселов от левого края страницы, с выравниванием по ширине.

Вложенные элементы наследуют правила, заданные для родительских элементов. Так, например, если в абзац, содержащий вопрос журналиста, включить фрагмент текста, выделенный курсивным начертанием, то этот фрагмент при отображении браузером уже будет иметь выделение как курсивом, так и полужирным шрифтом. Это связано с тем, что текст, заключенный между тегами <I> и </I>, входит в состав абзаца и наследует его свойства.

Перекрёстные ссылки книги для Классы стилей

  • Справочник по CSS
  • Вверх
  • Каскадные таблицы стилей

Book navigation

  • Содержание
  • Глава 1 Основы информатики
  • Глава 2 Операционные системы и сети
  • Глава 3 Графика на компьютере
  • Глава 4 Обработка текста
  • Глава 5 Основы языка HTML
  • Глава 6 Динамический HTML
    • Стили и таблицы стилей
      • Использование стилей
      • Задание значений
      • Справочник по CSS
      • Классы стилей
      • Каскадные таблицы стилей
      • Применение CSS
    • Язык JavaScript
    • Рекомендации
  • Глава 7 Простейшие вычисления
  • Глава 8 Системы компьютерной алгебры
  • Глава 9 Модели и программирование
  • Глава 10 Логическое программирование
  • Глава 11 Введение в ООП
  • Глава 12 Программирование и интернет

Последние материалы

  • Утилита sensors
    21 hour ago
  • Сканер Rkhunter
    1 week 1 day ago
  • Программа resize2fs
    1 week 6 days ago
  • Аудиопроигрыватель QMMP
    2 weeks 5 days ago
  • Программа Timeshift
    3 weeks 4 days ago
RSS feed

Secondary menu

  • О проекте

© 2008–2025 Олег Меньшенин mensh@yandex.ru