Поделиться
Часы 39-40 Элементы стилей. Синтаксис стилей (3).doc
2.8 Элементы стилей. Синтаксис стилей.
Каскадные (многоуровневые)
таблицы стилей - cascading style sheets (CSS) - это мощный
стандарт на основе текстового формата, определяющий представление данных в
броузере.
Если формат HTML предоставляет информацию о составе документа, то таблицы
стилей сообщают как он должен выглядеть. Таким образом каскадные таблицы стилей
дают возможность хранить содержимое отдельно от его представления.
Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля
и расположение объектов на странице.
CSS разрабатывались так, чтобы обеспечить больший уровень контроля над
размещением текста и графики.
Каскадные таблицы стилей обеспечивают должный уровень единства оформления,
организации и контроля во время разработки узла, который является недостижимым
с помощью одного только HTML.
CSS предполагает 3 типа таблиц стилей - встроенные, внедренные (внутренние) и связанные (внешние).
Впервые идея форматирования HTML-документов с помощью CSS была рекомендована Консорциумом W3C в 1996 году. Эта рекомендация, которая была обновлена в 1998 году, используется Web-разработчиками и по сей день.
Что значит слово "каскадный"?
Термин "каскадный" означает, что в одной странице HTML могут
использоваться разные стили. Броузер, поддерживающий таблицы стилей, будет
следовать их порядку (как по каскаду), интерпретируя информацию стилей.
Это означает, что вы можете использовать все три типа стилей, и броузер будет
интерпретировать сначала связанные, затем внедренные и, наконец, встроенные
стили. Даже если ко всему узлу будут применены образцы стилей, можно будет
управлять отдельными аспектами страниц с помощью внедренных стилей, а
отдельными областями внутри этих страниц - с помощью встроенных стилей.
Другой аспект каскадирования - наследование
(inheritance). Наследование означает, что если не указано иное, то
конкретный стиль будет унаследован другими элементами страницы HTML. Например,
если вы примените определенный цвет текста в теге <р>, то все теги
внутри этого абзаца наследуют этот цвет, если не оговорено иное.
Методы и синтаксис
Существует ряд методов, с помощью которых таблицы стилей могут применяться к документу HTML. Синтаксис соответствует реальной структуре информации, содержащейся внутри таблицы стиля.
Методы
Существует три метода для применения таблицы стилей к документу HTML:
Встроенный (Inline). Этот метод позволяет взять любой тег HTML и добавить к нему стиль. Использование встроенного метода предоставляет максимальный контроль над всеми свойствами Web-страницы. Предположим, вы хотите задать внешний вид отдельного абзаца. Вы можете просто добавить атрибут style к тегу абзаца, и броузер отобразит этот абзац с помощью параметров стиля, добавленного в код.
Внедренный (Embedded). Внедрение позволяет контролировать всю страницу HTML. При использовании тега <style>, помещенного внутри раздела <head> страницы HTML, в код вставляются детализированные атрибуты стиля, которые будут применяться ко всей странице.
Связанный (Linked или External). Связанная таблица стилей - мощный инструмент, который позволяет создавать образцы стилей (master styles), которые можно затем применять ко всему узлу. Основной документ таблицы стилей (расширение .css) создается Web-дизайнером. Этот документ содержит стили, которые будут едиными для всего Web-узла (неважно, содержит одну страницу или тысячи страниц). Любая страница, связанная с этим документом, будет использовать указанные стили.
Синтаксис таблицы стилей
Таблицы стилей строятся в
соответствии с определенным порядком (синтаксисом), в противном случае они не
могут нормально работать.
Синтаксис всех методов, используемых для применения стилей к документа HTML,
практически одинаков. Таблицы стилей составляются из определенных частей. Эти
части включают следующие элементы:
Указатель (Selector). Указатель является элементом, к которому будут применяться назначаемые вами атрибуты. Это может быть просто тег типа заголовка (H1) или абзаца (Р). Таблицы стилей позволяют использовать различные объекты, включая классы, которые будут кратко обсуждаться далее.
Свойство (Property). Свойство определяет указатель. Например, если в качестве указателя выбран абзац, вы можете включить свойства, определяющие этот указатель. В свойства входят такие элементы, как поля, шрифты и фоновые изображения. В таблицах стилей существует много свойств, которые можно использовать для того, чтобы определить указатель.
Значение (Value). Значения определяют свойства. Предположим, что у вас есть заголовок первого уровня H1(указатель) и вы включаете свойство type family (семейство шрифта). Шрифт, который на самом деле будет применен к указанному фрагменту, задается значением этого свойства.
Описание (Declaration). Свойства и значения объединяются, образуя описание.
Строка (Rule). Указатель и описание образуют строку
|
selector + declaration = rule |
||
|
Р |
{font-family: |
helvetica;} |
|
| |
| |
| |
|
selector |
property |
value |
|
| |
| |
|
|
------------------------------ |
||
|
declaration |
||
Определение правил CSS
Итак, какскадная таблица стилей - это набор правил форматирования тегов HTML. Например, для того, чтобы цвет фона Web-страницы сделать черным, необходимо объявить следующее правило форматирования:
body{background:black}
Будьте внимательны! По умолчанию цвет шрифта - черный! Не следует претендовать на лавры Малевича! Ваш "Черный квадрат" Эрмитаж не купит!
В данном случае объявлено правило форматирования тега body, а именно - свойству стиля background присвоено значение black (черный). В результате применения этого правилацвет фона всего документа изменится на черный.
Обратите внимание: в таблице стилей теги HTML не заключаются в круглые скобки.
Свойства CSS должны
находиться в фигурных скобках.
Для каждого тега HTML можно указать не одно, а несколько свойств стиля.
Изменим с помощью CSS не только цвет фона Web-страницы, но и цвет шрифта (на белый).
body{background:black;color:white}
Формат самого правила не имеет значения, главное - правило должно читаться удобно и легко. Например, вышеприведенное правило можно записать и так:
body{
background:black;
color:white}
Одно и то же правило сстиля можно применить сразу к нескольким различным тегам HTML-страницы. Например:
body,td,h1{
background:black;
color:white}
Отдохнем - посмотрим как это выглядит на экране!
Встроенный стиль
Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом:
<P style="font: 12pt Courier New"> The text in this line will
display as 12 point text using the Courier New font.
</P>
Или:
<p style="font: 12pt Arial">
The text in this line will display as 18 point text using the
Arial font.
</p>
Посмотрим на результат:
The text in this line will display as 12 point text using the Courier New font.
The text in this line will display as 18 point text using the Arial font.
Mожно добавлять встроенный
стиль в любой тег HTML, в котором эта операция будет иметь смысл. Среди таких
тегов можно назвать абзацы, заголовки, горизонтальные линии, якоря и ячейки
таблиц. Ко всем этим элементам логично применять встроенные стили.
Существуют два тега, которые помогают применять встроенные стили к разделам
страницы. Это теги <div> (division - раздел) и <span>
(промежуток).
Эти теги определяют диапазон текста, так что все, находящееся между ними, будет
оформлено с помощью нужного стиля. Единственное различие
между <div> и <span> состоит в том,
что <div> создает принудительный разрыв строки,
a <span> - нет.
Следовательно, нужно использовать <span> для изменения стиля
любой части текста, меньшей абзаца.
Вот пример работы тега <div>:
<div style="font-family: Garamond; font-size: 18 pt;>"AII of the
text within this section is 18 point Garamond.
AII of the text within this section is 18 point Garamond.
и тега <span>:
<span style="color:#ff3300;"> This text appears in the color red,
with no line break after the closing span tag </span> and the rest of
the text.
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
