Краткое содержание в Интернете 1 Краткое содержание 3 часть I 10 Основы Интернета 10 Что такое Интернет 11



Скачати 11.08 Mb.
Сторінка27/35
Дата конвертації31.03.2017
Розмір11.08 Mb.
1   ...   23   24   25   26   27   28   29   30   ...   35

С помощью атрибутов тега установите параметры фона, разделительных линий и задайте ширину столбца. Изображенная ниже таблица (рис. 21.6) будет появляться у правого или левого края веб-страницы в зависимости от значения атрибута ALIGN.

Внимание! Данный текст может содержать ошибки'

Рис. 21.6. Таблица, используемая для вывода сообщения

Вставка горизонтальных линий

Отделить один раздел веб-страницы от другого можно с помощью горизонталь­ной линии. Она создается посредством тега


, который обеспечивает переме­щение вниз на одну строку, вставку горизонтальной линии и переход в начало следующего раздела с новой строки.

Параметры линии задаются с помощью атрибутов данного тега. Атрибут WIDTH оп­ределяет длину линии в процентах от ширины окна браузера, где отображается веб-страница. С помощью атрибута SIZE можно указать толщину линии в пиксе­лах. Атрибут ALIGN предназначен для выравнивания линии по левому или по пра­вому краю либо по центру. Тег, который вы видите ниже, обеспечивает отображе­ние отцентрированной линии толщиной в два пиксела, которая занимает 80 % ширины окна браузера:


Добавление изображений

Веб-страница, содержащая только текст, то есть не включающая никаких рисун­ков, может показаться посетителю не очень интересной. Для того чтобы сделать ее более красочной, а следовательно, более привлекательной, нужно снабдить веб-страницу иллюстративным материалом.

Где его взять? Да где угодно. Можно использовать готовые иллюстрации, создать собственные с помощью графического редактора, загрузить снимки, выполнен­ные цифровой камерой, либо отсканировать какие-то понравившиеся рисунки или фотографии. Существует также много сайтов, с которых можно бесплатно за­грузить различного рода изображения.

Чтобы добавить рисунок, нужно в том месте тела веб-страницы, где он должен появиться, ввести тег (image — изображение). Для указания имени файла, содержащего рисунок, применяется атрибут SRC (source — источник), например:

Но прежде чем включать изображение в веб-страницу, нужно определить, где бу­дет храниться его файл и какой путь указывать в теге — абсолютный или относи­тельный.

Абсолютный и относительный пути к файлу

При использовании абсолютного пути имя файла предваряется указанием пол­ного пути к файлу. После перемещения файлов или изменения имен каталогов (папок) вам придется отредактировать каждый тег в каждом HTML-файле, который содержит абсолютный путь. По этой причине данный способ указания файлов считается не совсем удобным.

Относительный путь определяет путь к файлу изображения относительно место­нахождения HTML-файла. Почему рекомендуется применять именно этот способ именования графических файлов, вы сейчас поймете. Если файл изображения хра­нится в том же каталоге, что и HTML-файл, в теге можно использовать толь­ко имя файла изображения, без указания пути (как показано в примере предыду­щего раздела). А если файл изображения размещается в подкаталоге каталога, где находится HTML-файл, в тег нужно включить имя этого подкаталога:

Когда файл изображения хранится в каталоге одним уровнем выше HTML-фай- ла, имя пути должно содержать две точки (..):



images или picturesи во всех тегах всех страниц веб-узла за­дают ссылку на один набор графических файлов.

Атрибуты изображения

Позиционировать изображение и управлять размещением текста вокруг него можно с помощью следующих атрибутов тега .

► HEIGHT и WIDTH. Управляют размерами (в пикселах) области, в которой изобра­жение появится на веб-странице. Эти атрибуты являются необязательными; используйте их лишь в том случае, если вас по какой-либо причине не устраи­вают размеры области, где рисунок отображается по умолчанию. Тогда веб- браузер приведет высоту и ширину изображения к указанным размерам. За­давая атрибуты HEIGHT и WIDTH, обязательно сохраняйте пропорции оригиналь­ного изображения, иначе оно будет выглядеть вытянутым по горизонтали или по вертикали. Приведенный ниже тег будет отображать рисунок из фай­ла picture.gif в виде прямоугольника со сторонами 30 и 50 пикселов независи­мо от реального размера хранимого изображения:

ПРИМЕЧАНИЕ

На веб-страницах лучше использовать изображения небольших (но и не слишком ма­леньких) размеров, поскольку таковые быстрее загружаются. Размер файла со слиш­ком большим изображением нужно уменьшить с помощью графической программы. Не рассчитывайте только на применение атрибутов HEIGHT и WIDTH, поскольку они не влияют на размер файла (а следовательно, не сокращают время его загрузки). Они лишь модифицируют способ отображения файла в браузере. Информация о способах изменения размера файла, содержащего веб-графику, приведена в главе 23.



  • ALIGN. Управляет размещением текста, обтекающего изображение. Данный ат­рибут имеет пять возможных значений:

  • ТОР — располагает первую строку текста на одном уровне с верхним краем изображения;

  • MIDDLE — выравнивает фрагмент текста относительно середины изображе­ния по вертикали;

  • BOTTOM — выравнивает последнюю строку текста по нижнему краю изобра­жения (атрибуты TOP, MIDDLE и BOTTOM удобно использовать при условии, что имеется одна строка текста, которую нужно поместить рядом с изображе­нием);

  • LEFT — размещает изображение в левой части страницы и выравнивает аб­зац по правому краю изображения;

  • RIGHT — размещает изображение в правой части страницы и выравнивает абзац по левому краю изображения.

Атрибуты LEFT и RIGHT обычно применяются при необходимости разместить текст рядом с изображением. Так, следующий тег позволяет отобразить рису­нок в левой части веб-страницы и выровнять обтекающий его текст по право­му краю:



  • HSPACE и VSPACE. Определяют ширину незаполненного пространства вокруг изо­бражения. Оба значения должны быть указаны в пикселах. Атрибут HSPACE ус­танавливает ширину пространства слева и справа от изображения; он позво­ляет управлять расстоянием от текста, выровненного по одному из краев изображения, и самим изображением. Атрибут VSPACE задает ширину про­странства, остающегося над и под изображением. При использовании тега, приведенного ниже, ширина незаполненного пространства слева и справа от рисунка составит 25 пикселов, а сверху и снизу — 10:



  • BORDER. Определяет, должна ли быть рамка вокруг изображения, и задает ее ширину. Ширина рамки измеряется в пикселах. Следующий тег позволяет вставить изображение с рамкой, ширина которой составляет три пиксела (сплошная линия):



  • ALT. Содержит текст, который появляется во время загрузки рисунка, отобра­жается в браузере, не поддерживающем графику, либо появляется на экране, если пользователь предпочитает не загружать рисунок при просмотре веб­страниц. Атрибут ALT рекомендуется включать во все теги изображений, что­бы веб-узел был доступен для пользователей с дефектами зрения, которые для чтения текста на экране применяют специальное программное обеспече­ние. Например:

Обратите внимание, что перечисленные атрибуты применять не обязательно. Не­обходимым является только атрибут SRC, определяющий имя файла. Все атрибу­ты размещаются в одном теге, , и разделяются пробелами. Если вы решите использовать все перечисленные выше атрибуты, тег может выглядеть сле­дующим образом:



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

Изображение может быть отцентрировано, если заключить тег между тега­ми

и
:



ALT="Oблoжкa лучшей книги этой нeдeли">
Кроме того, изображение может служить ссылкой, которая переадресует посети­теля на новую страницу или на другой узел. Подробнее об этом будет рассказано в следующем разделе.

Добавление ссылок

Возможность мгновенно переходить с одного места веб-страницы на другое стала фактором, обусловившим столь широкую популярность Веб. Перемещаться по веб-узлу или переходить на другие связанные с ним веб-узлы позволяют ссылки. Их еще называют гиперссылками и гипертекстовыми ссылками.

В ссылках используется тег <А> с атрибутом HREF (Hypertext REFerence — гипер­текстовая ссылка) для указания URL, с которым связана данная ссылка. Между начальным тегом <А> и заключительным тегом размещается текст или графи­ческие изображения, которые появляются на веб-странице в виде ссылки. Про­стейшая ссылка выглядит примерно так:

Посетите <А HREF="suggest.htm">CTpaHHuy предложений клуба книголюбов.

Значение атрибута HREF ("suggest.htm") указывает, какая веб-страница появится в браузере, когда пользователь щелкнет на данной ссылке. Текст, находящийся между начальным и заключительным тегами, появится на экране в виде ссылки (обычно это подчеркнутый текст синего цвета).

В качестве значения атрибута HREF может быть указано имя файла или URL другой веб-страницы. Если значением является имя файла, ссылка ведет к другой веб­странице, которая хранится на этом же веб-узле, и вы должны решить, какой ее путь — абсолютный или относительный — должен быть задан. Обычно рекоменду­ется использовать относительные пути. (Описание различий между абсолютными и относительными путями дано ранее в этой главе, в разделе «Абсолютный и от­носительный пути».)

При необходимости дать ссылку на любую другую веб-страницу в Интернете, ука­жите в атрибуте HREF полный URL страницы назначения:



<А HREF="http://www.piter.сот">Кни ги издательства «Питер>х/А>

Создавая ссылки можно использовать не только текст, но и графику. На многих веб-страницах для обеспечения лучшей ориентации читателей используются кнопки навигации Вперед, Назад, Домой, Оглавление и т. д. Если вы хотите исполь­зовать в качестве ссылки изображение, включите между тегами <А> и тег . Рассмотрим код HTML со ссылкой, которая ведет к странице schedule.html на том же узле; в качестве ссылки применяется картинка под названием nextgif (небольшой рисунок, напоминающий кнопку Вперед):



<А HREF="schedule.htm">

СОВЕТ

Наряду с кнопками навигации обязательно используйте на страницах текстовые ссылки, так как не у всех посетителей браузеры отображают графику.

Использование ссылок для перемещения в пределах страницы

Ссылка не всегда «уводит» читателя с текущей страницы. На длинной странице, где текст бывает разбит заголовками на несколько частей, ссылки создают в верх­ней и нижней частях страницы, что дает возможность читателям быстро перехо­дить к нужным вопросам. Для создания ссылки в каком-либо месте на текущей странице необходимо добавить два тега: первый (он называется якорем) — для того чтобы отметить место перехода по ссылке, второй — чтобы добавить ссылку, с помощью которой читатель мог бы перейти к нужному месту.

Место перехода на странице можно отметить, переместив курсор в начало объек­та, к которому необходимо перейти, и введя тег <А> с атрибутом NAME. (Теги можно разместить в начале и в конце текста, можно ввести между ними новый текст.) Приведенный ниже тег присваивает некоторому тексту имя якоря "members":

<А NAME="members"> Члены клуба книголюбов

Чтобы добавить ссылку, при активизации которой будет выполнен переход к яко­рю, переместите курсор в место ее вставки и введите тег <А> с атрибутом HREF. В значении атрибута HREF используется символ «#», указывающий, что это ссыл­ка на имя якоря. Следующий тег создает ссылку, которая позволяет перейти к яко­рю под названием "members":



<А HREF="#nembers">CnMCOK членов клуба книголюбов

Если посетитель щелкнет мышью на ссылке «Список членов клуба книголюбов», он перейдет к разделу с таким же названием.



СОВЕТ

Если вы создаете большую веб-страницу, снабдите ее несколькими ссылками, которые предоставят пользователям возможность переходить из любого места страницы в ее начало.

Добавление ссылки на адрес электронной почты

Вероятно, вы обратили внимание на то, что почти всегда в нижней части веб­страницы содержится ссылка на электронный адрес веб-мастера или разработчи­ка этой страницы.

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

Чтобы добавить ссылку на ваш адрес электронной почты, вместо URL в теге <А> укажите параметр mail to: и свой адрес электронной почты. Например:



<А HREF="MAILTO:nettcr@gurus.con">ABTopbi полного справочника по Интернету

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

Использование фреймов на веб-страницах

Фреймы — это средство компоновки, используемое многими создателями веб-уз- лов. На начальном этапе развития Веб компоновка страницы считалась второсте­пенной задачей по сравнению с организацией ее информационного наполнения. Однако с течением времени, по мере того как у разработчиков узлов появлялось больше возможностей и способов представления информации, отношение к дан­ному вопросу постепенно изменялось.

Фреймы позволяют разделить веб-страницу на прямоугольные области. Наибо­лее часто фреймы применяются для отображения списка ссылок в левой части экрана или вывода информации в его правой части. Ссылки, находящиеся в ле­вом фрейме, все время отображаются на экране, хотя посетитель и переходит от одной страницы с информацией к другой. Эти ссылки выполняют роль оглавле­ния данного узла, хотя сам фрейм почти никогда так не называют. Пример веб-страницы, созданной с применением фреймов, приведен на рис. 21.7.

Чтобы воспользоваться преимуществами, которые дает применение фреймов, нужно ввести теги, определяющие их компоновку на странице. Содержимое каж­дого фрейма хранится в отдельном файле. Веб-страница, на которой отображают­ся два фрейма, хранится в виде трех файлов: главного с тегами компоновки фрей­мов и файлов самих фреймов. Файлы, которые отображаются в каждом фрейме,



bOOkshop

В продаже: 97572, новых-803
представляют собой обычные веб-страницы, без каких-либо специальных средств форматирования, связанных с использованием фреймов.

, например так:




BOOKSHOP - самый дружелюбный книжный магазин - Microsoft Internet Explorer f-lfcf fx"

I Файл Правка Вид Избранное Сервис Справка

Q Назад - ^ ' й ^Р Поиск ^Избранное фМедиа




И - $ "

Адрес: [&Q http;//'A»v.bootehop.corn.ua




| Q Переход Ссылки в

Тел (044)219-1902

order-ії bookshop kev.ua




Добро пожаловать в виртуальный книжный магазин с реальными книгами!

Быстрый переход






Поиск по автору или названию

S

Расширенный поиск книг Тематический рубрикатор

Популярные темы:



Компьютеры

Экономические науки



Юридическая литература и право

Художе ств е н н а я л и т е р а тур а

Наука и образование

Дом, быт, досуг, хобби

Психология

Медицина, здоровье

Языки и лингвистика

Детский нир



Полный список тем

Книжный мир

[Новые книги! IБестселлеры! [Рекомендуем! [Мнения читателей! ГЗакад любой книги! Щодписка на новости] [Система скидок! [Советы! [Вопрос-ответ! |Консулыации1 [QpiOPbi книг! IФорумы! [Партнерская программа! [Как нас найти!

Новые поступления

Распродажа ... Доставка за рубеж и курсы с алют ... Не трать деныи на интернет ... Как купить на Airi5~ori.com

Книжным мир 06/07X2003 1 5 36 36



Пятый Гарри Поттер "добрался" до Украины (и до нашего магазина тоже)...

04/07/2003 1 6:16:24 Новые книги Сергея Юрского



Остальные новости

Обзоры КНИГ




Елисеев Д.

"Аппаратно-

программные

средства

карманных

компьютеров.'



Джон Уокенбах, Брайан

Андердал "Excel 2002. Библия и пользователя."
"Для тех, кто еяжетза рулем". Говорящие книги в формате МРЗ.






I Открытие страницы http:^www.bookshop,corn,ua/,

Рис. 21.7. Применение фрейма для создания оглавления веб-страницы

Создание фреймов

Главный файл веб-страницы содержит тег , определяющий компоновку страницы, и теги , в которых указывается имя файла, отображаемого в дан­ном фрейме. В файле главной веб-страницы раздел BODY должен отсутствовать, поскольку тело страницы находится в отдельных файлах, в которых хранятся фреймы.

Не все браузеры могут отображать фреймы, однако последние версии Internet Explorer делают это. На каждой странице, созданной с использованием фреймов, обязательно разместите текст для посетителей сайта, браузеры которых не способ­ны работать с фреймами. Эта информация должна быть включена в тег , благодаря чему ее и смогут увидеть читатели указанной категории.

Компоновка фреймов


^ Ф Интернет


Теги и определяют, как разделена страница — по горизон­тали (с использованием атрибута ROMS) или по вертикали (с использованием ат­рибута C0LS). Размер каждого фрейма можно указывать в пикселах или в процен­тах от общего размера окна браузера, в котором отображается веб-страница. Так,

следующие теги делят страницу на два вертикальных фрейма: первый из них за­нимает 20 % от ширины страницы, второй — оставшуюся ее часть (обозначено звездочкой):



Отображение веб-страниц во фреймах

Между тегами и содержится по одному тегу для ка­ждого фрейма. Значение атрибута SRC тега указывает имя файла веб-стра- ницы, отображаемой в этом фрейме. Эти файлы открываются в окне браузера в оп­ределенном порядке. Если вы зададите два фрейма, то первый из них будет ото­бражаться в левом столбце, а второй — в правом. (При использовании в теге атрибута ROWS, предназначенного для разделения окна браузера по го­ризонтали, первый файл появится над вторым.)

Приведенные ниже теги определяют имена файлов, которые будут отображаться в двух фреймах:





ВНИМАНИЕ

Для того чтобы содержимое фрейма можно было прокручивать на экране, следует вос­пользоваться атрибутом SCROLLING тега . По умолчанию этот атрибут имеет значение YES.

Отображение текста браузерами, не поддерживающими фреймы

Текст, который будет появляться в браузерах, не поддерживающих фреймы, дол­жен располагаться между тегами и :



Эта страница создана с использованием фреймов, которые не поддерживаются вашим браузером.

Пример использования фреймов

Ниже дан пример веб-страницы, в которой используются фреймы:





<ТП1Е>Домашняя страница справочника по Интернету"

Эта страница создана с использованием фреймов, которые не поддерживаются вашим браузером.

Щелкните <А HREF="noframes.html">3flecb, чтобы перейти к странице, созданной без

применения фреймов.







Изменение содержимого фрейма

Если на веб-странице в одном фрейме находится оглавление веб-узла, нужно сде­лать так, чтобы ссылки в этом фрейме управляли содержимым другого фрейма. То есть при щелчке на ссылке в левом фрейме в правом должна отображаться конкретная веб-страница. Чтобы создать такую ссылку, правому фрейму нужно присвоить имя, а затем обращаться по этому имени в соответствующей ссылке.

Чтобы присвоить имя фрейму, добавьте к тегу атрибут NAME. Так, в следую­щем теге правому фрейму присваивается имя Data:

Затем включите имя этого фрейма в тег <А> левого фрейма, применяя атрибут TARGET для указания фрейма, в котором должно появиться содержимое нового файла, заданного в ссылке. Например, оглавление веб-страницы, отображаемое в левом фрейме, может содержать следующий тег <А>, который определяет файл bookfile.html, отображаемый во фрейме Data:

<А HREF="bookfile.html" TARGET="Data">nepBoe знакомство с клубом книголюбов

После щелчка на ссылке в левом фрейме в правом отобразится соответствующая ей веб-страница.



ПРИМЕЧАНИЕ

Если вы не используете атрибут TARGET, при щелчке на ссылке веб-страница отобра­зится в том же фрейме, где расположена данная ссылка (иными словами, в левом фрейме).

Применение таблиц стилей

Трудоемкий процесс создания веб-страниц можно значительно облегчить, вос­пользовавшись специальными технологиями разработки, а также разнообразны­ми сервисами, которые обычно предоставляются провайдерами. Одним из важ­нейших вспомогательных элементов, облегчающих создание сайтов, являются так называемые каскадные таблицы стилей (Cascading Style Sheets, CSS), предна­значенные для централизованной настройки внешнего вида страниц.

HTML всегда поддерживал концепцию стилей — готовых типов форматирования текста, предназначенных для веб-страниц. К числу встроенных стилей HTML от­носятся стиль тела страницы, используемый для неформатированного текста, и стили заголовков (от <Н1> до <Н6>). Первоначально в HTML не существовало средства для изменения параметров стилей — до тех пор, пока не были изобрете­ны каскадные таблицы стилей. Они совершили настоящую революцию в области создания и структурирования веб-страниц и открыли перед дизайнерами широ­чайшие возможности для творчества. Таблицы стилей позволяют реализовать множество интересных возможностей, самыми важными из которых считаются:


  • изменение внешнего вида текста и других объектов на всех страницах сайта без редактирования этих страниц;

  • позиционирование и создание анимационных эффектов для текста и других объектов на страницах.

В следующих разделах речь пойдет о создании и применении стилей, а также о раз­мещении объектов на страницах.

ПРИМЕЧАНИЕ

В настоящей главе рассматриваются только наиболее популярные элементы CSS. Для получения полной информации относительно этой технологии можно обратиться на сайт World Wide Web Consortium по адресу www.w3.org и открыть ссылку CSS (Cascading Style Sheets). Можно также выполнить поиск по ключевым словам «каскадные таблицы стилей» в Google или другой русскоязычной поисковой системе.

Концепции таблиц стилей

Таблицей стилей называется набор определяемых веб-дизайнером стилей форма­тирования текста и других объектов, размещаемых на страницах сайта. Редакти­руя таблицы стилей, дизайнер изменяет внешний вид объектов, не внося измене­ния непосредственно в сами веб-страницы.



ПРИМЕЧАНИЕ

Для использования технологии CSS не обязательно вручную писать HTML-код таблицы стилей, а затем, опять же вручную, связывать элементы страниц со стилями из этой таблицы. Последние версии наиболее популярных средств разработки веб-страниц поддерживают технологию CSS или хотя бы ее важнейшие элементы. Создавать стили и применять их к элементам страниц можно, в частности, с помощью приложений Micro­soft FrontPage, Macromedia Dreamweaver и Adobe GoLlve.

Типы таблиц стилей

Стиль может применяться к одному элементу, одному документу или множеству

документов, в зависимости от того, где хранится его объявление.


  • Один элемент. Можно определить стиль одного тега веб-страницы, приме­няемый только к его содержимому. Такие стили называются текстовыми. Их используют в тех случаях, когда отдельные элементы, встречающиеся в од- ном-двух местах сайта, требуют специфического форматирования.

  • Одна веб-страница. Определение стиля в заголовке того документа, в котором он используется, называется внедрением таблицы стилей. Эта технология об­легчает стандартизацию стилей в пределах страницы и применяется тогда, ко­гда сайт состоит всего из нескольких по-разному отформатированных страниц.

  • Множество веб-страниц. Таблицу стилей можно хранить в отдельном файле и ссылаться на нее из любого количества веб-страниц. Такой файл имеет рас­ширение ess и называется внешней таблицей стилей. Данная таблица позво­ляют управлять внешним видом страниц централизованно, что особенно удобно, если сайт содержит довольно большое количество страниц, требую­щих однородного форматирования.

Где бы ни хранились объявления стилей — в отдельном теге, в заголовке страни­цы или во внешнем файле, — действуют они одинаково.

Объявления стилей

Внедренные и внешние таблицы стилей содержат списки объявлений; каждое из них состоит из имени стиля и его свойств (например, цвета, характеристик шрифта и т. п.). Приведем пример объявления стиля:



элемент { свойства }

Стили задаются для всех стандартных элементов HTML, в том числе абзацев <Р>, <Н1> и <Н2>. С помощью свойств стиля определяются основные параметры текста, такие как размер, шрифт, отступы. Значение свойства можно задать следующим образом:



имя_свойства:значение

Перед двоеточием могут стоять пробелы, но браузеры не обращают на них внима­ния. В табл. 21.2 описаны наиболее распространенные свойства форматирования и приведены их значения. Большинство из этих свойств задают цвета и единицы измерения элементов веб-страниц или имена используемых файлов.



  • Цвета. Можно применять 16 VGA-цветов Windows (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white,yellow). В каче­стве альтернативы используются числовые значения, описанные в разделе, посвященном выбору цвета фона.

  • Единицы измерения. Эти значения задаются в относительных единицах, на­зываемых em. 1 em соответствует высоте заглавной буквы шрифта элемента. В качестве альтернативы разрешается применять пикселы (рх), дюймы (in) или сантиметры (cm); результаты, полученные при использовании этих еди­ниц измерения, зависят от размера и разрешения экрана и иногда бывают не­предсказуемыми. Размеры можно задавать и другим способом — указывать процент от стандартного размера элемента. Например, если размер текста должен составлять 150 % от его обычного размера, в качестве значения свой­ства, определяющего размер шрифта, можно задать 150 %.

  • Имена файлов. Задаются в виде url (имя). Именем может служить имя файла на том же веб-сервере, например url (fill .gif) или url (images/fill.gif), либо URL веб-страницы, например url (http://www.uua.org/chalice.gif).

Для элемента можно задать несколько свойств, определив, предположим, его шрифт, цвет и фон. Значения свойств разделяются символами точки с запятой. Например, следующее объявление стиля определяет для заголовка Н2 шрифт Sans-Serif (Arial, если он доступен) синего цвета и курсивное начертание текста:

Н2 { font-family: Arial. Sans-Serif: font-style: italic; color: blue }




Таблица 21.2. Некоторые свойства стилей CSS

Свойство стиля

Описание

Пример

background-color

Сплошной цвет фона элемента

background-color: red

background-image

Графический файл, содержащий

background-image:




изображение, используемое в качестве

url(fill.gif)




фона элемента









Таблица 21.2. (продолжение)

Свойство стиля

Описание

Пример

border-color

Цвет рамки вокруг элемента. Если задать одно значение, все четыре стороны будут одного цвета. Указав четыре значения, можно определить цвета верхней, правой, нижней и левой сторон рамки соответственно

border-color: black

border-width

Толщина линии рамки вокруг элемента: thin (тонкая), medium (средняя) и thick (толстая). Если задать одно значение, все четыре стороны будут иметь одинаковую толщину. Указав четыре значения, можно определить толщину верхней, правой, нижней и левой сторон рамки соответственно

border-width: medium

color

Цвет элемента

color: white

font

Характеристики шрифта, включая любые значения свойств font-family, font-size, font-style, font-variant и font-weight

font: bold large

font-family

Конкретный шрифт или тип шрифта (то есть serif, sans-serif, cursive или monospace). Можно задать несколько значений, разделенных запятыми, чтобы браузер использовал тот шрифт, который имеется в наличии

font-family: Verdana, Arial, sans-serif

font-size

Заданный размер шрифта: small (мелкий), medium (средний), large (крупный) и т. п., или значение, задаваемое относительно нормального размера: smaller (меньше), larger (больше) и т. п.

font-size: large

font-style

Начертание, как правило, normal (обычный) или italic (курсив)

font-style: normal

font-variant

Текст выводится либо строчными буквами (normal), либо маленькими прописными (small-caps)

font-variant: small-caps

font-weight

Толщина текста, как правило, normal (нормальный), bold (полужирный), bolder (жирный) или lighter (осветленный)

font-weight: bold

margin-bottom

Размер свободного пространства под элементом, выраженный в единицах em

margin-bottom: 2em

margin-left

Размер свободного пространства слева от элемента, выраженный в единицах em

margin-left: 1em

margin-right

Размер свободного пространства справа от элемента, выраженный в единицах em

margin-right: Oem

margin-top

Размер свободного пространства над элементом, выраженный в единицах em

margin-top: 3em

text-alignment

Горизонтальное выравнивание текста: left (по левому краю), right (по правому краю), center (по центру) или justify (по ширине)

text-alignment: center








Свойство стиля

Описание

Пример

text-decoration

Различные виды выделения текста, включая underline (подчеркивание), overline (надчеркивание), line-through (зачеркивание), blink (мерцание), попе (отсутствие)

text-decoration: underline

text-indent

Отступ первой строки

em

Переопределение стилей HTML с использованием классов

В предыдущем разделе рассказывалось, как изменять стили стандартных HTML- элементов документа, таких как абзацы и заголовки. А можно ли создать собст­венный стиль? Скажем, на сайте детской поэзии для названий стихотворений должен применяться один стиль, а для их текста — другой.

С помощью CSS невозможно создавать новые элементы HTML, но они позволя­ют делать нечто подобное — создавать классы. Класс является подмножеством существующих элементов HTML. Например, можно создать класс POEMTITLE как подмножество HTML-элементов, представляющих абзацы (Р). Его объявление с описанием параметров форматирования

p.poemtitle { font-size: large: color: blue }

должно храниться в таблице стилей. С использованием этого класса текст на веб­странице может быть отформатирован, например, так: CLASS=poemtitle>CHe«HbiM вечером в лесу

Кроме того, можно создавать классы, с помощью которых будут форматировать­ся любые элементы. Для этого в их объявлении нужно опустить имя элемента:

.poemtitle { font-size: large: color: blue }

Данный класс может использоваться так:

<Р CLASS=poemtitle>CHeiHbiM вечером в лесу

или так:


1   ...   23   24   25   26   27   28   29   30   ...   35


База даних захищена авторським правом ©lecture.in.ua 2016
звернутися до адміністрації

    Головна сторінка