Для указания размера шрифта в пунктах к численному значению размера в свойстве font-siz e необходимо добавить буквы pt, как показано в следующем примере:



р {font-size:12pt}

b {font-size:18pt}

После считывания правил списка стилей из этого примера Web-браузер выве-

ден на экран текст абзаца размером 12 пунктов, а полужирный текст — размером

18 пунктов.

Часто Web-дизайнеры устанавливают размеры шрифтов в пикселях, поскольку они чаще работают не с бумагой, а с экраном компьютера. На экранах компью — теров положение объектов и их размеры, как правило, задаются в пикселях, по — этому не удивительно, что Web-дизайнеры для задания размеров шрифтов ис- пользуют пиксели. Единственным преимуществом пикселей по сравнению с пунктами является то, что независимо от разрешения монитора компьютера шрифт одного и того же размера будет выводиться одинаково; это справедливо даже для различных аппаратных и программных платформ. Более того, выраже — ние размеров графических изображений и шрифтов в пикселях позволяет легко

сохранять взаимный размер теста и изображений на всех страницах Web-сайта.

Для указания размера шрифта в пикселях к численному значению размера в свойстве font-siz e необходимо добавить буквы рх, как показано в следующем примере:



body, p {font-size:10рх}



Обратите внимание, что, как правило, размер читабельного текста должен со — ставлять не менее 9 пикселей.

Глава 4. Каскадные списки стилей 19 1





Еще один метод установки размера шрифта — выражение его по отношению

к размеру родительского элемента в пунктах. Отношения типа родительский эле — мент/дочерний элемент устанавливаются путем включения одного Web-элемента

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



Весь текст, заключенный между набором начального и конечного

дескрипторов параграфа, является частью элемента параграфа.

3TOT элемент цитаты представляет собой дочерний элемент

по отношению к тому элементу параграфа, в рамках начального и

конечного дескрипторов которого он размещенv

Когда мы используем один HTML-элемент внутри другого, внутренний

элемент является дочерним, а внешний — родительским.

Параметр em позволяет устанавливать размер Web-элемента в отношении раз — мера его родительского элемента в пунктах. Параметр em представляет собой ши —

рину буквы «М» текущего шрифта. Поэтому, если в списке стилей установлены следующие правила, размер текста цитаты, расположенного внутри текста абзаца, будет в 1.5 раза больше, чем размер текста абзаца:

cite {font-size:1.5em}

р {font-size:12pt}

Если применить эти правила для кода приведенного выше примера, Web-бра — узер выведет на экран текст абзаца (родительский элемент) размером 12 пунктов,

а текст цитаты выстой 18 пунктов, т. е. в 1.5 раза больше, чем размер родительс — кого элемента.

На рис. 4.7 показан пример использования следующего списка стилей для

форматирования четырех текстовых элементов (абзац, полужирный текст, эле — мент списка и цитата):



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

Em и пикселей



р {font-family:helvetica,»times new roman»,courier;

font-size:12pt}

b {font-size:18pt}

cite {font-size:1.5em}

li {font-size:30px}





192 Глава 4. Каскадные списки стилей







Создание перекрывающегося текста

С помощью каскадных списков стилей на Web-страницу можно внести некую

«изюминку», отформатировав и расположив гиперссылки так, как показано на рис. 4.8. (Несмотря на отсутствие обычного подчеркивания, все элементы на Web-странице представляют собой гиперссылки.)





Глава 4. Каскадные списки стилей 19 3





Операторы позиционирования каскадных списков стилей позволяют создавать эффекты наложения элементов Web-страницы (например, текста, изображений и

ДРУГИХ Объектов). ГиперССЫЛКа «Что нового появилось в каскадных списках

стилей?» находится «за» четырьмя остальными гиперссылками, поскольку прави —

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

указателя мыши и гиперссылки при ее выделении.)

Свойство positio n каскадных списков стилей указывает Web-браузеру место расположения элемента на Web-странйце. Значение absolute позволяет распола — гать объекты по отношению к левому верхнему углу страницы, в то время как значение relativ e дает возможность указывать положение относительно места, в котором данный объект находился бы без задания свойства position . Например, если в HTML-коде Web-странице содержится два дескриптора , один после другого, Web-браузер выведет на экран второе изображение справа от первого. С помощью позиционирования relativ e между двумя изображениями можно вста — вить поле:





style=»position:relative: left:20px» src=»image2.jpg»>

Правило каскадного списка стилей во втором дескрипторе указывает

браузеру сдвинуть элемент (image2. jpg) на 20 пикселей вправо от его нормаль — ного положения.



«П А ISYIJI/Wft Я



Для наложения элементов на Web-странице используется абсолютное (absolute) позиционирование. Один элемент можно поместить поверх другого и за счет указания отрицательного относительного (relative ) положения. Тем не менее, применение абсолютного позиционирования элементов на странице позволяет достичь того же результата более простыми средствами. Например, следующие правила списка стилей при применении их к элементам Web-страницы указыва — ют Web-браузеру поместить объект на расстоянии 50 пикселей от верхнего края

страницы и на расстоянии 10 пикселей от левого края страницы:



.linkl {position:absolute; top:50px; left:10px}



В приведенном правиле можно использовать любые единицы измерения рас- стояний, допустимые для списков стилей: пункты (pt), дюймы (in), сантиметры (cm) и т. д. Например, для задания положения текстового элемента с использова — нием единицы измерения расстояния, соответствующем размере шрифта, приме — няется единица em:

194 Глава 4. Каскадные списки стилей





.Iink2 {color:#400040;

font-size:50px; font-style:italix;

font-family:Georgia, serif;

position:absolute; top:2.5€»m; left:2em}

В приведенном примере указание абсолютного положения top:’2.5em и

ieft:2em заставляет Web-браузер поместить элемент на расстоянии 125 пикселей

от верхнего края страницы и 100 пикселей от левой границы страницы (посколь-

ку в этом случае значение единицы em составляет 50 пикселей, как указано в

СВОЙСТВе font-size) .

После написания правил позиционирования объектов необходимо указать Web-браузеру применять эти правила для определенных элементов на Web-стра — нице. Для позиционирования двух гиперссылок с помощью классов каскадных

списков стилей, определенных в предыдущих примерах (link i и iink2), вставьте

на Web-страницу следующий код:





href=MFigure04-01b. htm»>4To нового в области ^ В

каскадных списков стилей?

рХа class=»link2″

href=»FigureO4-01c. htm»>H3учение CSS…





Атрибут clas s указывает Web-браузеру, какие правила каскадного списка сти — лей применять к элементу (в приведенном примере к гиперссылке).

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

в абзац или разделение их дескрипторами разрыва строки (

) не требуется. Тем не менее, следует помнить, что если Web-браузер не поддерживает каскад —

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



Выравнивание текста на Web-странице

Такие текстовые процессоры, как MS Word или WordPerfect, предоставляют четыре варианта выравнивания текста абзаца. Как показано на рис. 4.9, текст можно выровнять по левому полу, по правому полю, по центру или по ширине (т. е. одновременно по левому и по правому полю).

:





196 Глава 4. Каскадные списки стилей





Аналогично, для выравнивания по левому краю отдельных абзацев укажите свойство text-alig n в дескрипторе абзаца :







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





Текст параграфа 1 будет выровнен влево и вправо

Текст параграфа 2 будет выровнен влево и вправо

Текст параграфа 3 будет выровнен влево и вправо

Текст параграфа 4 будет выровнен влево и вправо

TeKCT параграфа 1 будет выровнен влево

Текст параграфа 2 будет выровнен влево и вправо

Текст параграфа 3 будет выровнен вправо

Р>

Текст параграфа 4 будет выровнен влево и вправо

между четырьмя Свойствами ПОЛеЙ: margin-left, margin-right, margin-top И

margin-bottom. В имени каждого свойства присутствует название края элемента,

возле которого будет создаваться поле. Например, для создания поля шириной

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



body {margin-left:40px; margin-right:4Орх}



Для управления шириной левого и правого полей между абзацами текста и краями Web-страницы заключите абзацы в начальный и конечный дескрипторы раздела (), а затем, как показано ниже, примените правило каскад — ного списка стилей к дескрипторам :





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

198 Глава 4. Каскадные списки стилей





каскадного списка стилей в дескрипторе заставляет браузер оставить меж —

ду текстом абзаца и левым и правым краем Web-страницы поле шириной 10%

ширины окна браузера.

Для управления полями над и под элементом используются свойства margin — top и margin-bottom соответственно. Например, если между абзацами необходи —

мо вставить поле шириной в две строки, можно следующим образом определить селектор абзаца (р):



р {margin-bottom:2em}



Для вставки между абзацами поля шириной в 1.5 ширины нормального поля между абзацами измените стиль дескриптора абзаца, не прибегая к заданию правила списка стилей для селектора абзаца (р). Например, для вставки между текущим абзацем и следующим дополнительного пустого поля шириной в пол — строки можно воспользоваться следующим правилом:

Это первая строка абзаца 1

Это вторая строка абзаца 1. .

Это первая строка абзаца 2



Это вторая строка абзаца 2.

, Объектов, НаХОДЯЩИХСЯ Между ДеСКрИПТОрамИ , И Т. Д.

А, например, для создания границы вокруг заголовка уровня 1 необходимо напи — сать правило списка стилей следующего вида:



hi {border:solid Зрх black}



Первое значение свойства border, «solid» , задает стиль линии границы, второй, «Зрх», устанавливает ширину границы равной 3 пикселя, а третий, «black», устанавливает черный цвет границы. При написании правила списка

стилей, которое устанавливает значения свойства border, Web-браузер применяет одни и те же значения для всех четырех сторон границы.

20 2 Глава 4. Каскадные списки стилей





Для независимой работы с каждой страной границы необходимо задавать зна —

чения СВОЙСТВ border-style, border-width И border-color ОТДеЛЬНО ДЛЯ каж-

дой стороны. Например, «сокращенное» правило списка стилей из предыдущего

примера можно переписать в следующем развёрнутом виде:





К счастью, синтаксис каскадных списков стилей позволяет сочетать явную

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





Аналогично, для создания двойной границы синего цвета шириной 0.5 дюй — ма можно написать следующее правило:



Обратите внимание, что в предыдущих примерах значения свойства border —

color можно задавать в виде шестнадцатеричных триплетов, а значение свойства border-width — в любых единицах, допустимых в каскадных списках стилей (дюймы, сантиметры, пункты, пиксели и т. д.).

На рис. 4.13′ показана граница светло-зеленого цвета каждого из девяти воз —

можных стилей вокруг заголовков уровня 1. (Значение «попе» свойства border- styl e указывает Web-браузеру на необходимость игнорирования свойства грани- цы, поэтому она не рисуется.)

Следует иметь в виду, что чтобы увидеть эффект стиля границы, ее ширину (т. е. значение свойства border-width) необходимо установить равной, по край — ней мере, три пикселя. Например, при выборе стиля «double» Web-браузеру для рисования границы необходимо по одному пикселю для линий и один пиксель

на промежуток между ними.

Глава 4. Каскадные списки стилей 20 3





Создание абзацного отступа и работа с интервалами между буквами, словами и строками

Помимо средств позиционирования объектов, с появлением каскадных спис — ков стилей дизайнеры получили столь долгожданный четкий типографический контроль над текстом Web-страницы. Таблицы и прозрачные (разделительные) изображения в формате GIF и ранее давали определенные средства для позицио —

нирования элементов на экране. Тем не менее, они не позволяли легко управ —

лять интервалами между словами и строками текста и не давали возможности

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



ПРАКТИКУМ

Например, для создания абзацного отступа для каждого абзаца теста на странице

необходимо создать правило следующего вщщ:



р {text-indent:2em}



Несмотря на то что в приведенном правиле можно использовать любые еди —

ницы измерения, доступные для каскадных списков стилей (пункты, пиксели, дюймы, сантиметры и т. д.), вы обнаружите, что для указания величины абзацно —

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

шении или увеличении размера шрифта. Помните, что размер lem равен теку — щему размеру шрифта в пунктах. Таким образом, при изменении размера шриф —

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

В одной из прошлых заметок мы подобрали перечень из 10 веб-сайтов, где можно найти уроки и учебники по photoshop’у. А прибавив еще 12 ресурсов из нынешнего обзора, мы получим прекрасный перечень web-сайтов с туториалами.

Ну а дабы не запутаться в новинках и быть и оставаться в курсе заключительных уроков, можно подписаться на rss данных страниц, создав отрельный раздел, к примеру, в Google Reader, куда «положить» все ленты. И когда потребуется новый хороший урок или же учебник, зайти и выяснить, что появилось нового и занимательного.

PsdVibe

HV-Designs Прочитать остальную часть записи »