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



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

е>Снежным вечером в лесу

Определение стилей посредством идентификаторов

Стиль, определенный в виде класса, применяется для форматирования любого количества элементов страницы. Если же стиль на странице используется не бо­лее одного раза, его можно определить с помощью идентификатора. Идентифика­тор всегда начинается с символа «#»: #logo { font-size: xx-large: color: green: text-alignment: right }

и может быть применен к любому расположенному на странице объекту, напри­мер к тексту:



<Р Ю=1одо>Книги России

Создание текстовых стилей вручную

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

Создание внедренной таблицы стилей

Если веб-страница создается вручную (а не с помощью веб-редактора), для вклю­чения в нее таблицы стилей в HTML-код нужно добавить элемент STYLE. Он со­стоит из тегов и текста между ними и помещается в заголовок страницы (между тегами и ). Следующий пример показывает, как определить стиль стандартного HTML-элемента ИЗ и класс с именем SIDEBAR:

)

Элемент STYLE состоит из четырех частей.



  • Тег завершает элемент STYLE.

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

Определяемые дизайнером стили (в приведенном выше примере это класс SIDEBAR и стандартный стиль НЗ) автоматически применяются ко всем элементам, обозна­ченным заданными тегами. Так, все заголовки, форматируемые с помощью тега <НЗ>, будут выводиться шрифтом Desdemona зеленого цвета или Courier, если на компьютере нет первого шрифта. Для того чтобы указать, к какому классу отно­сится конкретный тег, нужно воспользоваться атрибутом CLASS: CLASS=sidebar>TexHM4ecKafl записка

В данном случае класс применяется к тегу абзаца <Р>. Но вообще его можно при­менять к любым тегам соответствующего типа (например, текстовый стиль — к текстовому тегу, как в данном случае). Для применения класса к фрагменту текста воспользуйтесь тегом :

Это обычный текст, a 3T0T текст выводится стилем Si debar.

Создание внешней таблицы стилей

Внешняя таблица стилей — это текстовый файл, содержащий только определе­ния стиля. Он имеет расширение ess (например, mystyles.css). Внешние таблицы стилей обычно хранятся в том же каталоге, что и веб-страницы, или же, если ис­пользуется несколько таблиц стилей, — в отдельном каталоге. В раздел ка­ждой веб-страницы, где используются стили из внешней таблицы, нужно вклю­чить тег :



Замените mystyles.css именем файла своей таблицы стилей. Атрибуты REL и TYPE должны иметь те же значения, что и в приведенной строке — они указывают на использование таблицы стилей CSS. (В будущем, возможно, появятся таблицы стилей других типов.)

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

Использование различных таблиц стилей в разных браузерах

Разные браузеры, например Internet Explorer и Netscape Navigator, не все­гда одинаково отображают веб-страницы. В частности, одним и тем же значениям свойства font-size они ставят в соответствие разные размеры шрифта. Для того чтобы страницы выглядели в этих браузерах примерно одинаково, для них следует создать две внешние таблицы стилей. Выбор нужной таблицы будет осуществляться посредством программы, напи­санной на языке JavaScript.

Поместите в раздел каждой веб-страницы (между тегами и ) такой сценарий:



Этот сценарий JavaScript определяет, в каком из двух браузеров выводит­ся страница, и связывает ее с одной из двух внешних таблиц стилей: mystyle-ns.css (для Netscape Navigator) или mystyle-ie.css (для Internet Explorer). Для его применения необходимо имена таблиц стилей заменить именами собственных таблиц стилей.

ПРИМЕЧАНИЕ

Локально определенные стили всегда имеют преимущество перед внешними стилями. Если стиль текстового элемента не определяет, скажем, полужирного начертания, его можно применить локально, с помощью тега <В>.

Использование стилей для форматирования текста

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

Чтобы определить стиль форматирования текста, нужно тег, содержащий форма­тируемый текст, дополнить атрибутом stylе="свойства". Например, если абзац должен быть выведен крупным шрифтом Arial синего цвета, его можно отформа­тировать так:

<Р > Важное примечание

Тег используется для форматирования текста внутри абзаца:



<Р>Многие считают поэзию загадочной и вдохновляющей.

Создание текстовых стилей с помощью веб-редакторов

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

Microsoft FrontPage

Приложение FrontPage предоставляет в распоряжение веб-дизайнера ряд встро­енных таблиц стилей, и все они доступны в диалоговом окне Темы. Разработчик может применить эти стили без изменений, переопределить их, а может создать собственные. Изменить таблицу стилей очень просто. Для этого нужно открыть ее в окне редактора FrontPage, щелкнуть на кнопке Стиль одноименной панели инструментов либо выбрать из меню команду Формат ► Стиль, а когда откроется диалоговое окно Стиль (рис. 21.8) —задать новые параметры.

Стили CSS можно использовать для форматирования отдельных фрагментов тек­ста, всей страницы либо всего сайта. Для того чтобы стиль был применен к вы­бранному тексту, нужно задать команду Формат ► Стиль. Если вид созданных веб­страниц вас не устроит, отредактируйте стили в таблице или выберите другую таблицу стилей.




Стили:

a:active

л

a: link

Щ

a: visited




а




address




body button




fieldset




hi




h2




h3




h4




h5




h6




hr

html





Список:


АаБбЮюЯя


Описание


Абзац

Знаки
Выберите "Изменить", чтобы создать стиль для выбранного тега HTML, Выберите "Создать"; чтобы создать новый пользовательский стиль,








Z.
Теги HTML






Изменить.

Удалить
Создать...





Отмена

Рис. 21.8. Диалоговое окно Стиль редактора FrontPage


ОК


Macromedia Dreamweaver

Откройте окно CSS Styles с помощью команды Window Styles (или клавиш Shift+Fl), щелкните на вкладке CSS Styles, и вы увидите список стилей, заданных для теку­щей веб-страницы (рис. 21.9).






т Design




II CSS Styles [HTML Styles Behaviors

(J) Apply Styles Q Edit Styles

оУ HblueTeilt

ш

of HblueTemBold

of Hbtn




оУ HgraySmall




of HgrayTeKtSmall




of Hinp




of HwhiteTemBold




of linkBlue




of HnkBlueBig




linkBlueSmall




оУ linkWhite




of teKtBase




teKtBlue




оУ temBlueBig




of teKtGray

v

«a g



Рис. 21.9. Вкладка CSS Style
Для присоединения внешней таблицы стилей к файлу веб-страницы щелкните на вкладке CSS Styles правой кнопкой мыши и выберите в открывшемся меню коман­ду Attach Style Sheet Для того чтобы присвоить стиль некоторому тексту страни­цы, щелкните на форматируемом абзаце и выберите нужный стиль.

Dreamweaver позволяет редактировать отдельные элементы таблицы стилей. Дела­ется это следующим образом. Щелкните правой кнопкой мыши на вкладке CSS Styles, выберите в контекстном меню команду Edit Style Sheet, в открывшемся одно­именном окне Edit Style Sheet сначала щелкните на имени таблицы стилей, а затем на кнопке Edit. На экране отобразится окно со списком стилей интересующей вас таблицы. Выберите нужный стиль, щелкните на кнопке Edit и измените его пара­метры в появившемся диалоговом окне.

Adobe GoLive 6.0

Для создания внешней таблицы стилей в этом приложении щелкните правой кнопкой мыши на вкладке Files в окне сайта и выберите команду New Cascading Style Sheet.


Font Family

Unchanged v Unchanged v

!© ©

и МВЙЖІ

gd A.tree2 ГГ1 A.tree2:visited gd A.tree2:hover


ш

.textBase

gd

■ textBlue

cd

.textBlueBic

gd

.textCray

gd

.textWhite

gd

■ text.Red




Decoration I I None I I Underline

  • Strike

I I Overline

  • Blink

Color Size

Line Height

Style

Weight


Inspector \ view

f F В □ * □ Ш *

Source

-{COLOR: #ff0000} A

{ FONT-SIZE: 70%; COLOR: #999999; FONT-FAMILY: / { COLOR: #999999 } { COLOR: #ff0000 }

i FONT-SIZE: 80%; COLOR: #000000; FONT-FAMILY: > \ FONT-SIZE: 80%; COLOR: #3366cc; FONT-FAMILY: f \ FONT-WEIGHT: bold; FONT-SIZE: 100%; COLOR: #3: { FONT-SIZE: 80%; COLOR: #808080; FONT-FAMILY: I i FONT-SIZE: 80%; COLOR: #ffffff; FONT-FAMILY: Ari. i FONT-SIZE: 80%; COLOR: #ff0000; FONT-FAMILY: A v

HE

Name

®

| CS5 Definitions OS Source OS \




Рис. 21.10. Определение стиля в окне приложения GoLive

s II в I
Чтобы создать таблицу стилей, встроенную в веб-страницу, щелкните на кнопке Open CSS Editor в правом верхнем углу окна страницы и откройте окно редактора таблицы стилей. Затем щелкните на од ной из кнопок — New Element Style, New Class Style или New ID Style, расположенных в нижней части диалогового окна, и введите имя, которое вы хотите присвоить новому стилю. Параметры стиля задайте в окне Inspector, показанном на рис. 21.10.


С- Adobe GoLive




0@®l

File Edit lype Special Site Diagram View Window Help

jj None Ш ~ S В I T [None v 11 lis KE=

a rfa if

a- ■*■!!!**.


Связать проектируемую веб-страницу с внешней таблицей стилей можно не­сколькими способами. Если страница открыта, перетащите файл таблицы стилей на значок страницы. Но если страница закрыта или с внешней таблицей стилей нужно связать сразу несколько страниц, отметьте их имена на вкладке Files, от­кройте панель CSS (с помощью команды Window CSS), выделите имя таблицы стилей и щелкните на кнопке Add.

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

Позиционирование объектов на веб-страницах

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

Для позиционирования объекта на веб-странице необходимо при определении стиля присвоить его свойству position значение absolute и задать расстояние от объекта до границ страницы в дюймах (i п) или сантиметрах (cm). Вот как, напри­мер, при объявлении стиля определяется абсолютная позиция объекта:

ItextA { position: absolute: left: 4cm; top: 2cm; width: 3cm; height: 3cm }

Имя данного стиля может быть указано либо в теге

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


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

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