Способы использования CSS
Под методами использованием CSS мы в данном разделе понимаем форму декларирования жанра на HTML-странице и форму связывания изложения жанра отображения элемента разметки с самим этим элементом. Речь идет о том, где и в какой форме автор страницы (либо дизайнер) описывает жанр, и как и в какой форме на него ссылается.
Выходит, различают четыре метода использования жанров:
Тут мы следуем за George Young из Microsoft (Cascading Style Sheets in Internet Explorer 4.0. Microsoft, 1997). Следует подметить, что импорт жанра не поддерживается в браузерах других изготовителей. Впрочем, т.к. патент на CSS1 принадлежит Microsoft, опустить импорт в нашем изложении мы считаем неправильным.
Под переопределением жанра в элементе разметки мы понимаем использование признака STYLE у данного элемента разметки:
<h1 style="font-weight:normal;
font-style:italic;
font-size:10pt;">
Заголовок первого уровня
</h1>
Признак style дозволено применить внутри всякого элемента разметки. Скажем, мы можем через style определить ширину и выравнивание элемента hr(горизонтальное отчеркивание):
<hr style="width:100px;">
Видимо, что не каждые параметры жанра дозволено установить для определенного элемента разметки. О типах элементов и соответсвующих парамерах жанров мы побеседуем в разделе "Представление блочного и строкового элемента".
Тут же следует подметить следующее: стили разработаны в первую очередь для управления отображением текста. Не следует увлекаться жанрами при управлении отображением нетекстовых элементов HTML-разметки.
[ начало страницы ]
Использование элемента STYLE - это стержневой метод внедрения каскадных таблиц жанров в ткань HTML-документа. Помимо управления отображением элементов разметки элемент STYLE разрешает описывать стилевые свойства элементов, которые дозволено изменять при программировании на JavaScript.
Элемент STYLE дозволяет определить жанр отображения для:
К сожалению, работа с селекторами в браузерах разных изготовителей может преподнести разного рода сюрпризы. Исключительно это касается работы с селектором ID. Будем считать верной интерпретацию Microsoft как держателя патента на спецификацию CSS.
Представление селектора, использование селекторов и формальный синтаксис CSS мы обсудим в разделах "Синтаксис" и "Наследование и переопределение".
Типовые элементы разметки описываются в элементе STYLE дальнейшим методом:
<head>
<style>
p {color:darkred;text-align:justify;font-size:8pt;}
</style>
</head>
<body>
...
<p>
Данный параграф мы используем в качестве примера использования изложения жанра для стандартного элемента HTML-разметки.
</p>
...
</body>
Сейчас все параграфы документа будут отображаться жанром из элемента STYLE, если только жанр не будет переопределен каким-нибудь методом. В STYLE дозволено определить жанр всякого элемента разметки.
[ начало страницы ]
Ссылка на изложение жанра, расположенное за пределами документа, осуществляется при помощи элемента LINK, тот, что размещают в элементе HEAD. Внешнее изложение может представлять из себя файл, оглавление которого - изложение жанров. Изложение жанров в этом файле будет по синтаксису в точности совпадать с оглавлением элемента STYLE.
Ниже приведен пример ссылки на внешнее изложение жанров:
<link type="text/css" rel="stylesheet" href="http://kuku.ru/my_css.css">
Значимыми тут являются значения признаков rel и type. Rel обязан иметь значение "stylesheet". Type может принимать значения: "text/css" либо "text/javascript". 2-й тип изложения жанров введен Netscape. Его мы в данном учебном курсе не обговариваем.
Признак href задает многофункциональный локатор источника (URL) для внешнего файла изложения жанров. Это может быть ссылка на файл с любым именем, а не только на файл с растяжением *.css.
[ начало страницы ]
Импорт описателей жанров - это в некотором смысле соперник описанному выше указанию на внешний описатель стиля.
Импортировать жанр дозволено либо вовнутрь элемента STYLE, либо вовнутрь внешнего файла, тот, что представляет собой описатель жанра. Оператор импорта жанра должен предшествовать каждым прочим описателям жанров:
<style>
@import:url(http://kuku.ru/style.css)
a {color:cyan;text-decoration:underline;}
</style>
Импортируемый жанр дозволено переопределить либо через описатель элемента в STYLE, либо через признак элемента style.