- •Технология css теоретические сведения
- •1. Общие положения
- •2. Встраивание таблиц стилей в документ
- •3. Селекторы (общие положения)
- •4. Селекторы. Параметр class
- •5. Селекторы. Параметр id
- •6. Контекстные селекторы
- •7. Группирование и наследование
- •8. Свойства форматирования шрифтов. Свойство font-family
- •Свойство font-family
- •9. Свойства форматирования шрифтов. Свойство font-style
- •10. Свойства форматирования шрифтов. Свойство font-variant
- •11. Свойства форматирования шрифтов. Свойство font-weight
- •12. Свойства форматирования шрифтов. Свойство font-size
- •13. Свойства форматирования шрифтов. Свойство font
- •14. Свойства форматирования цвета и фона элемента
- •15. Свойства форматирования цвета и фона элемента
- •16. Свойства форматирования текста
- •Если при задании параметров нужно использовать кавычки, то значение свойства style заключается в апострофы.
- •19. Отображение списков
- •20. Отображение списков
- •21. Блоки
- •22. Блоки
- •23. Блоки
- •24. Визуальное форматирование (общие сведения)
- •25. Абсолютное позиционирование
- •26. Абсолютное позиционирование
- •27. Относительное позиционирование
- •28. Относительное позиционирование
- •29. Статическое позиционирование
- •30. Визуальные эффекты
- •31. Визуальные эффекты
- •32. Визуальные эффекты
2. Встраивание таблиц стилей в документ
Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о ее существовании. Для этого ее необходимо связать с HTML-документом.
Существует четыре способа связывания документа и таблицы стилей:
связывание - позволяет использовать одну таблицу стилей для форматирования многих страниц HTML;
внедрение - позволяет задавать все правила таблицы стилей непосредственно в самом документе;
импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере;
встраивание в тэги документа - позволяет изменять форматирование конкретных элементов страницы.
Рассмотрим каждый стиль более подробно.
Связывание позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тэга <LINK>, задаваемого в разделе <HEAD>:
<LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.css">
Здесь тег <LINK> указывает на связь данного документа с другими документами или объектами. Основными параметрами этого тега являются:
HREF - указывает URL-адрес подключаемого документа;
REL - определяет отношение между текущим и другим документом. В данном случае он поясняет, что подключается таблица стилей,
TYPE - указывает тип и параметры присоединенной таблицы стилей.
Связываемый файл содержит набор правил каскадных таблиц стилей, определяющих форматирование документа, и должен иметь расширение CSS.
Связывание позволяет разработчику применить одинаковый набор правил форматирования к группе HTML-документов, что приводит к единообразному отображению различных документов и придает некоторую системность серверу разработчика.
При внедрении таблицы стилей в документ правила, ее составляющие, задаются в стилевом блоке, ограниченном тэгами <STYLE> и </STYLE>, который должен размещаться в разделе заголовка документа:
<STYLE TYPE="text/css">
<!--
B {text-transform:lowercase;}
P {background-color: gray; text-align: center;}
-->
</STYLE>
Обычно браузеры, не поддерживающие какие-либо тэги, игнорируют их, однако их содержимое в том виде, в каком оно задано, что может приводить к ошибкам. Поэтому, как обычно, следует задавать содержимое тэгов, которые потенциально не обрабатываются старыми версиями браузеров, заключенным в тэг комментария <!-- ... -->.
В приведенном выше примере встроенная таблица стилей определяет отображение всех абзацев в документе (элемент P) на сером фоне с центрированными строками. Полужирный текст, определяемый любым элементом в тэге <B> документа, будет отображаться прописными (маленькими) буквами, даже если в документе он задан строчными (большими).
В тэге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url (mystyles.css);
Значением свойства @import является URL-адрес файла таблицы стилей.
Последний способ задания значений свойств таблицы стилей предназначен для оперативного форматирования определенного элемента документа и называется внедрением. Каждый тэг HTML имеет параметр STYLE, в котором можно задать значения его свойств в соответствии с синтаксисом каскадных таблиц стилей. Например, в следующем примере задается форматирование заголовка первого уровня, определяющее его отображение шрифтом красного цвета:
<H1 STYLE="color: red">3аголовок отображается шрифтом красного цвета </Н1>
Если связанные, внедренные и импортируемые таблицы стилей влияют на форматирование всех элементов документа, для которых определены в таблицах правила, то встраивание определений стилей в конкретный тэг влияет на отображение только элемента, определяемого данным тэгом.
Замечание. Рекомендуется избегать встраивания в тэги документа определений форматирования, так как подобная техника лишает разработчика преимуществ задания таблиц стилей в отдельном файле или в головной части документа, где их можно легко и быстро откорректировать в случае необходимости. При форматировании отдельных тэгов придется просмотреть весь документ целиком, что требует достаточно большой и кропотливой работы.
Все способы встраивания таблиц стилей свободно сочетаются в одном документе. Например, можно разработать главную таблицу стилей для всех документов и связывать ее с каждым HTML-документом. Импортируемая или внедряемая таблица стилей будет уточнять форматирование элементов конкретного документа, а встраиваемые в тэг определения форматирования будут уточнять их отображение.