Основы 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. Контейнеры


   

Встроенные контейнеры

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

При помощи контейнера веб-мастер может "привязать" к определенному элементу html-страницы нужный стиль. Кроме этого, контейнер обеспечивает "привязку" поведения к элементу html-страницы.

Контейнеры бывают двух видов: блочные контейнеры и встроенные контейнеры.

Встроенный контейнер является частью блочного элемента html-страницы. Например, блочным контейнером может быть фрагмент текста абзаца, графическое изображение, которое помещено в абзац и проч.

Для создания встроенного контейнера предназначен парный тег SPAN. Нужный фрагмент блочного элемента помещается внутрь тега SPAN, а в CSS создается нужный стиль, который затем "привязывается" к тегу SPAN.

ПРИМЕР:

.block	{font-color: red}
...
<P>Ягоды у рябины <SPAN CLASS="block">красного</SPAN> цвета.</P>

Блочные контейнеры

Блочный контейнер формируется при помощи парного тега DIV и используется достаточно часто. В блочный контейнер помещают различные блочные элементы: абзацы, заголовки, таблицы и проч.

ПРИМЕР:

<DIV STYLE="text-align: center">
<P>...</P>
<TABLE>
...
</TABLE>
</DIV>

TOP ↑