.

Управление с помощью CSS

Технология CSS (каскадные таблицы стилей) позволяет установить целый набор ваших собственных стилей шрифта, которые будут использоваться на всем Web-сайте. Например, представьте, что вы разрабатываете поистине огромный Web-сайт и хотите убедиться в том, что оформление шрифта на всем сайте будет однотипным. Все заголовки должны быть отформатированы жирным шрифтом Arial Narrow, размером 18 пунктов темно-красного цвета (в CSS вы можете указать в пунктах реальный размер шрифта!). Все подзаголовки должны быть выполнены курсивом Verdana, 10 пунктов синего цвета со стальным оттенком. Обратите внимание на то, что важно задать стандартный шрифт для браузера (см. рис. 8.18). Основным достоинством технологии CSS является экономия вашего времени за счет того, что вы можете быстро применить однотипные настройки ко всем текстовым элементам Web-сайта. Существуют две разновидности CSS: встроенные и внешние таблицы стилей.

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

Для внешних таблиц стилей вы задаете набор текстовых стилей в CSS-файле, например mystyles. css. Каждый стиль в этом файле может называться Headline, Caption и т.д. Для каждого стиля вы определяете шрифт, цвет и размер. Затем каждая Web-страница вашего сайта ссылается на этот mystyles. css файл для извлечения информации о шрифте. Элементы текста каждой Web-страницы ссылаются на один из CSS-стилей, заданных в CSS- файле. Таким образом, если вам когда-либо понадобится произвести глобальные изменения шрифта: например, изменить стиль заголовка с темно-красного на синий, вы внесете эти изменения лишь единожды в CSS-файле. После таких изменений все текстовые элементы Web- сайта, которые используют стиль Headline, будут обновлены автоматически.

Встроенные таблицы стилей

Встроенные таблицы стилей позволяют определить стили для использования в ДRQ Л пределах одной Web-страницы, а не всего сайта. Встроенные таблицы стилей имеют больший приоритет по сравнению с внешними, так как они размещаются в теге <head> и замещают все настройки внешних таблиц CSS. Информация о стиле и о его наименовании расположена в начале тега <head> в HTML-коде, как представлено на примере ниже.

<style type="text/css">

.headline { font-family: "Arial Narrow Bold"; font-size:

18pt; color: #990033}

.caption { font-family: Verdana, Arial, Helvetica,

sans-serif; font-size: lOpt; font-style: italic; color: #333366}

</style>

Из вышеприведенного кода видно, что стиль <heading> используется для обозначения шрифта Arial Narrow размером 18 пунктов с полужирным начертанием. Цифры в определении цвета — это шестнадцатеричный код, который обозначает темно-красный цвет. Добавляя новые заголовки на свою Web-страницу, вы можете быстро их отформатировать, применив стиль <heading>, который вы задаете для страницы.

<span class="headline">Заголовки влияют на форматс/эрап:»

Таблицы CSS очень удобны, так как позволяют легко обновить внешний вид страницы. Например, представьте, что ваши заказчики изменили свою торговую марку и теперь хотят поменять весь набор шрифтов и цветов на сайте. “Черт возьми, — псдзмаете вы. — Это ведь потребует много часов утомительного труда: выделять и обновлять каждый текстовый элемент на странице.” Однако, если вы использовали CSS, вам просто нужно переопределить стили в теге Head — и вся страница обновится автоматически!



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×