Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 69 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

В связи с использованием line-height следует обратить внимание на применение in-line картинок на HTML-
страницах. Под in-line картинкой здесь имеется в виду картинка, которая встроена в тело документа при помощи элемента
IMG, но не с новой строки и не как элемент таблицы (рис. 56):
<P STYLE="color:white;background-color:black; font-size:20px;">
В эту строку мы встраиваем картинку – <IMG SRC="inline.gif" BORDER="0" WIDTH="24" HEIGHT="24"
ALIGN="top">, на которой изображены концентрические круги.
</P>
Рис. 56
Картинка имеет размеры 24 × 24 пикселя и выровнена по верхнему краю строки. Ее размер больше размера кегля (20
px), поэтому межстрочное расстояние увеличено браузером автоматически.
<P STYLE="color:white; background-color:black;font-size:24px;">
В эту строку, которая имеет размер кегля 24рх, мы встраиваем картинку – <IMG SRC="inline.gif" BORDER="0"
WIDTH="24" HEIGHT="24" ALIGN="top"> , на которой изображены концентрические круги.
</P>
Рис. 57
Таким образом, можно точно позиционировать текст и графику в строке.
3.12.6. Списки
При отображении списков CSS позволяет управлять формой и изображением символа, стоящего перед элементом спи-
ска ("пулек" – bullet). Например, в неупорядоченном списке (unordered list) перед элементом списка ставится "жирная"
точка:
• первый элемент списка;
• второй элемент списка;
• третий элемент списка.
CSS позволяют управлять формой символов и заменять символы картинками.
Управление отображением элементов списка отнесено к набору свойств, в который входит атрибут display. У этого
атрибута может быть только одно значение – none. Если элемент в своем описании имеет атрибут display и этот атрибут
равен none, то он не отображается браузером вообще:
<UL STYLE="display:none;">
<LI>Первый элемент списка
<LI>Второй элемент списка
<LI>Третий элемент списка
</UL>
Если посмотреть HTML-код данного документа, то за примером описания списка следует код, который браузер не ото-
бразил.
Атрибут display управляет отображением документа на дисплее компьютера, но не распространяется на другие сре-
ды отображения документа.
Форма символа списка в виде "жирной" точки несколько непривычна. Обычно в машинописных документах использу-
ют черту. С другой стороны, в рекламных материалах часто в качестве символа списка применяют квадрат или другой сим-
вол типографского набора, а также графическую картинку.
CSS позволяет управлять формой символа списка через атрибут list-style-type (рис. 58):
<UL STYLE="list-style-type:square;">
<LI>В виде "пульки" используем квадрат

Страницы