Замена тегов на стилевое описание

ЛАБОРАТОРНАЯ РАБОТА № 8. Оформление веб-страницы с использованием стилей

Оформление с помощью атрибута STYLE

В спецификации HTML 4.0 было рекомендовано использовать для оформления страниц новое мощное средство — каскадные таблицы стилей (CSS). При этом многие теги и атрибуты были отменены, в том числе и некоторые из тех, что были рассмотрены нами ранее.

Однако, отмена тегов в HTML 4.0 вовсе не означает, что нужно немедленно прекратить их использование. В некоторых случаях все равно бывает удобнее воспользоваться одним из этих тегов. Отмененные теги все еще поддерживаются текущими версиями браузеров, по крайней мере для совместимости со старыми веб-страницами. Отмена тегов означает, что WWW-консорциум не рекомендует более ими пользоваться, поскольку CSS действительно намного удобнее, и возможности автора при этом гораздо шире.

Атрибут STYLE

Итак, давайте начнем изучение оформления веб-страниц с использованием каскадных таблиц стилей CSS. И для начала рассмотрим такое понятие, как атрибут STYLE=.

Самый примитивный способ использования CSS — это ввести в код HTML атрибут STYLE= с соответствующим значением. Его можно добавить практически ко всем тегам (кроме таких, как, например, <HEAD> и <HTML> ). Таким образом, вместо отмененных атрибутов в HTML 4.0 всегда следует применять атрибут STYLE=.

Пример. Откройте файл, посвященному поэту Пушкину, в котором немного использовались отмененные теги и атрибуты, и попробуем “переписать” ее по всем правилам HTML 4.0, сохранив пока что старое оформление. Сохраните web-страницу под именем Стили-1.html.

Во-первых, вместо

<Н1 ALIGN="center"> Творчество Александра Сергеевича Пушкина </Н1>

Вместо этого применим атрибут STYLE= взамен отмененного атрибута ALIGN= и напишем:

<H1 STYLE="TEXT-ALIGN:center; ">Творчество Александра Сергеевича Пушкина</H1>

Этому атрибуту соответствует свойство text-align, принимающее те же значения, что и атрибут ALIGN=. Точно так же выровняем следующий тег <DIV>.

Замена тегов на стилевое описание

В следующем блоке использован отмененный тег <FONT>:

<FONT ALIGN="justify" SIZE="-1">1799, 26 мая (6 июня) - А. С. Пушкин родился в Москве в семье офицера

Стилевое позиционирование

Теперь исправим конструкцию для стихотворения:

< font ALIGN =" left " size ="-1">

Я вас любил: любовь еще, быть может < BR >

В душе моей угасла не совсем; < BR >

Но пусть она вас больше не тревожит; < BR >

Я не хочу печалить вас ничем. < BR >

< BR >

Я вас любил безмолвно, безнадежно, < BR >

То робостью, то ревностью томим; < BR >

Я вас любил так искренно, так нежно, < BR >

Как дай вам бог любимой быть другим.< BR >

< BR >

1829< BR >

</ FONT > Вместо атрибута ALIGN=, а также тегов <FONT> и <I> применим уже знакомые конструкции:

<DIV STYLE = "FONT-ALIGN: LEFT; FONT-SIZE: X-SMALL;">

Текст стихотворения

</ DIV >

При использовании CSS можно использовать такие свойства блока, как width и height (ширина и высота). Например, применим свойство width:

<DIV STYLE = "FONT-ALIGN: LEFT; FONT-SIZE: X-SMALL; width: 35%;">

Текст стихотворения

</ DIV >

Свойство POSITION- задает тип позиционирования — относительный или абсолютный. Относительное позиционирование (relative)- отсчет ведется от той позиции, которую должен был бы занимать этот элемент, если бы позиционирование не было задано. А абсолютное (absolute) позиционирование означает, что отсчет ведется от верхнего левого угла окна браузера (точнее, его рабочей области). Еще у этого свойства может быть значение static, означающее, что элемент не позиционируется индивидуально, и значение fixed (фиксированная позиция — элемент позиционируется абсолютно и не прокручивается вместе с остальным содержимым страницы), которое, однако, поддерживается пока только шестой версией Netscape.

Со свойством position тесно связаны еще два свойства — top и left, которые задают позицию верхнего левого угла элемента соответственно по вертикали и горизонтали. Чем больше значение top, тем ниже расположен элемент, и, соответственно, чем больше значение left, тем элемент правее. В данном случае, для того чтобы приподнять текст примерно на высоту одной строки, нам пришлось написать: top: -18px;.

Абзацный отступ

Абзацные отступы в старых версиях языка html выполняются с помощью серии неразрывных пробелов ( ) — способ не самый изящный. С помощью стилевого свойства text-indent можно определить абзацный отступ в любых единицах. Правда, придется отказаться от деления на абзацы с помощью тега <BR>, поскольку он “не поймет” указаний сделать отступ. Можно делить текст на абзацы “официальным” способом — <Р> , однако, чтобы избежать пропуска строки, мы воспользуемся тегом <DIV> :

<DIV STYLE="text-align: justify; text-indent: 2em;">

Здесь мы определили абзацный отступ, равный двум символам максимальной ширины в данном шрифте. Примените абзацный отступ для эпиграфа.

Самостоятельно примените стилевое оформление для всей веб- страницы.

Результат практически не отличим от старой версии веб-страницы, если не считать немного “исправленных” эпиграфов и абзацных отступов.

Таким образом, мы переписали страничку в соответствии с требованиями HTML 4.0, а попутно рассмотрели еще некоторые дополнительные возможности, предоставляемые CSS.

Стили элементов

Таблица стилей обычно располагается в заголовке HTML-документа, в разделе <HEAD> . Она занимает место между тегами <STYLE> и </STYLE> . Синтаксис таблицы стилей таков. Вы пишете имя элемента HTML, для которого определяете стиль, а после него следует блок определения стиля, заключенный в фигурные скобки. Например, в нашем примере можно написать так:

<STYLE> BODY { background-color: #991993; color: rgb(29,29,24); }

</STYLE>

Пробелы здесь не имеют никакого значения, так же, как и переводы строк. После этого в самом тексте HTML-документа достаточно указать тег <BODY> , и к нему автоматически будут применены данные цвета фона и текста.

Пока что мы вроде бы не получили никакой видимой экономии, хотя скоро вы увидите, что имеет смысл располагать стилевые свойства <BODY> именно в таблице стилей. Чтобы продемонстрировать экономию, пойдем дальше. В нашем примере мы три раза выравнивали заголовки по центру (еще хорошо, что три, а не пятьдесят шесть). Вместо этого можно просто написать в таблице стилей:

Н1,Н2 { text-align: center; }

и после этого просто указывать в документе теги <Н1 > или <Н2> , содержи мое которых будет автоматически центрироваться. Обратите внимание на то, что в таблице стилей, чтобы определить стиль сразу для нескольких элементов, мы перечислили их через запятую.

Если вы помните, у нас еще оставались в теге <BODY> три “отмененных” атрибута: LINK=, ALINK= и VLINK=. Вместо них рекомендуется определить стили для различных псевдоклассов элемента <А>. Это делается так:

A:link,A:visited { color: #634438; } A:active { color: black; }

Как видите, для элемента <А> определены три псевдокласса (имена которых отделяются двоеточием): link — для гиперссылок, visited — для посещенных гиперссылок и active — для активных. Кроме того, во второй версии CSS (CSS Level 2) для тега <А> определены еще псевдоклассы hover (гиперссылка, над которой находится указатель мыши) и focus (выбранная гиперссылка). Однако в броузере Internet Explorer версии 5 поддерживается только первый из них. Например, если написать

A:hover { color: GREEN ; }

то при наведении указателя мыши на ссылку она будет подсвечиваться зеленым цветом. Это уже похоже на динамическое взаимодействие с пользователем !'

Далее, в нашем примере мы два раза определяли одинаковый стиль для горизонтальной линии. Проще, конечно, написать в таблице стилей:

HR { margin-top: 24px; width: 75%; }

и потом в текст документа вставлять только тег <HR> , и тогда, если не указано иное, линия получится такой, какой нужно.

Примените все вышеперечисленные стили между тегами <STYLE> и </STYLE> и примените их.

Стили классов

В тексте нашего примера несколько раз (в данном случае два, но могло бы быть и гораздо больше!) определяется один и тот же стиль для текста эпиграфа, другой стиль для основного текста и третий для стихотворения... Хорошо бы тоже определить их в таблице стилей, однако в нашем HTML--документе все они расположены внутри элементов <DIV> , поэтому надо определить несколько различных стилей для одного элемента. Оказывается, это тоже можно сделать! Для этого, правда, придется использовать несколько более длинную запись, однако это все равно удобнее и короче, чем всякий раз определять атрибут STYLE= или задавать другие атрибуты.

Итак, у нас должно быть два различных стилевых варианта для элемента <DIV> . В CSS они называются классами. Чтобы отличить эти элементы друг от друга, у них придется установить атрибут CLASS=, приблизительно так:

<DIV CLASS="epig">...</DIV>

<DIV CLASS="stix">...</DIV>

………

Имена классов выбираются произвольно. В данном случае мы образовали их от слов “эпиграф”, “стих”. В таблице стилей эти классы можно определить так:

DIV.EPIG {TEXT-ALIGN:justify; FONT-SIZE:14PX;TEXT-INDENT:2EM;}

DIV.STIX {FONT-ALIGN:left; FONT-size:X-SMALL;}

Между прочим, другие элементы (причем практически все) также могут иметь атрибут CU\SS=. Если надо, чтобы определение класса было доступно всем элементам, его можно определить так:

.pdps { font-style: italic; text-align: right; }

То есть, при определении не указывается имя конкретного элемента HTML, а указывается только имя класса, которое в любом случае начинается с точки (но только в таблице стилей, а при обращении к классу в тексте документа точка не ставится). В данном примере мы определяли классы только для элемента <DIV>.

Кстати, кроме стилевых свойств элементов HTML и классов, мы можем определять свойства так называемых идентификаторов. Дело в том, что у каждого элемента HTML может быть атрибут ID= — его уникальное имя в данном документе (этот атрибут играет большую роль при динамическом взаимодействии с пользователем, так что с ним нам еще придется не раз столкнуться). Если вы хотите определить в таблице стилей свойства для элемента, имеющего определенный идентификатор ID=, это можно сделать так:

# соо 1 { color: white; background-color: black; )

Тогда элемент по имени cool (например <DIV ID="cool"> ) будет наделен указанными свойствами (в данном случае белым цветом символов на черном фоне). Только не забывайте, что в каждом HTML-документе каждый идентификатор ID= должен быть уникальным, то есть не может быть двух и более элементов с одинаковым значением атрибута ID=.

Самостоятельно создайте новый вариант странички целиком.

При этом результат получится таким же, как и в предыдущем случае, просто сама запись намного компактнее, да и удобнее. Кроме того, в ней легче ориентироваться. Взглянув на исходный текст, мы сразу можем по имени класса найти, где абзац, а где эпиграф. В предыдущем примере выискивать нужные места текста среди нагромождения стилевых свойств было гораздо труднее.

Внешние стилевые таблицы

Сохраните свою последнюю страничку под новым именем Стили-3.html.

Еще одно замечательное свойство стилевых таблиц заключается в том, что с помощью одной таблицы, находящейся в отдельной файле, можно задавать стили для целого набора веб-страниц. Это, кстати, очень важно при разработке больших сайтов, поскольку, во-первых, способствует сохранению единства стиля, а во-вторых, предоставляет возможность быстро изменить что-либо сразу во многих файлах проекта. Для этого следует просто написать всю таблицу стилей (без тегов <STYLE> и </STYLE> ) в отдельном файле с расширением .css, а затем “подключить” ее во всех HTML- документах, которые должны ее использовать. Например, если файл таблицы стилей называется mainstyle.css, то в раздел <HEAD> каждого из использующих ее HTML-документов, нужно вставить такую строку:

<LINK REL="Stylesheet" HREF="mainstyle.css" TYPE="text/css">

Атрибут TYPE= указывать не обязательно, но лучше это сделать (кстати, это можно делать и в теге <STYLE> ). Во-первых, это признак хорошего тона, а потом мало ли что — вдруг пользователю, к примеру, попадется какой-нибудь сумасшедший броузер, использующий для стилевых таблиц по умолчанию не CSS, а, допустим, JASS.

Есть и другой способ “подключения” стилевой таблицы из внешнего файла — директива @import. Она употребляется следующим образом:

<STYLE TYPE="text/css"> @import url (mainstyle.css) ; </STYLE>

Как видите, эта директива должна находится между тегами <STYLE> и </STYLE> , поскольку она не является элементом языка HTML (как тег <LINK> ). Ее использование менее предпочтительно, поскольку броузеры могут интерпретировать ее по-разному.

Самостоятельно создайте файл таблицы стилей в текущей папке и измените содержимое страницы Стили-3.html, так чтобы использовать стили из этого файла.

Размещение блоков текста

Поместим на последний сайт несколько гиперссылок на стихи Пушкина:

<DIV CLASS="lnk">

<A HREF="http://pushkin135.narod.ru/35.html ">” Талисман ”</A></DIV>

<DIV CLASS="lnk">

<A HREF=" http://pushkin135.narod.ru/59.html ">” Странник ”</A></DIV>

<DIV CLASS="lnk">

< A HREF =" http :// pushkin 135. narod . ru /13. html ">”Молитва”</А> </ DIV >

Обратите внимание на то, что для списка ссылок мы определили класс Ink. Пока что определения свойств этого класса у нас нет, но ясно, что блок ссылок должен выглядеть как-то не так, как все остальное.

Добавление фонового рисунка

Прежде чем мы займемся стилевым оформлением каждого блока, давайте вместо однотонового фона установим градиент. Пусть основная информация находится на светлом фоне, а в районе блока гиперссылок логично было бы начать градиентный перелив в более темный оттенок. Только вот беда: если мы будем создавать фоновый рисунок с градиентным переливом справа, то совершенно непонятно, какой ширины он должен быть. Еще хорошо, что на этой страничке абсолютное позиционирование — можно, в принципе, начать градиент на 565-й точке слева. Однако все равно непонятно, где его заканчивать — ведь ширина экрана зависит от разрешения!

Давайте воспользуемся более изящным методом. Создадим градиент, имеющий слева тот же цвет, что и цвет фона, и расположим его справа. Для этого нам надо написать в свойствах элемента BODY:

Background-position: right;

Фоновый рисунок действительно выровнен по правому краю, но он повторяется во все стороны, а нам это не нужно. Чтобы он повторялся только по вертикали, нужно добавить в свойства BODY еще такую строку:

Оформление текста

Теперь давайте займемся информационным блоком. Чтобы информация хорошо читалась и воспринималась, он не должен особо страдать излишествами, однако, чтобы выделить заголовки списков, их можно написать более крупно и шрифтом другого начертания. Для этого определим соответствующий класс: .bigger { font-size: larger; font-family: sans-serif; } а в тексте документа, после стихотворения, применим его:

<DIV CLASS="bigger"> Другие стихи…</DIV>

Как вы уже, наверное, поняли, свойство font-family определяет гарнитуру шрифта. Значение sans-serif соответствует шрифтам, не имеющим засечек. По умолчанию обычно определен шрифт serif (с засечками, обычно это Times New Roman).

Декоративное оформление текста

Для информационного блока оформление уже вполне закончено. Теперь займемся блоком гиперссылок. Вспомним, что мы для этого даже заготовили класс Ink. Чтобы наши разделы были хорошо заметны, давайте их обведем рамками:

.Ink { border-width: thick; border-style: ridge; border-color: #319CFF; color: red; text-align: center; }

Чтобы рамка вообще отобразилась, необходимо определить свойство border-style (дело в том, что по умолчанию его значение — none, то есть рамки нет). Здесь мы можем выбрать вид рамки из возможных: solid (обычная), double (двойная), groove (вогнутая с обеих сторон), ridge (выпуклая с обеих сторон), inset (вогнутая), outset (выпуклая), dotted (точечная) и dashed (пунктирная). Последние два значения, правда, пока воспроизводятся только в браузере Netscape 6. Мы выбрали значение ridge. Чтобы рамка не терялась на фоне больших букв, зададим свойство border-width: thick; (толстая рамка; еще можно указывать значения thin — тонкая и medium — средняя, а также задавать толщину в любых единицах). С помощью свойства border-color установим цвет рамки, по оттенку сочетающийся с фоном.

Поскольку в одном из обозначенных разделов мы всегда будем находиться, его название не будет являться гиперссылкой. Для него мы определили свойство color: red; (красный цвет текста). У гиперссылок, как вы помните, свой цвет.

Оформление заголовка

Теперь можно заняться заголовком (в нашем случае применим это к стилю .bigger). Во-первых, нужно задать его ширину и высоту, причем первую мы зададим в процентах, чтобы она могла изменяться вместе с шириной окна браузера:

width: 90%; height: 100рх;

Эти значения мы определяем для класса hdr. Значение height выбираем с таким расчетом, чтобы осталось еще немного пространства сверху от остальных блоков нашей веб-странички. Далее для заголовка лучше назначить шрифт покрупнее:

Font-size: 6Орх;

Кроме того, будет лучше, если шрифт заголовка будет контрастен относительно всех остальных шрифтов. Выберем какую-нибудь необычную гарнитуру:

Color: #3163CE;

Далее, мы хотели нарисовать рамку вокруг заголовка. Определим ее свойства, используя сокращенную запись:

Border: 10рх outset #003163;

В этой записи определены сразу три свойства: border-width, border-style и border-color. В некоторых случаях допустимо подобное объединение значений нескольких свойств в одну строку. Это можно написать быстрее, хотя и менее наглядно.

В принципе заголовок готов. Давайте только добавим к нему еще визуальный эффект с помощью свойства filter. Это работает, правда, только в броузере Internet Explorer и отсутствует в спецификациях CSS, однако смотрится очень красиво. Можно применить это свойство, например, так:

Filter: shadow;

В результате наш блок будет отбрасывать тень. Существуют такие значения свойства filter, как dropshadow (другой тип тени), blur (размытие), wave (отражение в волне) и прочие.

В этой лабораторной работе мы рассмотрели, разумеется, не все возможности CSS. Однако мы продемонстрировали применение большинства стилевых свойств.

ЛАБОРАТОРНАЯ РАБОТА № 8. Оформление веб-страницы с использованием стилей

Оформление с помощью атрибута STYLE

Атрибут STYLE

Во-первых, вместо

<Н1 ALIGN="center"> Творчество Александра Сергеевича Пушкина </Н1>

Вместо этого применим атрибут STYLE= взамен отмененного атрибута ALIGN= и напишем:

<H1 STYLE="TEXT-ALIGN:center; ">Творчество Александра Сергеевича Пушкина</H1>

Замена тегов на стилевое описание

В следующем блоке использован отмененный тег <FONT>:

<FONT ALIGN="justify" SIZE="-1">1799, 26 мая (6 июня) - А. С. Пушкин родился в Москве в семье офицера

12 3 Следующая ⇒

Последнее изменение этой страницы: 2019-03-31; Просмотров: 351; Нарушение авторского права страницы