1.3 Внешние таблицы стилей
Внешние таблицы стилей, называемые иногда связанными стилями, располагаются во внешних файлах. Особенности работы с такими стилями имеются в подключении внешнего файла. Его написание не отличается от рассмотренного выше описания глобальных стилей. Файл не содержит дополнительных сведений и начинается прямо с текста, аналогичного контенту элемента HTML <style>. Комментарии отмечаются подобно комментариям языка С и заключаются в /*…*/. Например:
/* Пример внешнего листа стилей */
H1 { text-align: center; font-family: Arial }
H2 { color: #440000; text-align: center; font-family: Arial }
Подключение внешних файлов командой CSS @import. В основном файле внутри элемента <style> может находиться команда @import, которая указывает URI подключаемого файла, Эта команда является командой языка CSS.
Например:
<style type ="text/css"><!--@import url(my_style.css); --></style>
Подключение внешних файлов элементом HTML <link>. Другой способ подключения внешнего файла заключается в использовании элемента HTML <link> в разделе <head>. Элемент является одиночным тегом. Атрибут rel должен иметь значение stylesheet, атрибут href определяет размещение файла, а атрибут type - его тип (text/css). Например:
<link rel ="stylesheet" href ="my_style.css" type="text/css">
Таблицы стилей поддерживают механизм наследования. Механизм наследования подразумевает наличие объектов-родителей (предков) и объектов-детей (потомков), тем или иным образом порожденных первыми. Потомки при этом наследуют некоторые или даже все свойства родителей. В случае с HTML внешние элементы и грают роль предков, а вложенные в них элементы играют роль потомков, и обычно наследуют свойства внешних, если эти свойства не указаны явно.
Использование наследования удобно для задания свойств всему документу. В этом случае форматирование применяется к самому внешнему элементу - <body>.
При возникновении противоречий конструкций из разных каскадов применяется правило приоритетов – из всех стилей выбирается тот, который ближе расположен к элементу.
Если одно и то же свойство у элемента задается через атрибут и стиль, то приоритет принадлежит стилю.
2 Свойства каскадных таблиц стилей
2.1 Свойства шрифтов
Стили позволяют эффективно управлять шрифтами, задавая и модифицируя существующие или загружая по Сети уникальные. Для этого используются следующие свойства:
font-family - задает список шрифтов (в порядке уменьшения приоритета), которые должны использоваться для отображения элемента. Используется первый шрифт в списке. Если он не найден, браузер пытается найти второй и т.д. Названия шрифтов, состоящих более чем из одного слова, следует заключать в кавычки.
font-style - задает стиль написания шрифта - прямой (обычный), курсив и косой (сильно наклоненный).
font-variant - задает регистр шрифта.
font-weight - устанавливает толщину шрифта.
font-stretch - задает растянутость шрифта.
font-size - задает размер шрифта.
@font-face - команда CSS, загружающая шрифты по Сети. Если указанный шрифт на компьютере пользователя не обнаружен, то он загружается по Сети.
В примере 2.1 приведен код простой WEB-страницы, а ее внешний вид показан на рисунке 2.1.
|
Пример 2.1. WEB-страница Camp Bear Claw |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HТМL> <НЕAD> <TIТLE>Camp Bear Claw</ТITLE> </HЕАD> <ВОDY> <Н1>Camp Bear Claw</H1> We have the following activities: <H2>Archery</Н2> <Н2>Arts and Crafts</H2> <H2>Horseback Riding</Н2> <Н2>Hiking</H2> <H2>Campfire Song Times</H2> <H2>C++ Programming</H2> </ВОDY> </HТМL>
|
Добавляя свойства font-family (см. пример 2.2а и 2.2б), документ можно отобразить совсем по-другому (рис.2.2).
|
Пример 2.2а. Модифицированный код WEB-страницы Camp Bear Claw |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HТМL> <HЕАD> <ТITLE>Camp Bear Claw</TIТLЕ> <LINК RЕL=STYLESHEET HREF="CampBearClaw.css" TYРЕ="text/css"> </HEАD> <BОDY> <Н1>Camp Bear Claw</H1> We have the following activities: <H2 CLASS="archery">Archery</Н2> <Н2 CLASS="arts">Arts and Crafts</H2> <H2 CLASS="horseback">Horseback Riding</H2> <H2 CLASS="hiking">Hiking</H2> <Н2 CLASS="campfire">Campfire Song Times</H2> <H2 CLASS="Java">Java Programming</Н2> </ВОDY> </НТML>
|
|
Пример 2.2б. Файл таблиц стилей CampBearClaw.css |
|
Н1 { tеxt-align: сеnter; font-family: Hermаn } Н2.arсhery { font-fаmily: Shelman} H2.arts { font-family: Alibi } Н2.horsеback { fоnt-family: Casmira } H2.hiking { font-family: Comic Sans MS } Н2.cаmpfire { fоnt-fаmily: Courier } H2.jаva { fоnt-fаmily: Terminal }
|
