Оформление веб-страницы с использованием стилей
Оформление с помощью атрибута STYLE
В предыдущих главах мы рассмотрели некоторые способы создания веб-страниц, однако до сих пор почти ничего не говорили о том, как оформляют текст. И это не случайно. Дело в том, что в спецификации HTML 4.0 было рекомендовано использовать для оформления страниц новое мощное сред ство – каскадные таблицы стилей (CSS), которые мы сейчас и рассмот рим. При этом многие теги и атрибуты (собственно говоря, почти все, относящиеся к оформлению) были отменены, в том числе и некоторые из тех, что были рассмотрены нами ранее.
– Стоп! – скажете вы. – А для чего же мы их тогда рассматривали?
Не волнуйтесь, во-первых, мы почти не рассматривали отмененные теги, за исключением наиболее часто встречающихся, а во-вторых, отмена тегов в HTML 4.0 вовсе не означает, что всем нужно немедленно прекратить их использование. В некоторых случаях все равно бывает удобнее воспользоваться одним из этих тегов, и этого не нужно бояться. Отмененные теги все еще поддерживаются текущими версиями браузеров, по крайней мере для совместимости со старыми веб-страницами. Скорее всего, они будут поддерживаться еще очень долго (как, например, до сих пор поддерживаются теги <ХМР> и <BL>, хотя первый из них не используется со времен HTML+, а второй вовсе никогда не входил в его спецификацию). Да и вообще, было бы странно, если бы новая версия какого-либо браузера вдруг “отказалась” от некоторых тегов – это явно не прибавило бы ей популярности. Так вот, отмена тегов означает, что WWW-консорциум не рекомендует более ими пользоваться, поскольку CSS действительно намного удобнее, и возможности автора при этом гораздо шире.
Атрибут STYLE
Итак, давайте начнем изучение оформления веб-страниц с использованием каскадных таблиц стилей CSS. И для начала рассмотрим такое понятие, как атрибут STYLE=.
Самый примитивный способ использования CSS – это ввести в код HTML атрибут STYLE= с соответствующим значением. Его можно добавить практически ко всем тегам (кроме таких, как, например, <HEAD> и <HTML>). Таким образом, вместо отмененных атрибутов в HTML 4.0 всегда следует применять атрибут STYLE=.
Давайте рассмотрим пример. Возьмем для начала веб-страничку из вто рой главы (“Домашняя страница Сергея Сергеева”, см. рис.2.8), в кото рой немного использовались отмененные теги и атрибуты, и попробуем “переписать” ее по всем правилам HTML 4.0, сохранив пока что старое оформление.
Во-первых, вместо:
<BODY BGCOLOR="#BABAAO" TEXT="#1D1D18" LINK="#634438" VLINK="#634438" ALINK="Black">…возможен и более простой вариант:
<H1 ALIGN="center">Домашняя страница Сергея Сергеева</H1>Вместо этого применим атрибут STYLE= взамен отмененного атрибута ALIGN= и напишем:
<H1 STYLE="text-align: center;">Домашняя страница Сергея Сергеева</H1>Этому атрибуту соответствует свойство text-align, принимающее те же зна чения, что и атрибут ALIGN=. Точно так же выровняем следующий тег <DIV>.
Замена тегов на стилевое описание
В следующем блоке использован отмененный тег <FONT>:
<FONT SIZE="+1"><B>Сергей Сергеев</B> - писатель-авангардист, автор 20 рассказов.<BR>В жизни большой любитель собак и компьютерных игр.<BR><BR>Некоторые его рассказы вы можете прочитать прямо здесь.<BR> </FONT>Вы можете спросить, что если атрибут STYLE= легко заменил отмененные атрибуты, то что делать с отмененными тегами? К чему “прикрепить” атри бут STYLE=? В большинстве случаев его можно “прикрепить” к тегу <DIV>. В данном случае мы так и поступим:
<DIV STYLE="font-size: larger;">Как видите, значения свойства font-size отличаются от значений атрибута SIZE= тега < FONT>. Для относительного увеличения размера шрифта используется значение larger, для относительного уменьшения – smaller. Кроме того, можно, во первых, указывать процентное изменение величины шрифта, например font-size: 120%;, либо его абсолютную величину. Для этого можно использовать либо значения xx-small, x-small, small, medium, large, x-large и xx-large, либо просто указать величину шрифта в пикселах – font-size: 18px; или в других единицах.