Помещение таблиц стилей в отдельные файлы упрощает их повторное использование. Иногда полезно включать инструкции по представлению в документ, к которому они применяются, в начало документа или в атрибуты элементов в теле документа.
Каскады
Каскад определяет упорядоченную последовательность таблиц стилей, в которой правила более поздних таблиц имеют приоритет над более ранними. Например, в файле prog.css заголовки Н1, Н2 красного цвета и выровнены по центру, значит любой документ, имеющий ссылку на prog.css будет иметь заголовки такого же цвета и выравнивания, если только в одном из этих документов в разделе STYLE не будет сказано что-нибудь другое.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40"><HTML> <HEAD> <TITLE>Пример использования CSS</TITLE> <LINK href="prog.css" rel="stylesheet" type="text/css"> <STYLE TYPE='text/css'> H1 {color:blue; text-align: right;} </STYLE> </HEAD> <BODY> <H1>Этот заголовок будет синего цвета и выровнен по правому краю.</H1> Несмотря на то, что документ ссылается на файл prog.css, где для Н1 задан красный цвет и выравнивание по центру. </BODY></HTML>
Мы убедились, что чем ближе к документу и даже к тегу, тем больший приоритет имеют таблицы стилей. Самый высокий приоритет — у тега.
Синтаксис таблиц стилей
CSS — это язык, в котором параметры оформления документа выражаются с помощью правил. Основной формат правила CSS выглядит так: selector {propeties}
Селектор определяет правило и управляет его применением. Свойства (propeties) определяют, как будут выглядеть элементы Web-страницы, определенные правилом. Имеется три основных вида селекторов.
§ Селектор типа переопределяет действие (определенное браузером пользователя) стандартных тегов HTML, таких как <Н1> и <Р>. Стилевая таблица, показанная в примере 40, показывает, например, что заголовок Н1 будет изображен браузером синего цвета. CSS распознает Н1 как селектор, поскольку он начинается с буквы. Селекторы типа, как и HTML-теги, не обращают внимание на регистр. Зато каждый параграф Р должен иметь закрывающий тег (в HTML это было необязательно).
§ Селектор классане связан со специфическим HTML-тегом; Вы можете применить этот селектор к любому тегу, написав CLASS=selector в пределах действия тега. Мы можем определить стиль, например, так:
Эта стилевая таблица определяет селектор класса, называемый .warning, а HTML-код применяет этот класс к одному параграфу. Если имя начинается с точки — это определяемые пользователем имена классов. Вам следует опустить точку при использовании класса (как показано выше), если Вы используете выражение CLASS=attribute внутри HTML-тега.
Код CLASS="warning" с тегом <Р> отображает весь текст параграфа шрифтом без засечек Arial Narrow высотой 10 точек красным цветом. Селектор класса лучше всегда писать строчными буквами.
§ ID-селектор (селектор-идентификатор) определяет свойства отдельных элементов на странице. Перед именем селектора ставится знак #, если Вы определяете правило для стиля, а если определяется ID, то этот знак не ставится. В следующем примере атрибут ID="tulip" определяет параграф в последней строке, а селектор, определенный во второй строке, определяет два свойства CSS для этого параграфа. Пример:
<STYLE > <!-- #tulip {color: yellow; font-size:20pt;} --> </STYLE> </HEAD> <BODY> <P id="tulip">Здесь что-то для Вас есть!</P>
Как и с селекторами класса, лучше считать ID-селекторы чувствительными к регистру.
Синтаксис CSS несколько отличается от HTML.
§ Теги <STYLE> и </STYLE> дают команду браузеру прекратить интерпретацию HTML и начать интерпретировать таблицы стилей.
§ <!-- и --!> это теги комментариев в HTML. Если браузер старой версии не может интерпретировать <STYLE> и </STYLE> теги, то он пропустит все, что заключено в комментарии.
§ Имена стилей не имеют параметров; CSS "знает", что .warning — имя стиля, расположенного в данной позиции.
§ Параметры стилей заключаются в {фигурные скобки}.
§ Параметры отделяются друг от друга точкой с запятой, а не пробелом.
§ В качестве оператора присвоения используется двоеточие вместо знака равенства.
Таблицы стилей понимают разные единицы измерения для различных устройств: px для пикселов, pt для точек, in и cm для дюймов и сантиметров, % для процентов и т.д.
В таблице ниже приведен небольшой список наиболее общих свойств CSS.
Свойство
Описание
Типичное значение
font-family
Шрифт, используемый для отображения текста
Arial, sans-serif
font-size
Размер шрифта
24pt
font-style
Начертание шрифта (прямой или наклонный)
italic
font-weight
Толщина шрифта для отображения на экране. Может использовать любое значение от 0 до 999 или ключевые слова lighter, normal, bold, bolder. 400=normal, 700=bold
bold
color
Цвет, которым отображается объект на экране.
rgb(255,204,204)
background-color
Цвет фона объекта
#FFFFCC
margin
Пространство, зарезервированное между содержанием и его обрамлением (рамкой).
3 px
border-width
Толщина рамки. Если равна 0, то рамка невидима.
1 px
border-style
Тип рамки, обрамляющей объект. Может принимать значения none, dotter, dashed, solid, double, groove, ridle, inset, outset.
solid
padding
Отступ в первой строке параграфа.
4 px
Фреймы
Фреймы позволяют особым образом делить страницу на различные области просмотра, каждая из которых представляет собой HTML-документ. Определение содержимого фрейма начинается с парного тега <frameset>. В его области действия с помощью тега <frame> задаются другие фреймы. Наиболее важным атрибутом тега <frame> является scr, который задает URL документа, помещаемого во фрейм.
Приведем простой пример использования фреймов. Пусть окно браузера состоит из трех фреймов. Левую часть экрана занимает документ, составляющий 1/5 его часть. Правая часть экрана, которая составляет 4/5 окна браузера, разбита по вертикали на две равные части. Каждой из трех частей окна браузера соответствует свой HTML-документ (FrameLeftSide.litm, FrameUp.htm и FrameDown.htm), в которых просто отображаются соответствующие пояснительные надписи.
Левый фрейм
Верхний фрейм
Нижний фрейм
<HTML>
<HEAD><TITLE>Фреймы</TITLE></HEAD>
<FRAMESET cols="*,4*">
<FRAME frameborder="yes" src="FrameLeftSide.htm">
<FRAMESET rows="50%, 50%">
<FRAME frameborder="yes" src="FrameUp.htm">
<FRAME frameborder="yes" src="FrameDown.htm">
</FRAMESET>
</FRAMESET>
</HTML>
Примечание
Документ, в котором создаются фреймы, не должен содержать парные теги <body>. Этот документ просто организует структуру экрана, а не его содержимое. Содержимое же фреймов создается обычными HTML-документами, которые, в свою очередь, содержат теги <body>.
Синтаксис тега <frameset>:
<FRAMESET
BORDER=pixels
BORDERCOLOR=color
CLASS=classname
COL=col-widths
FRAMEBORDER=NO|YES|0|1
FRAMESPACING=spacing
ID=value
LANG=language
LANGUAGE= JAVASCRIPT|JSCRIPT|VBSCRIPT|VBS
ROWS=row-heights>
§ cols и rows – задают количество частей, на которые разбивается окно браузера по горизонтали и вертикали, а также их размеры. Является списком значений в пикселах, процентах или относительных единицах (в этом случае используется знак *), разделенных запятыми. Количество фреймов определяется числом этих значений. Например, cols="70%, 30%" (в процентах) или cols="7*,3*" (в относительных величинах) разбивает экран по горизонтали на два фрейма, первый из которых составляет 70%, а второй – 30% окна браузера. Если используются оба атрибута cols и rows, то окно браузера покрывается прямоугольной сеткой фреймов. В относительных величинах вместо 1* допустимо использование только *. Таким образом, следующие две записи равносильны: ROWS="2*, *" И ROWS="2*,1*".
§ border, bordercolor, frameborder – задают толщину, цвет рамки фрейма, а также ее видимость.
§ FRAMESPACING – расстояние между кадрами в пикселах.
Синтаксис тега <frame>:
<FRAME
BORDERCOLOR=color
CLASS=classname
DATAFLD= colname
DATASRC= #ID
FRAMEBORDER=NO|YES|0|1
HEIGHT=n
LANG=language
LANGUAGE=JAVASCRIPT|JSCRIPT|VBSCRIPT|VBS
MARGINHEIGHT=pixels
MARGINWIDTH=pixels
NAME=window_name|_blank|_parent|_self|_top
NORESIZE=NORESIZE|RESIZE
SCROLLING=AUTO|NO|YES
SRC=url
TITLE=text
WIDTH=n
event=script>
§ marginheight, marginwidth – ширина в пикселах внутренней границы фрейма.
§ noresize – пользователь не сможет изменять размер фрейма.
§ scrolling – управляет отображением полосы прокрутки.
