Как писать таблицы в html. Встраивание стилей в HTML документ. можно указать в нем конкретный стиль при помощи атрибута CLASS: Red Heading
По мере увеличения количества документов, расположенных на вашем сервере WWW, вам будет все труднее и труднее заниматься его сопровождением. Особенно это касается оформления документов HTML. Представьте себе, что вам нужно, например, изменить оформление заголовков первого уровня во всех документах, а также изменить шрифтовое оформление текста, вставленного в документ при помощи оператора
Ручная обработка множества документов HTML с целью приведения их внешнего вида к некоторому стандарту может отнять немало времени.
Аналогичная проблема возникает и при подготовки обычных текстовых документов. Например, при создании документа вы указали для обычных параграфов абзацный отступ и шрифт, а также оформили определенным образом заголовки. Далее у вас может возникнуть необходимость изменения параметров оформления, например, величины того же абзацного отступа. В простейших текстовых редакторах для внесения необходимых изменений вам придется вручную обработать каждый параграф текста.
Для упрощения оформления документов современные текстовые процессоры, такие, например, как Microsoft Word, используют оформление по образцу. Образцы содержат в себе описания параметров оформления и называются стилями. Например, в стиле может быть указано, что заголовок второго уровня отображается красным цветом и должен быть отцентрирован.
Создавая текстовый документ, вы назначаете каждому параграфу текста определенный стиль, выбирая его по имени из списка или создавая новый. В этом случае для изменения параметров оформления параграфа с заданным стилем вам не нужно вручную редактировать все такие параграфы - достаточно отредактировать соответствующий стиль, что намного проще.
Вернемся к проблеме оформления большого количества документов HTML. Для решения этой проблемы вы можете использовать так называемые каскадные таблицы стилей Cascading Style Sheets (CSS), разработанные консорциумом World Wide Web Consortium (W3C).
Полное описание текущей редакции каскадных таблиц стилей вы можете найти на сервере консорциума W3C по адресу http://www.w3.org/pub/WWW/TR/WD-css1.html. Кроме того, мы рекомендуем вам обязательно познакомиться с описанием таблиц стилей A User"s Guide to Style Sheets, расположенном на сервере http://www.microsoft.com. Мы же расскажем вам только о самых важных возможностях таблиц стилей, реализованных в навигаторе Microsoft Internet Explorer версии 3.0.
Что же касается навигатора Netscape Navigator версии 3.0, то он не работает со стилями. Однако в ближайшем будущем фирма Netscape планирует добавить такую возможность в свой навигатор.
Способы использования стилей
Предусмотрено три различных способа использования стилей. В зависимости от ваших потребностей, вы можете применять все или только некоторые из них.
Общие таблицы стилей для нескольких документов HTML
Наиболее интересное применение таблиц стилей - это их использование для оформления многих, возможно, даже всех документов HTML, расположенных на вашем сервере. При этом выполняется подключение (linking) файлов таблиц стилей к документам HTML. Имя файла таблицы стилей должно иметь вид *.css.
Изменяя содержимое файлов таблиц стилей, вы сможете без прямого редактирования изменить внешний вид всех документов HTML, к которым подключены эти файлы.
Заметим, что общие таблицы стилей могут использоваться одновременно не только на одном, но и на нескольких серверах WWW, так как можно подключать файлы таблиц стилей, указывая их стандартный адрес URL. Это позволяет централизованно создавать и изменять корпоративные таблицы стилей.
Встраивание таблиц стилей в документы HTML
Если отдельные документы HTML должны быть оформлены особым образом, отличным от того, что задано в общих таблицах стилей, вы можете встроить таблицы стилей непосредственно в текст документа HTML. Такие таблицы называются встроенными (embedded) таблицами стилей.
Недостаток встроенных таблиц стилей заключается в необходимости редактирования содержимого всех документов HTML, где эти стили используются, при изменении стилей для всего сервера. Поэтому их применение оправдано только в тех случаях, когда на сервере расположено не очень большое количество документов HTML со встроенными стилями.
Может получиться так, что стили, встроенные в документ HTML, будут конфликтовать с общими таблицами стилей. В этом случае навигатор отдаст преимущество встроенным таблицам стилей.
Встраивание стилей в операторы HTML
Последний способ предполагает встраивание стилей непосредственно в операторы языка HTML и применение стилей для оформление отдельных фрагментов документа HTML. Этому способу присущ тот же недостаток, что и предыдущему, - при изменении стиля необходимо вручную редактировать все документы HTML, в котором этот стиль используется.
В случае конфликта со таблицами стилей, встроенными в документ HTML, навигатор отдает предпочтение стилям, встроенным в операторы HTML. Поэтому вы можете таким образом выполнить локальное переопределение стилей.
Создание файлов таблиц стилей
Как мы уже говорили, файлы таблиц стилей содержат определения стилей, которые могут быть использованы для оформления многих документов HTML, расположенных на одном или нескольких серверах WWW.
Внешний вид файла таблицы стилей лучше изучать на конкретном примере (листинг 2.17).
Листинг 2.17. Файл chap2\styles\styles.css
H1 { font-size: 24; font-weigt: bold; color: red; margin-left: 10% } H2 { font-size: 20; font-weigt: bold; color: black; font-family: Courier } P.italic { font-style: italic } P.red { color: red }Здесь мы определили стили H1, H2, P.italic и P.red.
Определение стиля начинается с имени класса (например, H1), вслед за которым в фигурных скобках перечисляются параметры стиля. Для стиля с классом H1 мы указали размер шрифта, равный 24 пунктам, задали утолщение, красный цвет и отступ с левой стороны на 10 процентов от ширины экрана.
Отдельные параметры стилевого оформления задаются своими именами, после которых через символ двоеточия следует значение параметра. Параметры отделяются символом точка с запятой.
Ссылка на файл таблицы стилей
Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить оператор . Пример ссылки на файл таблицы стилей вы можете найти в листинге 2.18.
Листинг 2.18. Файл chap2\styles\cssdemo.htm
Заголовок первого уровня
Заголовок второго уровня
Наклонный текст
Текст красного цвета
Параметры оператора необходимо задавать, как указано в этом примере. В параметре HREF должен быть указан адрес URL файла таблицы стилей. Этот файл может находиться на любом сервере WWW, а не только на том, где размещен данный документ HTML.
Как пользоваться стилями из файла таблицы стилей?
Очень просто.
Если в файле определены параметры для операторов языка HTML, предназначенных для оформления текста (например, для операторов
или , как в нашем примере), вы просто указываете эти операторы без изменений:
Заголовок первого уровня
Обычный текст
Заголовок второго уровня
Заголовок первого уровня
Обычный текст
Заголовок второго уровня
Однако при определении стиля вы можете не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов. Например, ниже определены классы italic и red для оператора P.italic { font-style: italic } P.red { color: red }
Для того чтобы задействовать созданные классы, вы должны указать имя нужного класса в параметре CLASS оператора
(или другого оператора форматирования текста), как это показано ниже:
Наклонный текст
Текст красного цвета
Внешний вид документа, оформленного с использованием нашего файла таблицы стилей, показан на рис. 2.18.
Рис. 2.18. Внешний вид документа, оформленного с использованием файла таблицы стилей
Нетрудно заметить, что заголовок первого уровня отображается с отступом от левого края, как это и было указано в стиле H1.
Заголовок второго уровня изображен с использованием шрифта с фиксированной шириной символов, так как в соответствующем стиле было указано семейство шрифтов Courier.
Последние два параграфа документа отображаются, соответственно, с наклоном и с выделением красным цветом.
Стили в документе HTML
Вы можете встроить таблицу стилей непосредственно в документ HTML, для чего нужно использовать оператор . Между операторами находится таблица стилей.
В листинге 2.19 мы привели пример документа HTML, в который встроена таблица стилей.
Листинг 2.19. Файл chap2\styles\embed.htm
Заголовок первого уровня
Обычный текст
Заголовок второго уровня
Наклонный текст
Текст красного цвета
Внешний вид этого документа при просмотре в навигаторе Microsoft Internet Explorer аналогичен показанному на рис. 2.18. Навигатор Netscape Navigator, как и в предыдущем случае, игнорирует стилевое оформление.
Обратите внимание на использование оператора комментария . Когда документ просматривается навигатором, не распознающем стилевое оформление, то такой навигатор проигнорирует как оператор , который должен размешаться в разделе
документа:
Тэг
Как было указано ранее, таблицы стилей хранятся в текстовых файлах, удобных для редактирования. Их нетрудно создавать вручную, однако существуют специальные редакторы таблиц стилей, например, популярная программа М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 дают возможность определять рамки, поля и свободное пространство для элементов страницы. Можно, например, заключить заголовок в рамку или изменить поля в тэге абзаца <Р> так, чтобы организовать отступ для всех абзацев текста. Для этих целей можно использовать следующие группы свойств: Эти свойства применяются для указания способов вывода списков. С их помощью можно изменить позицию маркера (свойство list-style-position), стиль или изображение маркера (свойства list-style-type и list-style-image). Свойства списков наследуются, т. е. если определено свойство в тэге
|
