Работа с листами стилей css
Форматирование произвольного фрагмента Вэб-страницы
Более подробно табицы стилей рассмотрены в соответствующем разделе - CSS.
Внешний лист стилей css
Внешний лист стилей позволяет сконцентрировать информацию о форматировании сайта в одном файле. Для того, чтобы сослаться на внешний лист стилей css надо в теле <HEAD> после заголовка <TITLE> </TITLE> прописать следующую строчку
<link rel="stylesheet" href="../style.css" type="text/css">
Атрибут href указывает путь к файлу внешнего листа стилей. Данную строку надо прописывать в тексте всех Вэб-страниц, где надо использовать внешний лист стилей.
Таким образом, изменения, вносимые в файл style.css, сразу отображаются на всех страницах, ссылающихся на этот файл.
Частное определение стилей
Если надо применить какой-либо стиль частным образом, по отношению к отдельному экземпляру дескриптора, то для этого надо воспользоваться атрибутом STYLE. Такой прием позволяет воспользоваться всеми преимуществами, предоставляемыми стилями, избегая обязанности создавать листы стилей. Частное использование стилей можно пользовать даже в том случае, если страница уже содержит внутренний или ссылку на внешний лист стилей, т.к. частный стиль имеет наивысший приоритет.
Пример:
|
HTML-код: <p>Стандартный абзац</p>
<p style="font-style:italic; color:red; text-align:right">Абзац с применением частного стиля</p>
|
Отображение в браузере: Стандартный абзац Абзац с применением частного стиля |
Атрибут ID
Если надо применить стиль к отдельному элементу Вэб-страницы, то надо воспользоваться атрибутом ID.
Для этого надо нужному тэгу элемента страницы назначить идентификатор. После этого можно определить во внутреннем или внешнем листе стилей свойства данного элемента. Заданные признаки форматирования будут установлены только для элемента, отмеченного указанным идентификатором.
<STYLE>
P#ital{font-style:italic}
<STYLE>
Использование атрибута ID для задания стилей предпочтительней перед частным применением стилей, т.к. позволяет разместить описание стилей более компактно.
Пример:
|
HTML-код: <p ID="ital">Абзац с применением атрибута ID</p>
|
Отображение в браузере: Абзац с применением атрибута ID |
Класс стилей
В случае, когда необходимо изменить стиль элементов страницы, описываемых определенным дескриптором, надо создать класс для этого дескриптора. Например, некоторые абзацы мы хотим выделять курсивом. Тогда надо сделать соответствующий класс (скажем P.ital) и пользоваться им в нужном месте.
Чтобы создать класс, надо указать требуемый дескриптор и задать имя класса в тексте внутреннего или внешнего листа стилей.
<STYLE>
P.ital{font-style:italic}
<STYLE>
В тексте Вэб-страницы, где надо использовать нужный стиль, надо сделать ссылку на созданный класс. Элементы, относящиеся к классу, унаследуют как свойства, заданные в определении класса, так и признаки форматирования, указанные в листе стилей.
Пример:
|
HTML-код: <p class="ital">Абзац с применением класса стиля</p>
|
Отображение в браузере: Абзац с применением класса стиля |
Можно создать базовый класс. Такой класс можно применять по отношению к нескольким дескрипторам. Определяя базовый класс, надо опустить наименование дескриптора и использовать только символ точки и имя класса.
<STYLE>
.ital{font-style:italic}
<STYLE>
Форматирование произвольного фрагмента Вэб-страницы
Если надо применить стиль к произвольному фрагменту Вэб-страницы, то для этого используется тэг <DIV>. При этом форматируется фрагмент данных, независимо от принадлежности определенным дескрипторам.
Сначала надо задать определение соответствующего стиля <DIV> в тексте листа стилей - ввести служебное слово <DIV>, точку, наименование стиля и список свойств форматирования. После этого надо пометить тэгом <DIV> те области страницы, которые нужно отформатировать.
Следует иметь в виду, что те участки страницы, которые отформатированы с помощью тэга <DIV>, обрамляются пустыми строками. Поэтому помещать этот дескриптор внутри абзаца не рекомендуется, т.к. в этом случае абзац будет разбит на две части.
<STYLE>
DIV.ital{font-style:italic}
<STYLE>
...
<DIV class="ital">
Фрагмент Вэб-страницы
</DIV>
