Иными
словами, любой блочный элемент всегда разрывает строку,
а внутристрочный&пЬэр;— нет.р>
Абзац является примером блочного элемента — он всегда
начинается с новой строки. Любой элемент, который следует за абзацем,
будет также перенесен на новую строку.р>
fcO исЛщ:3:.5», Соде^жимое^айщ:^1у}^ \
/* Предполагается использование рубленого шрифта для всего текста
страницы */
body {
font-family: Tahoma, Arial, sans-serif;
}
/* Заголовок первого уровня делаем золотистым и очень большим */
hi {
color: rgb(255, 204, 0) ;
font-size: 300%;
}
\
Глава 3. Оформление веб-страниц с использованием каскадных листов стилей 133
/* Текст абзацев делаем водянисто-голубым,
применяем выключку по формату */
Р (
color: rgb(0, 153, 204);
text-align: justify;
}
Открыв эту страницу в графическом браузере, мы увидим большущий
заголовок золотистого цвета и три водянисто-голубых абзаца, выровненных по
всей ширине строк (рис. 3.8). Весь текст будет набран с использованием
шрифта без засечек (подробнее о шрифтах поговорим ниже).
рииеч» &
*ШЩ
¦ $» * ф
[.) file.///Z:/examples/03/04-05/index.html
^«««^Ш^нмкШм*:^ j’V ‘-v^ ^
1М
Все элементы логической разметки можно подразделить m два типа: блочные
(block) и внутристрочные (inline).
Разница межяу ними заключается в том, что при визуальном отображении
страницы следующие друг за другом блочные элементы располагаются
вертикально, а внутрисгрочные — горизонтально, Иными словами, любой блочный
элемент всегда разрывает строку,, а внутристрочный — нет.
Абзац является примером блочного элемента — он всегда начинается с новой \
строки, Любой элемент, который следует за абзацем, будет также перенесен на
новую строку.
fwtm
ът
Ш
Рис. 3.8. Отображение страницы, использующей аппаратно-зависимый стиль
Однако при попытке вывести страницу на печать все «излишества» пропадут.
Внешний вид документа в окне предварительного просмотра (рис. 3.9)
свидетельствует, что страница будет напечатана с использованием умолчаний,
принятых в настройках браузера.
А теперь попробуем убрать атрибут media из тега , заменив строку
134
Часть I. Технологические основы
листинга 3.4 на следующую:
Если теперь открыть диалог предварительного просмотра страницы перед
печатью, то внешний вид документа, отраженный там, будет вполне
соответствовать облику нашей веб-страницы, отображаемой в окне браузера
(рис. 3.10).
г^ s дегакнп. « p
| Сжать до ширины страницы ‘
Демонстрация аппаратно-загисимого стиля
file l/IZ /example s/03/04-05/index html I
Элементы логической разметки HTML
Все элементы логической разметки можно подразделить на два типа блочные (block) и
внутристрочные (inline)
Разница между ними заключается в том, что при визуальном отображении страницы
следующие друг за другом блочные элементы располагаются вертикально, а
внутристрочные — горизонтально Иными словами, любой блочный элемент всегда
разрывает строку, а внутристрочный — нет
Абзац является примером блочного элемента — он всегда начинается с новой строки Любой
элемент, который следует за абзацем, будет также перенесен на новую строку.
Рис. 3.9. Предварительный просмотр страницы перед выводом на печать
Демонстрация аппаратно-эависимого стиля
¦jot» ‘¦> HWMft. Г .(чос i ji
Ше:///2:/ех4Я1р1ев/03ЛМ-05/ш
;V=’U’ «Т.н. i- ‘, ‘, f л ;- чо чг k cP
.С. Ц’ ‘t’K !
Рис. 3.10. Предварительный просмотр страницы с модифицированным листом стилей
Глава 3. Оформление веб-страниц с использованием каскадных листов стилей 135
Цвет текста и фона
Свойства, которые назначают цвета для текста и фона тех или иных
элементов веб-страниц, мы уже, фактически, рассмотрели в приведенных выше
примерах.
Цвет текста определяется свойством с закономерным названием color, цвет
фона задается при помощи свойства background-color.
Следует, однако, уделить внимание возможным значениям этих свойств.
До сих пор мы использовали только один из типов значений:
rgb(r, g, b)
Всем известно, что каждый пиксел цветного изображения на экране монитора
формируется при помощи смешения определенных долей красного, зеленого
и синего цветов.
|
5th Фев 2011
|
Теги:
|