Разработка клиентских приложений Web-сайтов

Работа с каскадными таблицами стилей

Урок мы начнем с разбора различных способов добавления каскадных таблиц стилей к документу. Одним из таких способов является внедрение - запись правил непосредственно в (X)HTML-коде внутри контейнера

"Ад и рай - в небесах", - утверждают ханжи.

Я, в себя заглянув, убедился во лжи:

Ад и рай - не круги во дворе мирозданья,

Ад и рай - это две половины души.

/Омар Хайам/

Результат:

Рис. 5.2.

Рассмотрим связывание CSS с помощью ссылки.

Пример. 3. Связывание каскадной таблицы стилей с web-страницей с помощью ссылки

Создайте новую таблицу стилей со следующим содержимым:

body { background-color: Transparent}

h3 { font-family: Calibri; font-size:16pt; color: Navy}

h4{font-family: Courier New CYR; font-size:14pt; color: Orange}

Далее, создайте новый HTML-документ и введите в него следующий код ():

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       

"Надо жить, - нам внушают, - в постах и в труде!"

"Как живете вы - так и воскреснете-де!"

Я с подругой и чашей вина неразлучен,

Чтобы так и проснуться на страшном суде.

/Омар Хайам/

Результат:

Рис. 5.3.

Стиль можно встраивать непосредственно в HTML-тэг с помощью атрибута style. Продемонстрируем такую возможность в следующем примере.

Пример 4. Встраивание стиля непосредственно в HTML-тэг

Создайте новый HTML-документ. В контейнер вставьте следующий код ():

Онегин, добрый мой приятель,

Родился на брегах Невы.

Где может родились и вы,

Или блистали, мой читатель.

/А.С. Пушкин/

Результат:

Рис. 5.4.

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

Пример 5. Применение общих правил оформления к разным тэгам

Создайте новую HTML-страницу со следующим кодом ():

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   

Над кем глумятся, тот уж не смеется,

Кто платит подать, тот и разорен,

Кто жертвует - с рубашкой расстается,

Ссудил на грош, потребует мильон.

Кто слово дал, держись: оно - закон,

Кто ходит в церковь, тот и к Богу вхож,

Подует ветер - меркнет небосклон,

Но Рождество наступит, если ждешь.

/Франсуа Вийон/

Результат:

Рис. 5.5.

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

Пример 6. Применение правила форматирования по атрибуту id

Создайте новый HTML-документ и введите в него следующий код ():

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   

Без труда не выловишь и рыбку из пруда

Что посеешь, то и пожнешь

Результат:

Рис. 5.6.

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

Пример 7. Использование классов в CSS

Создайте новый HTML-документ и введите в него следующий код ():

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   

ВИЙ?Н (Villon) Франсуа (наст. имя и фамилия Франсуа де Монкорбье, Montcorbier)

(1431, Париж - после 1463), выдающийся французский поэт позднего Средневековья.

О Франсуа Вийоне известно очень немного. Его отец умер, когда он был ребенком,

и мальчика усыновил родственник Гийом де Вийон, капеллан церкви Святого Бенедикта.

Результат:

Рис. 5.7.

Краткие итоги

Каскадные таблицы стилей делают возможным разделение кода и представления. Это облегчает объединение усилий кодировщиков и дизайнеров в рамках одного проекта. Дизайнеры формируют концепцию внешнего оформления сайта и сохраняют ее в виде каскадных таблиц стилей, или CSS. CSS можно связывать с документом несколькими способами: непосредственно размещая правила форматирования в (X)HTML-коде, с помощью директив импорта и ссылок на внешние файлы с расширением .css, или применяя правила внутри тэгов. Одни и те же правила оформления можно применять к разным тэгам, возможно и обратное - применение разных правил к одному тэгу.

Набор для практики

Вопросы:

1. Какими способами можно связывать web-страницы с каскадными таблицами стилей?
2. Что такое атрибут id?
3. Что такое класс?

Упражнения:

1. Создайте небольшой сайт туристического агентства. Разработайте фирменный стиль заголовка и подвала (нижней части) web-страницы и сохраните его во внешнем файле с расширением .css. Примените стиль на всех страницах сайта с помощью директивы импорта.
2. Создайте небольшой сайт, посвященный охране диких животных. Разработайте для него CSS, форматирующую фон, заголовки и абзацы. Используйте в работе атрибуты id и классы.