Русская часть Интернета растет день ото дня. За последние год-два суммарный объем русскоязычных страниц увеличился более чем в два раза. Сегодня в России уже никого не удивишь словосочетанием <домашняя страничка> или английским словом
Речь здесь пойдет о <правильном> HTML для новичков, а именно - о некоторых дополнительных возможностях, официально утвержденных интернет-консорциумом (http://www.w3.org/). В частности, о некоторых возможностях, предоставляемых динамическим HTML (DHTML). А еще точнее - о том, как с помощью CSS (cascade style sheets, или каскадных таблиц стилей) сделать страничку, которая будет выглядеть лучше, чем страницы, созданные посредством <классического> HTML, при этом занимать меньше места и, соответственно, быстрее грузиться.
Мало кто из людей, впервые решившихся на создание собственного web-представительства, вооружается notepad"ом или другим текстовым редактором вроде HomeSite. Обычно новичок думает следующим образом: <Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>) - тексты я создаю в MS Word, презентации - в MS PowerPoint, так возьму-ка я и для создания web-странички подобную программу - MS FrontPage...> Приняв такое решение, новоявленный web-ваятель дважды обкрадывает себя.
Первый раз - в смысле рационального использования web-пространства. Дело в том, что все визуальные редакторы web-страниц, к которым относится и упомянутый MS FrontPage, вставляют в создаваемые страницы <отсебятину> - множество лишних ненужных тегов. Исключением, пожалуй, является Macromedia Dreamweaver (за что он снискал себе заслуженную популярность как среди новичков, так и среди профессионалов). Но даже он в этом плане не идеален - любит засорять исходный текст кавычками (в большинстве случаев совершенно ненужными), а также вставлять символы неразрывного пробела в самых неподходящих для этого местах. Справедливости ради стоит отметить, что все визуальные редакторы предоставляют пользователю возможность работать с исходным кодом создаваемой страницы, но столь любимый многими FrontPage вновь переделает все по-своему, стоит вам только переключиться снова в визуальный режим.
Из этого следует, что второй раз новичок обкрадывает себя именно в части гибкости и полноты управления создаваемым содержимым страницы - визуальные редакторы не предоставляют такой свободы творчества, какую предоставит вам работа непосредственно с исходным кодом создаваемой страницы.
Ну, а теперь перейдем непосредственно к делу - к созданию красивых и небольших web-страниц с помощью каскадных таблиц стилей (в дальнейшем тексте я буду употреблять их сокращенное название - CSS). Предполагается, что вы, дорогие читатели, прочтя вступление, согласились со мной, отказались от визуальных редакторов, добыли книгу по HTML, изучили хотя бы небольшое количество основных тегов и атрибутов и горите желанием узнать, что же такое CSS и с чем его едят.
Классический HTML версии 3.2, наиболее распространенный на данный момент в Сети, предоставляет нам средства физического форматирования документов, для чего имеются специальные теги (например, теги , , ) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web-форматирования принуждают нас снова и снова прописывать эти теги и атрибуты для каждого нового абзаца, что, конечно, сильно увеличивает размер кода страниц. Кроме того, при таком способе форматирования в случае анализа структуры документа остается непонятным, почему данное слово выделено жирным начертанием - просто для красоты или же чтобы обратить на себя особое внимание конечного пользователя? Если живой человек еще в состоянии худо-бедно разобраться в логических построениях страниц на классическом HTML, то о поисковых машинах или, к примеру, голосовых броузерах этого не скажешь. Им вынь да положь чистую логику в структуре страницы. Именно из-за такой <неподвластности> логическому анализу данный способ форматирования был назван физическим форматированием. В противовес ему при создании новой спецификации HTML 4.0 во главу угла было поставлено логическое форматирование, то есть такое форматирование, при котором структура и оформление документа были бы четко разделены. Этот способ форматирования рекомендован к применению интернет-консорциумом, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа как раз с помощью CSS.
Стоит отметить тот факт, что зачатки логического форматирования присутствовали и в классическом HTML - теги
, безусловно, способствовали разделению документов на некоторые логические блоки. Но многие авторы страниц использовали, да и по сей день продолжают использовать эти теги не по назначению: в связи со скудостью средств для оформления страницы теги заголовков, например, использовались для выделения таких элементов на странице, которые на самом деле заголовками не являлись. CSS же предоставляют достаточное количество средств оформления, что позволяет более точно следовать правилам логического форматирования и действительно отделять структуру страницы от ее визуального представления.Назначение стилей отдельным элементам страницы
CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу
. Если стиль задан для тега , он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нам уже не нужно прописывать теги и атрибуты color, size и т. п. для каждого абзаца на странице - достаточно задать некий стиль для тега , и все абзацы на странице будут отображены в соответствии с этим стилем. Как же это сделать?Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тега
, присвоив ему соответствующее значение. Синтаксис такой:
Таким образом, все абзацы на странице отображены так, как мы захотели, причем код не засорен тегами и их атрибутами. Представляете, какая экономия размера файла, если ваша страница состоит из большого количества текста!
Обратите внимание - когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на машине конечного пользователя не установлен шрифт Times New Roman, броузер подставит вместо него любой из имеющихся шрифтов с засечками, и отображение страницы будет максимально приближено к тому, что вы задумали. Причем приведенный пример будет понятен и для IE (4.0 и выше), и для NN (4.0 и выше). Хотя надо сразу оговориться, что Netscape Navigator поддерживает далеко не все возможности, предоставляемые CSS и DHTML, и это, безусловно, не увеличивает числа его поклонников.
В приведенном примере используется встраивание стиля непосредственно в тег документа - так называемый inline-стиль. Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях - если данный стиль планируется применить только к одному элементу только на одной странице сайта. Если же стиль должен быть применен к нескольким элементам на одной странице или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML, о которых мы поговорим далее.
Назначение стилей нескольким элементам одной страницы - создание внедренной таблицы стилей
Пока речь у нас шла о задании только одного стиля для одного элемента. А теперь мы научимся создавать именно таблицы стилей.
Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня - шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в <голове> страницы (в любом месте между тегами
и ) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом . Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:... ...
Этот способ связывания CSS и HTML называется внедрением. Его рекомендуется применять в тех случаях, когда вы решили задать какой-либо набор правил форматирования только для одной страницы сайта, а все остальные страницы по вашему замыслу должны выглядеть по-другому.
Назначение стилей одновременно для нескольких страниц сайта
Помимо встраивания и внедрения для связи CSS и HTML используются способы импортирования и связывания таблиц стилей. Это, безусловно, наилучшие способы для придания единого стилевого оформления нескольким (или даже всем) страницам одного сайта. При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным - .css).
Вот пример содержимого такого файла (например, my.css):
Body { font-family: "Times New Roman", serif; font-size: 12pt; color: darkgreen; } h1 { font-family: Arial, sans-serif; font-size: 16pt; color: green; font-weight: bold; } h2 { font-family: Arial, sans-serif; font-size: 14pt; color: greenyellow; font-weight: bold; font-style: italic; }
Обратите внимание: теги внутри файла таблицы стилей не используются - расширение.css явно указывает броузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц). В html-файле для связывания нужно прописать в любом месте между тегами
и следующую строку:... ...
В этой строке указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла - .css (type="text/css") и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href="my.css"). Очевидно, что эту строку мы можем прописать в любом (либо во всех) из наших html-файлов. Таким образом, единое стилевое оформление будет прописано для нескольких страниц сразу.
Обратите внимание на то, что inline-стили (стили, прописанные для отдельных элементов страницы с помощью атрибута style) и внедренные стили (стили, прописанные в <голове> страницы внутри тега-контейнера ...
Помимо адреса импортируемой таблицы стилей вы можете прописать в тег-контейнер ...
...Вопрос журналиста
Ответ интервьюируемого
...В приведенном примере вопросы журналиста будут отображаться шрифтом Arial серого цвета, полужирным, курсивного начертания, размером 10 пунктов с отступом 15 пикселов от левого края страницы. Ответы же будут отображены шрифтом Times New Roman размером 12 пунктов черного цвета. Важно не забывать прописывать параметр class различным классам абзацев непосредственно в коде html. Вы можете создавать любое количество классов для любых элементов страницы.
Селектор id
Возьмем другой случай. Предположим, вы хотите создать на странице какие-либо уникальные элементы, к которым в дальнейшем планируете обращаться из программ JavaScript. Возможно, эти элементы будут повторяться на других страницах, и вы хотели бы задать им единое оформление посредством CSS. На этот случай в каскадных таблицах стилей имеется возможность присвоения уникальным элементам идентификаторов (id). Наиболее часто идентификаторы используются для элементов форм, которые в спецификации HTML 4.0 имеют полную либо ограниченную поддержку CSS (в зависимости от элемента). Вот пример назначения идентификатора и правил CSS таким элементам:
... ... ... ...
Аналогичным образом уникальные идентификаторы могут быть назначены любому количеству любых элементов страницы. Это может быть полезно для обращения к элементу из программы на языке JavaScript и изменения стиля его отображения в ответ на действия пользователя, что позволяет создавать различные динамические эффекты.
Контекстные селекторы
Допустим, мы создали таблицу стилей, согласно которой все заголовки первого уровня на странице отображаются красным цветом на сером фоне, все абзацы - зеленым цветом на желтом фоне, а все выделенные посредством тега 1 слова внутри абзацев - черным цветом на серебристом фоне. Код таблицы стилей, как вы уже догадались, при этом выглядит так:
H1 { color: red; background-color: gray; } p { color: green; background-color: yellow; } em { color: black; background-color: silver; }
Предположим, мы хотим также выделить какие-то слова в заголовке посредством того же тега , но нас не устраивает появление черного цвета текста на серебристом фоне в заголовке. Мы хотим выделить слова в заголовке бордовым цветом на сером фоне. Для этого существуют контекстные селекторы. Запись правила, которое мы для этого добавим в таблицу стилей, будет выглядеть так:
H1 em { color: #CC0000; background-color: gray; }
А вот пример кода страницы с использованием этого контекстного селектора:
... ... ...
Это - заголовок первого уровня с выделенным словом
А это - обычный абзац с выделенными словами
...На сегодня это все. В следующий раз мы поговорим о правилах форматирования блоковых элементов страницы, о позиционировании элементов и о других интересных и полезных возможностях, реализуемых с использованием CSS.
Применение Таблицы Стилей к документу
Встраивание Таблиц Стилей в документ
Задание стиля для отдельного фрагмента документа
Импорт Таблицы Стилей
Указание нескольких свойств одновременно
Группирование селекторов
Комментирование Таблицы Стилей
Свойства стилей
Свойства background
Обрамление элементов
Свойства списков
Свойства текста
Группирование свойств для упрощения определения стиля
Наследование свойств
Применение контекстных селекторов
Почему Таблицы Стилей называются каскаднымиТаблицы стилей предусмотрены рекомендациями W3C и являются стандартным инструментом форматирования Web - страниц, использующим подходы, характерные для настольных издательских систем. Программа Microsoft Internet Explorer 3.0 стала первым браузером, поддерживающим таблицы стилей. Браузер Netscape Navigator поддерживает таблицы стилей, начиная с версии 4.0В2 (Beta 2), доступной с февраля 1997 года.
Подробные сведения о рекомендациях W3C можно получить по адресу: http://www.w3.org/pub/WWW/TR/WD-cssl.html . В стандарте W3C используется термин "каскадные таблицы стилей уровня 1" ("cascading style sheets level 1, CSSI").
Для начала необходимо пояснить, что имеется в виду под названием “таблиц стилей”. Большинство современных текстовых редакторов позволяют пользователю определять стиль, который будет использоваться для форматирования документа. В частности, можно выбрать стиль абзаца с одинарным межстрочным интервалом, шрифтом Courier и левым полем в один дюйм. Этот стиль форматирования может быть в дальнейшем применен к любому числу абзацев этого и других документов. Таблицы стилей НТ
ML действуют точно таким же образом. Ниже приведен краткий список основных функций:
Изменение расстояний между строками, словами и отдельными символами.
Установка левого, правого, верхнего и нижнего полей элемента (блока текста контейнера HTML).
Установка отступа элемента.
Изменение размера, стиля и других атрибутов шрифта элемента.
Установка рамки вокруг элемента.
Включение фонового изображения и фонового цвета в элемент.
Большим преимуществом таблиц стилей HTML является возможность отделить операцию форматирования от содержания документа. Сначала определяется, как должен выглядеть текст в том или ином месте страницы, а затем вводите сам текст. Если вы позднее решите, например, заменить цвет шрифта заголовков на синий, для этого будет достаточно поменять только стиль этих заголовков. Делать изменения в тексте нет необходимости.
Существует четыре метода применения таблицы стилей к документу:
Связывание (Linking) - можно связать HTML - документ с таблицей стилей, хранящейся в отдельном файле.
Встраивание (Embedding) - можно встроить таблицу стилей в HTML - документ с помощью контейнера
Тэг
Как было указано ранее, таблицы стилей хранятся в текстовых файлах, удобных для редактирования. Их нетрудно создавать вручную, однако существуют специальные редакторы таблиц стилей, например, популярная программа Мicrosoft FrontPage.
Таблицы стилей позволяют определять стиль для одного или нескольких тэгов. Например, можно создать таблицу стилей, определяющую стили для тэгов
,
,
И . Каждое определение называется правилом (rulе). Правило содержит селектор (тэг HTML), за которым следует декларация (определение стиля). Селектор является связующим звеном между определением и тэгом. Ниже приведен пример правила, указывающего стиль для каждого из тэгов заголовка
:
H1 (color: blue}
Декларация заключается в фигурные скобки. Каждая декларация имеет две части: название свойства и присваиваемое ему значение, разделенные двоеточием. В HTML включены десятки свойств (font-size, font-style, color, margin-right и т. д.), о которых будет рассказано ниже. Каждое свойство может принимать несколько значений, одно из которых приписывается ему по умолчанию.
В предыдущем примере было указано лишь одно свойство color. Однако ничто не мешает определить целый ряд свойств в одном тэге, отделив их друг от друга точкой с запятой:
HI {color: blue; font-size: 12pt; text-line: center}
В этом примере программа просмотра выведет каждый заголовок первого уровня синим шрифтом размером 12 пунктов и выровняет их по центру окна. Для всех прочих свойств будут использоваться значения по умолчанию (например, свойству font-style будет присвоено значение normal).
Если необходимо определить один и тот же стиль для нескольких тэгов, можно перечислить их в отдельном списке:
Р (font-size: 12pt}
UL {font-size: 12pt}
LI {font-size: 12pt}HTML позволяет сделать то же самое и в более компактном виде - в одной строке:
Р, UL, LI (font-size: 12pt}
Запятая здесь является обязательным элементом. Если она опущена, смысл правила изменится (см. раздел " " ниже в этой главе).
По мере усложнения таблицы стилей, скорее всего, понадобится включить в нее дополнительные сведения о назначении того или иного правила. Комментарии располагаются между символами /* и */ и игнорируются программами просмотра, например:
BODY {margin-left: lin} /* Отступ на 1 дюйм */
H1 {margin-left: -lin} /* Сдвиг влево на 1 дюйм */
Н2 (margin-left: -lin} /* Сдвиг влево на 1 дюйм */HTML позволяет определить широкий спектр свойств таблиц стилей. Имена свойств состоят из одного, а чаще - из двух или трех слов, разделенных дефисом. В сложных названиях первое слово обычно представляет категорию и одновременно является сокращенным вариантом (shorthand) имени свойства (см. раздел " ").
В таблице приведен обзор свойств таблиц стилей HTML.. В колонке "Категория" показано, может ли то или иное свойство объединяться в группу с другими свойствами. В третьей колонке приведены сведения о том, наследуется или нет свойство подчиненными тэгами (о наследовании свойств см. раздел " ").
Наследование
Таблицы стилей HTML позволяют украшать фон элемента страницы цветом или изображением. Необходимо заметить, что здесь и далее речь пойдет об использовании свойств не для всей страницы, а для отдельного элемента. Например, если определяется фон для тэга
, то это фон будет только у тэгов
всей страницы:
U L {background-image: URL(http://www.myserver.com/images/watermark.gif)}
Рекомендации W3C дают возможность определять рамки, поля и свободное пространство для элементов страницы. Можно, например, заключить заголовок в рамку или изменить поля в тэге абзаца <Р> так, чтобы организовать отступ для всех абзацев текста. Для этих целей можно использовать следующие группы свойств:
border - используются для определения рамки, расположенной слева, справа, сверху и снизу от элемента. Можно устанавливать ширину, цвет и стиль рамки.
margin - используются для определения полей, расположенных слева, справа, сверху и снизу от элемента. Можно также устанавливать ширину полей.
padding - применяются для того, чтобы указать свободное пространство между рамкой и содержимым элемента.
Эти свойства применяются для указания способов вывода списков. С их помощью можно изменить позицию маркера (свойство list-style-position), стиль или изображение маркера (свойства list-style-type и list-style-image).
Свойства списков наследуются, т. е. если определено свойство в тэге
, оно будет действительно для всех тэгов
- контейнера UL .
Свойства дают вам полный контроль того, как программа просмотра выводит текст. С их помощью можно управлять цветом, размером, шрифтом, межстрочным интервалом и т, д. Ниже будут подробно описаны все свойства текста.
Многие из описанных выше свойств могут группироваться друг с другом. Так, вместо правила
H1 (font-weight: bold; font-style: normal; font-size: 12pt; font-family: serif)
можно записать более краткую формулировку:
H1 (font: bold normal 12pt serif}
Таблицы стилей HTML позволяют группировать свойства border, background, font, list, margin и padding. Рассмотрим каждую из групп в отдельности.
Группа свойств border
Группировать свойства border можно пятью различными способами. Можно определить свойства для отдельной стороны рамки, используя
border-top, border-right, border-bottom И border-left, либо определить всю рамку сразу при помощи border.С каждым из этих свойств можно указать ширину, стиль и цвет рамки, например:
b order-top: thin dotted black
Группа свойств background
В группе свойств background можно указать значения для color, image, repeat, attachment и position, например:
background: white URL(http://www.myserver.com/image/bg.gif) repeat-x fixed top left
Группа свойств font
Группе font можно дать значения weight, style, size и family, например:
font: bold normal 12pt times, serif
Группа свойств list
Свойства группируются при помощи свойства list-style. Возможно указание изображения для маркера, типа и позиции маркера, например:
list-style: square URL(http://www.myserver.com/images/marker.gif) inside
Группа свойств margin
Группе margin можно определить ширину для каждого из полей top, right, bottom и left, например:
margin: .5in 1in .5in 1in
Если будет указано только одно значение, программа просмотра сделает ширину других полей такой же. Если не указать одно или два значения, поля с неуказанным значением будут такой же ширины, как противоположные поля. Например, если опустить последнее значение (left), ширина левых полей будет равна ширине правых полей, т. е. 1 дюйму.
Группа свойств padding
В Группе padding можно указать значения для top, right, bottom и left, например:
padding: .25in .25in .25in .25in
Если будет указано только одно значение, программа просмотра назначит отсутствующим значениям такую же величину. Если не указать одно или два значения, свободные пространства с неуказанными значениями будут такой же ширины, как и им противоположные. Например, если опустить последнее значение (left), свободное пространство между левой стороной рамки и содержимым элемента будет таким же, как и пространство с правой стороны.
В HTML подчиненные тэги наследуют некоторые свойства родительских тэгов. Например, все тэги контейнера
(< P > и) будут обладать некоторыми свойствами тэга . Точно так же тэг
- наследует свойства тэга
. Рассмотрим следующий код:
Hello. This is a paragraph of text. This is emphasized
Таблица стилей этого документа устанавливает цвет в тэге
< P > синим, однако, цвет для тэга явно не определен (по умолчанию - это черный цвет). Здесь не о чем беспокоиться, так как этот тэг находится в родительском контейнереИ наследует таким образом синий цвет.
Иногда возникает необходимость определения двух (и более) стилей для одного тэга. Например, может понадобиться указание двух стилей для тэга
- : один для случая, когда он подчинен тэгу
, и второй, когда он подчинен тэгу
. Это возможно сделать с помощью контекстных селекторов.
color и значение sans-serif свойства font-family помечены этим служебным словом, и поэтому программа просмотра не должна их переопределять. Однако если вступают в конфликт два таких правила, противоречие решается согласно принципам, изложенным выше.Контекстный селектор определяет точную последовательность тэгов, для которых будет применен тот или иной стиль. Другими словами, можно указать, что какой-то стиль должен применяться, например, в тэге
- только в том случае, если этот тэг является подчиненным тэгу
:
OL LI (list-style-type: decimal}
Для того же тэга
- можно определить другой стиль, действительный только в случае подчиненности тэгу
:
UL LI {list-style-type: square}
Необходимо заметить, что список селекторов не разделен запятыми. В противном случае всем тэгам списка будет приписан один и тот же стиль.
В рекомендациях W3C таблицы стилей называются "каскадными таблицами стилей" потому, что для верстки Web - страницы можно применять не одну, а сразу несколько таблиц. При этом программа просмотра сама определяет последовательность использования таблиц и разрешает конфликты между ними по принципу каскадирования. Например, таблица стилей для страницы может быть определена не только ее автором, но и читателем, и тогда правила каскадирования решают, какая из таблиц стилей будет иметь силу.
Kак это работает? Каждому правилу браузер приписывает весовой коэффициент. При интерпретации каждого тэга программа просматривает все правила этого тэга и сортирует их по величине весового коэффициента. Выигрывает самое "весомое" правило.
Существуют следующие общие принципы разрешения конфликтов между таблицами стилей:
Старшинство типов таблиц стилей в документе (по убыванию): текущее задание стиля (inline), встраивание (embedding), связывание (linking).
Также можно изменить весовой коэффициент правила при помощи служебного слова important. В следующем примере значение red свойства
H1 (color: red ! important font-weight: bold font-family: sans-serif ! important}
Классом называется определение нескольких стилей одного элемента, каждый из которых может использоваться в нужном месте страницы. Например, можно определить три вариации стиля заголовка H1 . Определение вариаций похоже на указание стиля, только к названию тэга добавляется произвольное имя класса, отделенное точкой:
H1 blue (color: blue} H1 .red (color: red} H1 .black (color: black}
Теперь, включая в документ тэг
, можно указать в нем конкретный стиль при помощи атрибута CLASS :
Red Heading
СSS - Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов.
С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.
CSS действует более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.
Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц, а также изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.
Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.
Существует три вида таблиц стилей:
Внутренние таблицы стилей - (Inline Style Sheets) при помощи специального атрибута помещаются прямо в HTML теги.
Глобальные таблицы стилей - (Global Style Sheets) определяют стиль элементов во всем документе.
Связанные таблицы стилей - (Linked Style Sheets) могут быть использованы для нескольких документов сразу и хранятся во внешнем файле.
Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы .
Практическое освоение CSS
Существует четыре способа связывания документа и таблицы стилей :
- Связывание - позволяет использовать одну таблицу стилей для форматирования многих страниц HTML
- Внедрение - позволяет задавать все правила таблицы стилей непосредственно в самом документе
- Встраивание в теги документа - позволяет изменять форматирование конкретных элементов страницы
- Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере
Остановимся на каждом из этих способов более подробно.
1. Связывание
Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега LINK , располагающегося внутри тега HEAD ваших страниц:
Первые два параметра этого тега являются зарезервированными именами , требующимися для того, чтобы сообщить браузеру, что на этой страничке будет использоваться CSS.
Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://...») в случае, если файл стилей находится на другом сервере.
2. Внедрение
Второй вариант, при котором описание стилей располагается в коде Web-странички, внутри тега HEAD , в теге STYLE type="text/css">... . В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css" является обязательным и служит для указания браузеру использовать CSS .
3. Встраивание в теги документа
Третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE , используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен , он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.
4. Импортирование
В теге , и выдаст все описания стилей на страничку, как обычный текст. Для того чтобы предотвратить это, необходимо заключить описания стилей в тег комментариев. Делается это очень просто.