Май 2010
Самоучитель по креативному веб-дизайну. Книга 1, стр.161
19 0 Глава 4. Каскадные списки стилей
Свойство font-siz e каскадных списков стилей
равляющих размером
ко экспериментировать со значениями свойства font-siz e для определения оптимального
ПРАКТИКУМ
В то время как атрибут
х/п
размер Уб дюйма, а символ размером 72 пунктов — 1 дюйм. К сожалению, на мониторе текст одинакового
Самоучитель по креативному веб-дизайну. Книга 1, стр.162
Для
р {font-size:12pt}
b {font-size:18pt}
После считывания
ден на экран текст абзаца
18 пунктов.
Часто Web-дизайнеры
body, p {font-size:10рх}
Обратите внимание, что,
Глава 4. Каскадные списки стилей 19 1
Еще один метод
к размеру родительского элемента в пунктах. Отношения типа
в другой. Внешний элемент
Весь текст, заключенный
дескрипторов параграфа,
по отношению к тому элементу параграфа, в рамках начального и
конечного дескрипторов которого он размещенv
Когда мы используем один HTML-элемент
элемент
Параметр em позволяет устанавливать размер
Самоучитель по креативному веб-дизайну. Книга 1, стр.163
cite {font-size:1.5em}
р {font-size:12pt}
Если применить
а текст цитаты выстой 18 пунктов, т. е. в 1.5 раза больше,
На рис. 4.7 показан
форматирования четырех
ycTaHOBKa
Em и пикселей
р {font-family:helvetica,»times new roman»,courier;
b {font-size:18pt}
cite {font-size:1.5em}
li {font-size:30px}
Создание перекрывающегося текста
С помощью каскадных списков
«изюминку», отформатировав и расположив гиперссылки так,
Глава 4. Каскадные списки стилей 19 3
Операторы позиционирования каскадных
ДРУГИХ Объектов). ГиперССЫЛКа
стилей?»
ла каскадного списка стилей
указателя мыши и гиперссылки при ее выделении.)
Свойство positio n каскадных списков стилей
style=»position:relative: left:20px» src=»image2.jpg»>
Правило
браузеру сдвинуть элемент
«П А ISYIJI/Wft Я
Для наложения элементов на Web-странице используется абсолютное
Самоучитель по креативному веб-дизайну. Книга 1, стр.164
страницы и на расстоянии 10 пикселей от левого края страницы:
.linkl {position:absolute; top:50px;
В приведенном правиле можно
194 Глава 4. Каскадные списки стилей
.Iink2 {color:#400040;
font-size:50px;
font-family:Georgia, serif;
position:absolute;
В приведенном примере указание
ieft:2em заставляет Web-браузер
от верхнего края страницы и 100 пикселей от левой границы страницы
ку в этом случае значение
СВОЙСТВе font-size) .
После написания правил
на Web-страницу следующий код:
href=MFigure04-01b. htm»>4To
каскадных списков стилей?
href=»FigureO4-01c. htm»>H3учение CSS…
Атрибут clas s указывает Web-браузеру, какие
Начальный и конечный дескрипторы абзаца
в абзац или разделение их дескрипторами разрыва строки
)
ные
Выравнивание текста на Web-странице
Такие текстовые
Самоучитель по креативному веб-дизайну. Книга 1, стр.165
:
196 Глава 4. Каскадные списки стилей
Аналогично, для выравнивания по левому краю отдельных
Следует иметь в виду, что дочерние
Текст
Текст параграфа 2 будет выровнен влево и вправо
Текст параграфа 3 будет выровнен влево и вправо
Текст параграфа 4 будет выровнен влево и вправо
Самоучитель по креативному веб-дизайну. Книга 1, стр.166
TeKCT параграфа 1 будет выровнен влево
Текст параграфа 3 будет выровнен вправо
Р>
Текст параграфа 4 будет выровнен влево и вправо
Самоучитель по креативному веб-дизайну. Книга 1, стр.167
margin-bottom. В имени каждого свойства
40 пикселей между объектами на странице и левым и правым краями окна
body {margin-left:40px; margin-right:4Орх}
Для управления шириной
Обратите внимание, что
каскадного списка стилей в дескрипторе заставляет
ду текстом абзаца и левым и правым краем Web-страницы
ширины
Для управления
мо вставить поле шириной в две строки, можно
р {margin-bottom:2em}
Для вставки между
Самоучитель по креативному веб-дизайну. Книга 1, стр.168
Это первая
Это
Это первая строка
Это вторая
Самоучитель по креативному веб-дизайну. Книга 1, стр.169
А, например, для создания
hi {border:solid Зрх black}
Первое значение свойства
стилей,
20 2 Глава 4. Каскадные списки стилей
Для независимой работы с каждой страной границы
чения
дой стороны. Например,
примера можно
К счастью, синтаксис каскадных
и неявную (сокращенную) форму
Аналогично, для создания
Обратите внимание, что в предыдущих примерах значения
color можно
На рис. 4.13′ показана
можных
Следует иметь в виду, что чтобы
на промежуток между ними.
Создание абзацного отступа и работа с интервалами между буквами,
Помимо средств
Самоучитель по креативному веб-дизайну. Книга 1, стр.170
нирования
вводить
ПРАКТИКУМ
Например, для
необходимо создать
р {text-indent:2em}
Несмотря на то что в приведенном правиле можно
ницы
го отступа удобнее всего
шении
та изменяется и размер em (а, стало быть, и размер абзацного отступа).