статьи веб дизайн разработка сайтов [advansed search]  [карта сайта]

разработка


графика


продвижение и PR


будни разработки


обзоры




Введение в CSS (Каскадные Таблицы Стилей)

Перед Вами введение в Каскадные Таблицы Стилей (Cascading Style Sheets, CSS). Для лучшего восприятия материала советуем запустить браузер с поддержкой CSS (Microsoft Internet Explorer 4.0 или Netscape Navigator 4.0 или более поздние). Конечно, можно читать и без браузера под рукой, но в этом случае вы не сможете увидеть примеры в работе.

Разделение структуры и представления

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

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

Соответственно задача web-мастеров - научиться управлять представлением этих документов таким образом, чтобы они выглядели чудесно и понятно как пользователям, так и машинам.

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

  1. Документы, которые вы создали, исполнялись определенным способом, в котором каждый используемый элемент передавал определенный визуальный стиль для содержания.
  2. Документы выглядят уродливо. Чрезмерная простота html-страниц скорее всего приведет к тому, что большая часть ваших посетителей в лучшем случае через пять минут уйдет с вашего сайта на более эффектно выполненные ресурсы.

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

<P>Это <EM>НЕ</EM> то, чего я ожидал</p>
Это НЕ то, чего я ожидал

Типичное представление курсивом (в данном случае слово "НЕ"). Другие элементы, как мы видим, имеют другие заданные по умолчанию предоставления. Более интересный сценарий:

<P>Это напомнило мне слова из песни Павла Кашина:</P>
<BLOCKQUOTE>Ты не достроил на песке безумно дивный чудный город;<BR>
Я спешил к тебе, но он, увы, тебе уже не был дорог.</BLOCKQUOTE>
Это напомнило мне слова из песни Павла Кашина:
Ты не достроил на песке безумно дивный чудный город;
Я спешил к тебе, но он, увы, тебе уже не был дорог.

Элемент BLOCKQUOTE обычно представляется как выровненный текстовый блок. Это - общепринятый способ указать, что в тексте используется цитата. Используется здесь еще один элемент - BR. Этот элемент употребляется для вставки перевода строки и продолжения текста с новой строки.

ИмяBR
ПрименениеСоздает скрытый перевод строки
Contextэто встроенный элемент
Contentsэто пустой элемент
Откр. тегнеобходимый
Закр. тегзапрещен (forbidden)
Атрибуты идентификатора
Атрибуты заголовка
Атрибуты стиля
CLEAR | LEFT, RIGHT or ALL | Object Clearance

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

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

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

Конечно же, использовать Каскадные Таблицы Стилей.

Атрибут Стилей и CSS Декларации

Рассмотрим пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE>Библиотека Сайтостроительства</TITLE>
</HEAD>
<BODY>
<H1> Библиотека ресурсов интернет индустрии - I2R</H1>

<P> Казалось бы, что такое сайт? Картинки, тексты, чаты, доски объявлений - и все. Однако, в любом ремесле есть свои тонкости и секреты.</P>

<P> Если вы заинтересовались этой темой - включайтесь в нашу рассылку.</P>

</BODY>
</HTML>

Здесь присутствуют заголовок и два параграфа. Посмотрите, как выглядит эта страница в браузере. Если вы используете Netscape Navigator, Internet Explorer или любой подобный браузер, вы получите на экране однотонный фон, вероятно серый или белый и черный текст, Times или Garamond. Заголовок - скорее всего огромными, полужирными буквами. Большого разнообразия в таком документе вы не увидите.

Теперь попробуем кое-что изменить:

<H1 STYLE="text-align: center; color: red; font: bold italic 150% sans-serif">Библиотека ресурсов интернет индустрии - I2R.</H1>

Прежде чем вы посмотрите в браузере, как изменился ваш документ, давайте объясним, что мы с этим документом делаем.

Вы только что впервые использовали атрибут STYLE (поздравляем!). Атрибут STYLE немного отличается от других атрибутов; это может использоваться на фактически каждом элементе, который может быть предоставлен - элемент BODY и все, что содержится в этом элементе. Как вы могли бы предположить, атрибут Style определяет привилегированный стиль предоставления элемента для визуализации.

Понять значения атрибута STYLE в данном случае легко. Наш пример можно разбить на три части:

  1. text-align: center
  2. color: red
  3. font: bold italic 150% sans-serif

Каждый из них состоит из слова, двоеточие (:) и дополнительных сведений. Эти три части самостоятельны и отделены точками с запятой.

Эти три вещи называются CSS декларациями. Они представляют собой основу CSS синтаксиса. Часть перед двоеточием называется параметром CSS. CSS параметры подобны атрибутам тегов HTML. Каждый параметр, типа " text-align" (выравнивание текста), принимает определенный тип значений. Эти значения ставятся после двоеточия в каждой декларации. В нашем конкретном примере вы сообщаете компьютеру, что он должен отобразить заголовок первого уровня, показывая при этом содержащийся в заголовке текст красным цветом, жирным курсивом, шрифтом sans-serif и размером 150% от используемого в браузере по умолчанию.

Что вы в результате получите? Это зависит, главным образом, от вашего браузера. Приведенный пример относительно безопасен. Если вы используете браузер, который поддерживает Каскадные таблицы стилей, вы действительно получите на экране все те свойства, которые описали. Возникают проблемы тогда, когда ваш браузер не поддерживает или же поддерживает не полностью CSS.

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

Небольшое отступление: Как бы выглядел наш код, если бы мы использовали для форматирования заголовка не CSS, а привычные html-теги? Рассмотрим на примере:

<H1><EM> Библиотека ресурсов интернет индустрии - I2R.<EM></H1>

Библиотека ресурсов интернет индустрии - I2R.

Однако возможна ситуация, когда парсер какого-нибудь малоизвестного браузера интерпретирует тег EM как жирный зеленый текст, и в этом случае вы получили бы обалденный зеленый заголовок. Это не удовлетворило бы наши потребности в управлении представлением. Это разрушило бы логическую структуру документа. И, наконец, это ввело бы в заблуждение ваших потенциальных посетителей, которые, возможно, были готовы увидеть хоть и стандартный, но привычный черный заголовок, а вместо этого получиkbь зеленое, жирное пятно. Т.е. вы не можете рассчитывать на значения представления элементов по умолчанию. Они изменяются от браузера к браузеру, от одной версии браузера к другой, и даже от пользователя к пользователю; практически все браузеры, о которых мне известно, позволяют пользователю изменять шрифты, размеры шрифтов, размер экрана, глубину цветности и другие настройки.

Вернемся к нашему примеру с заголовком, к которому применен стиль. Если вы уже открыли страницу с примером в окне браузера, вы должны были увидеть заголовок, который центрирован, исполнен курсивом, красным цветом и шрифтом sans-serif. Если же пример отображается по прежнему, как заголовок со значениями по умолчанию - это означает, что ваш браузер не поддерживает таблицы стилей. Для изучения CSS мы бы порекомендовали Microsoft Internet Explorer 4.0 или Netscape Navigator 4.0 или более новую версию любого браузера, в этом случае вы сможете на практике проверять результаты применения таблиц стилей.

Пока подведем итог, что мы уже знаем о CSS:

  1. Мы можем определить CSS декларации в атрибуте STYLE, который обращается к большинству элементов;
  2. Значение атрибута STYLE - ряд отделенных точкой с запятой CSS деклараций;
  3. Каждая декларация состоит из свойства и значения, отделенного двоеточием.
Другими словами основной шаблон для кода CSS выглядит так:

Тэг: {Свойство1: значение; Свойство2: значение}

Посмотрите еще раз на эти инициалы: CSS, Cascading Style Sheets, Каскадные Таблицы Стилей. Мы уже рассмотрели некоторые элементы стилевого оформления и узнали, что CSS используется для того, чтобы управлять стилем представления html-элементов. Теперь рассмотрим, почему же они называются ТАБЛИЦАМИ стилей.

Элемент Style и CSS Селекторы

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

Первое, что приходит на ум - определить стиль для каждого типа элемента один раз, и затем применять его для всех последующих элементов, которые должны представляться таким же образом. Т.е. допустим, мы хотим, чтобы все применяемые на странице заголовки первого уровня отображались жирным курсивом, красным шрифтом sans-serif и располагались по центру нашей страницы. Это можно реализовать, используя Таблицы Стилей. Таблица Стилей (Style Sheets) - это файл, который содержит информацию о том, как документ должен быть представлен.

CSS Style Sheets состоит из инструкций CSS. Наиболее обычно используемый тип инструкции - набор правила. Набор правил состоит из селектора и любого числа директив, расположенных в блоке. Блок заключен в пару фигурных скобок ({блок директив}). Рассмотрим пример подобного набора правил:

H1 {
text-align: center;
color: red;
font: bold italic 150% sans-serif;
}

H1 в примере - селектор. Селектор указывает, к каким именно элементам директивы стиля мы обращаемся. В его самой простой форме, селектор - просто имя элемента. После селектора располагаются внутренние фигурные скобки ({набор инструкций}), которые являются директивами, с которыми мы обращаемся к этому элементу.

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

H1 {
text-align: center;
color: red;
font: bold italic 150% sans-serif;
}
P {
text-align: justify;
color: blue;
margin-left: 2cm;
border-left: 2px solid green;
}

Мы получили чудесную таблицу стилей для нашего документа. Теперь необходимо присоединение этой таблицы стилей непосредственно к документу. Самый легкий способ это сделать - использовать элемент STYLE. Элемент STYLE - еще один элемент заголовка документа. Он собственно и содержит таблицу стилей, которая обращается к документу. Рассмотрим его синтаксис:

NameSTYLE
UsageEmbeds a Style Sheet into an HTML document
ContextMust be contained inside a HEAD element.
ContentsMay contain only text that conforms to the syntax of the Style Sheet language used.
Start-tagRequired
End-tagRequired
language attributes
HREFTYPEMIME type of the Style Sheet
MEDIAMediaMedia for which the Style Sheet applies
TITLECDATATitle of the Style Sheet

Атрибут TYPE - необходим, он указывает используемый язык стиля. CSS - не единственный язык таблицы стилей для HTML на сегдняшний день, хотя и наиболее распространен. CSS, однако, заданный по умолчанию язык таблицы стилей для HTML, так что Вы можете использовать его в атрибуте STYLE без того, чтобы указывать дополнительно, что это - CSS. Если вы желаете явно указать заданный по умолчанию язык таблицы стилей, вы можете использовать заголовок HTTP Content-Style-Type, чтобы определить тип MIME языка таблицы стилей. Для этого используется тег МЕТА:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
В нашем примере это будет выглядеть так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<HEAD>
<TITLE> Библиотека ресурсов интернет индустрии - I2R. - Раздел Сайтостроительство</TITLE>
<STYLE TYPE="text/css" MEDIA="screen">
BODY {
background-color: #E0DD06;
color: #027002;
}
H1 {
text-align: right;
font: bold italic 150% sans-serif;
color: red;
}
P {
text-align: justify;
margin-left: 2cm;
}
</STYLE>
</HEAD>
<BODY>

<H1> Библиотека ресурсов интернет индустрии - Раздел Сайтостроительство.<H1>

<P> Казалось бы, что такое сайт? Картинки, тексты, чаты, доски объявлений - и все. Однако, в любом ремесле есть свои тонкости и секреты.</P>

<H1>Новые статьи в библиотеке</H1>

<P>Представляем вам новые статьи в нашей Библиотеке сайтостроительства за прошедшую неделю.</P>

<HR>

<ADDRESS>
Наш адрес:
<A HREF="http://www.i2r.ru">Библиотека I2R</A>,
Лучшие материалы из мира новых технологий.
</ADDRESS>

</BODY>
</HTML>

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

ID & CLASS селекторы, псевдоклассы

Синтаксис CSS Селекторов на самом деле сложносоставной. Есть очень мощные пути назначения стилей к определенным элементам. В конечном счете, Вы вероятно вообще перестанете использовать атрибут STYLE; будет намного проще точно определить элемент в каждом конкретном случае, используя селектор и назначая к нему определенный стиль. Исполняется это с помощью двух новых атрибутов, которые обращаются ко всем элементам в HTML. Это атрибуты ID и CLASS.

И ID и CLASS принимают значения называемые маркерами имени, термин, заимствованный от SGML. Маркеры имени могут содержать только английские символы, цифры, тире (-) и точку (.).

Так как значение атрибута ID уникально идентифицирует элемент, нельзя назначать один и тот же ID больше, чем одному элементу в документе

Вот - пример (для краткости приведем в примере только тело документа):
<BODY>

<H1 ID="first"> Библиотека ресурсов интернет индустрии - Раздел Сайтостроительство.</H1>

<P> Казалось бы, что такое сайт? Картинки, тексты, чаты, доски объявлений - и все. Однако, в любом ремесле есть свои тонкости и секреты. </P>

<H1 ID="second"> Новые статьи в библиотеке </H1>

<P> Представляем вам новые статьи в нашей Библиотеке сайтостроительства за прошедшую неделю. </P>

<HR>

<ADDRESS>
Наш адрес:
<A HREF="http://www.i2r.ru">Библиотека I2R</A>, Лучшие материалы из мира новых технологий.
</ADDRESS>

</BODY>
</HTML>

Здесь первый H1 элемент имеет ID "first", и второй H1 элемент имеет ID "second". Это - просто имена, которые мы выбрали для них в нашем примере; сами слова не имеют никакого специального значения. Теперь, однако, мы можем использовать специальный селекторный синтаксис, чтобы обратиться к этим элементам конкретно, например:

H1#first { ...declarations... }
H1#second { ...declarations... }
Мы можем написать и таким образом:
#first { ...declarations... }
#second { ...declarations... }

Эти селекторы означают "элемент, который имеет ID 'first' и " элемент, который имеет ID 'second' ".

Атрибут ID дает нам путь к выбранному элементу в нашем документе и предоставлении ему определенного стиля предоставления. Но как быть в случае, когда мы хотим к группе из двух или большему количеству элементов назначить тот же самый стиль? Введите атрибут CLASS.

Атрибут CLASS имеет функцию, подобную атрибуту ID. Отличаются они тем, что вы можете иметь в вашем документе любое количество элементов с одним и тем же классом.

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

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

Рассмотрим часть кода нашего html-документа:
<BODY>

<H1>Acme Computer Corp.</H1>

<P CLASS=special> Библиотека ресурсов интернет индустрии представляет</P>

<H1> Раздел Сайтостроительство </H1>

<P CLASS=special> Казалось бы, что такое сайт? Картинки, тексты, чаты, доски объявлений - и все. </P>

<P> Однако, в любом ремесле есть свои тонкости и секреты.<P>

<H1>Новые статьи в разделе Сайтостроительство</H1>

<P CLASS=news> Уличная война: редакторы против визуальных средств - Любой, кто изучал HTML и разрабатывал для Web, слышал вопрос: "Зачем учить все эти теги и их атрибуты, когда можно просто воспользоваться WYSIWYG-редактором?" Предлагаем вам почитать дополнительные аргументы некоторых web-разработчиков..<P>

<P CLASS=news> Свежие стили для вашего сайта - Большинство сайтов очень схожи по внешнему виду и дизайну. Курт Клонингер предлагает добавить в свой репертуар несколько новых дизайнерских идей, и предлагает 10 свежих стилей для вашего сайта. <P>

<HR>

<ADDRESS>
Наш адрес:
<A HREF="http://www.i2r.ru">Библиотека I2R</A>, Лучшие материалы из мира новых технологий.
</ADDRESS>

</BODY>
</HTML>
И таблица стилей для этого документа:
P.special {
font-size: bigger;
}
P.news {
font-family: sans-serif;
color: #0000A0;
}
Теперь первые два параграфа, которые принадлежат классу "special", будут иметь предоставление, указанное для P.special, и два последующих параграфа - указанное для P.news селектора. Подобно синтаксису селектора ID, селекторы CLASS состоят из дополнительного имени элемента, сопровождаемого точкой (.) и имя класса. Если опустить имена селекторов, таблица стилей будет выглядеть так:
.special {
font-size: bigger;
}
.news {
font-family: sans-serif;
color: #0000A0;
}

Здесь, однако, есть различие между этими двумя таблицами стилей. В случае ID, может быть только один элемент в документе с указанным ID, так что, если оставить имя элемента как есть, то это не изменит элементы, которым соответствует селектор.. Здесь, однако, у любого элемента может быть класс, поэтому указание в селекторе, что выбранный элемент также должен быть абзацем (или элементом <p>), сокращает область действия селектора.

Думаю, что вы уже знаете, как отображаются в окне браузера гиперссылки - как правило по умолчанию это подчеркнутый текст цвета "blue", который меняет цвет при нажатии на ссылку и показывает измененным цветом пройденные ("Purple") Вероятно предложенные по умолчанию значения цвета и другие характеристики ссылок могут не подходить для реализации конкретного дизайна. Какой селектор мы должны использовать? И как? В этом случае мы используем псевдоклассы.

Прежде, чем вы громко и радостно воскликните " A! ", позвольте мне напомнить вам, что элемент может также использоваться, чтобы определить хвосты гиперссылок, которыми мы не в данном случае не интересуемся. Мы хотим выбрать, только закрепляется, которые являются главами гиперсвязи. Как мы делаем это? Мы используем псевдоклассы.

Псевдоклассы подобны классам, но вместо представления значения атрибута CLASS нескольких элементов, они представляют специальную характеристику этого элемента. Псевдоклассы в данном конкретном примере связаны с элементом А, link и visited.

Псевдокласс link характеризуют гиперссылки, которые не были посещены. Псевдокласс visited - ссылки, которые были посещены. Посмотрите на пример таблицы стилей:

A:link { color: green; } A:visited { color: red; }

Определяет стиль для ссылок - все непосещенные ссылки - зеленого цвета и все посещенные - красным.

Более подробно эта тема будет рассмотрена в следующем материале, а пока подведем итоги

  1. Наиболее простой селектор - название элемента, и соответствует любому элементу этого типа
  2. Название элемента может произвольно сопровождаться меткой (#) и значением ID, соответствующим элементу указанного типа с тем же ID.
  3. Название может также произвольно сопровождаться точкой (.) и значением CLASS, соответствующим всем элементам указанного типа с тем же CLASS.
  4. Название может также произвольно сопровождаться двоеточием (:) и псевдоклассом, соответствующим всем элементам указанного типа, принадлежащего этому псевдоклассу.
  5. Если название элемента опущено, когда ID, класс или псевдокласс определены, то селектор соответствует всем элементам любого типа, которые имеют тот же ID, CLASS или псевдокласс.

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

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

Элементы DIV и SPAN

Элементы в HTML обычно дают их содержанию некоторое значение; они семантически выделяются. Но иногда есть необходимость просто сгруппировать часть вашего документа без какого-то специального значения, чаще всего именно для того, чтобы применить некоторый стиль к блоку информации. И конечно, для этого мы используем CSS. Введите ЭЛЕМЕНТЫ SPAN и DIV. Вот - их синтаксис:

NameDIV
UsageSeparates a block of content
ContextThis is a block element.
ContentsMay contain only block elements.
Start-tagRequired
End-tagRequired
language attributes
identifier attributes
NameSPAN
UsageSeparates a piece of text
ContextThis is an inline element.
ContentsMay contain only inline elements.
Start-tagRequired
End-tagRequired
language attributes
identifier attributes

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

<DIV CLASS="WhatsNew">

<H1> Новые статьи в разделе Сайтостроительство </H1>

<P CLASS=news> Уличная война: редакторы против визуальных средств - Любой, кто изучал HTML и разрабатывал для <cite>Web</cite>, слышал вопрос: "Зачем учить все эти теги и их атрибуты, когда можно просто воспользоваться WYSIWYG-редактором?" Предлагаем вам почитать дополнительные аргументы некоторых web-разработчиков<P>

<P CLASS=news> Предлагаем почитать ответ web-мастера <SPAN CLASS="CompName">(Derek M. Powazek)</SPAN> на статью <SPAN CLASS="CompName"> Я.Нильсена </SPAN>, положившую начало спора о том, Как читают web-пользователи.
<a href="/static/255/out_13070.shtml">Разрушим величайший миф web-дизайна</A>.</P>

В этом примере класс WhatsNew применяется ко всему DIV`у, и есть возможность применить стиль к целому информационному блоку, в частности, задать ему обводку, фон или размеры. Кроме того в двух элементах SPAN используется стиль из класса "CompanyName", которые так же формируются в отдельной таблице стилей.

Расширенные Таблицы Стилей.

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

Все, что вы должны для этого сделать, это поместить вашу таблицу стилей в отдельный файл и использовать элемент LINK, чтобы связаться с нею:

<LINK REL="Stylesheet" TITLE="Default Stylesheet" MEDIA="Screen" HREF="style/default.css">

Помните, что значение атрибута HREF - URL таблицы стилей непосредственно. Теперь Вы можете обходиться без элемента STYLE в целом, помещать ваши правила стиля в отдельный файл и связываться с нею изо всех ваших документов. Таким образом мы получаем еще одно преимущество использования CSS. Если вы работаете с большим количеством html-страниц, связанных с одной единственной таблицей стилей, вы можете изменять дизайн всего web-сайта (группы страниц) только лишь изменяя таблицу стилей без необходимости переверстывать индивидуально каждый html-элемент.

Подведем итоги.

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

По мотивам WebReference.Com

Следующий материал:

How do I Select Thee, Let Me Count the Ways?..

Внимание! Вся информация, размещенная на этом сайте в разделах "статьи" или "рассылки", является собственностью NunDesign. О полном или частичном использовании материалов вы можете узнать на странице "авторское право".

наверх наверх

MoiKrug - Вукс ТатьянаВукс Татьяна


NunDesign © 2001-2008 All rights reserved