Интернет Университет информационных технологий www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Основы web-технологий
Глава 1.
Введение в HTML-разметку
Глава 2.
Применение каскадных таблиц стилей
  8.   Назначение и применение CSS
  9.   Блочные и строковые элементы
  10.   Цвет и шрифт
  11.   Текст и списки
  12.   Позиционирование
Глава 3.
JavaScript
Глава 4.
Интерфейс Web-приложений
      Экзамен
      Ссылки к курсу

  Общение
однокурсники
форум по курсу
вопрос преподавателю

Основы web-технологий
Глава 2. Применение каскадных таблиц стилей версия для печати: HTML, PDF
Лекция #11: Текст и списки Страницы: « 1 2 3 вопросы »

Первая строка параграфа

При оформлении параграфов в технологии CSS автор может воспользоваться "красной" строкой, такую возможность предоставляет ему атрибут text-indent.

Речь идет о горизонтальном отступе в первой строке параграфа относительно его левого края: (открыть)

<P STYLE="text-indent:20pt;">Этот параграф мы начнем со строки с горизонтальным отступом в двадцать типографских пунктов от левого края параграфа.</P>
<P STYLE="text-indent:-10pt;">А в этом параграфе мы применим отрицательный горизонтальный отступ в первой строке параграфа.</P>

Отрицательные значения атрибутов — это нормальная практика CSS. Там, где применение отрицательного значения оправдано, например, в случае смещения вложенного блока текста относительно охватывающего элемента разметки, можно указывать отрицательные атрибуты смещения.

Кроме text-indent в CSS для оформления первой строки параграфа зарезервирован модификатор стиля first-line. Он позволяет не только задать горизонтальное смещение, но и определить другие параметры параграфа:

P:first-line { color:red; }

Еще один параметр, который влияет на отображение первой строки параграфа — первая буква первой строки. Ее отображением управляет модификатор first-letter:

P:first-letter { font-size:20pt; }

К сожалению, оба названных модификатора реализованы не во всех версиях браузеров, поэтому для верности применяют элементы разметки FONT и TABLE.

Межстрочное расстояние

В CSS межстрочное расстояние определяется параметром line-height. Он задает расстояние не между строками, а между базовыми линиями строк. Проще говоря, если, например, взять букву "н" и напечатать ее последовательно друг под другом, то line-height будет равно расстоянию между двумя одинаковыми точками букв.

Посмотрим, как этот параметр влияет на взаимное расположение строк: (открыть)

<P STYLE="line-height:12pt;font-size:12pt;color:darkred;">
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 12 pt.</p>
<P STYLE="line-height:24pt;font-size:12pt;color:darkred;">
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 24 pt.</P>
<P STYLE="line-height:6pt;font-size:12pt;color:darkred;">
Этот параграф мы набрали кеглем 12 pt.
Line-height задан в 6 pt.</P>

Первый пример набран со значением line-height, равным размеру кегля. Во втором примере значение line-height вдвое превышает размер кегля. В третьем примере значение line-height в два раза меньше размера кегля — строки стали "наползать" друг на друга.

В связи с использованием line-height следует обратить внимание на применение in-line картинок на HTML-страницах. Под in-line картинкой здесь имеется в виду картинка, которая встроена в тело документа при помощи элемента IMG, но не с новой строки и не как элемент таблицы: (открыть)

<P STYLE="color:white;background-color:black;font-size:20px;"> В эту строку мы встраиваем картинку - <IMG SRC="inline.gif" BORDER="0" WIDTH="24" HEIGHT="24" ALIGN="top">, на которой изображены концентрические круги.</P>

Картинка имеет размеры 24х24 пиксела и выравнена по верхнему краю строки. Ее размер больше размера кегля (20 px), поэтому межстрочное расстояние увеличено браузером автоматически. (открыть)

<P STYLE="color:white;background-color:darkred;font-size:24px;"> В эту строку, которая имеет размер кегля 24рх, мы встраиваем картинку - <IMG SRC="inline.gif" BORDER="0" WIDTH="24" HEIGHT="24" ALIGN="top">, на которой изображены концентрические круги.</P>

Таким образом, можно точно позиционировать текст и графику в строке.

Перейти к следующей странице »
версия для печати: HTML, PDF
Страницы: « 1 2 3 вопросы »
  Основные понятия
Текст, межбуквенные расстояния, высота строк, выравнивание, отступ в первой строке, преобразования начертания, преобразование шрифта, межстрочное расстояние, списки, изображение ("пулька", bullets).
 
  Информация о лекции
Свойства текстовых фрагментов: межбуквенные расстояния, высота строк, выравнивание, отступ в первой строке параграфа, преобразования начертания. Управление формой и отображением списков.
 
  Информация о главе
Глава 2. Применение каскадных таблиц стилей
Курс посвящен изучению способов гипертекстовой разметки с применением каскадных таблиц стилей (Cascade Style Sheets).
 
  Учебники к курсу
Основы web-технологий
Основы web-технологий
Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И.,
Интернет-университет информационных технологий - ИНТУИТ.ру.
Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS. Допущено УМО в области прикладной информатики для студентов высших учебных заведений, обучающихся по специальности 351400 "Прикладная информатика".
Dynamic HTML
Айзекс С., BHV-Санкт-Петербург.
Настольная книга Web-мастера: эффективное применение HTML, CSS и JavaScript
Коржинский С.Н., КноРус.
Практические занятия по HTML. Краткий курс
Будилов В.А., Наука и техника.
все книги по курсу »