2014-09-04
536
Существуют четыре варианта использования листов стилей в HTML-документе: встраивание, подключение, связывание и импорт.
Встраиваемые стили определяются в HTML-теге и оказывают влияние только на этот тег.
Подключаемые (внутренние) стили применяются ко всей веб-странице. Для этого служит тег <STYLE>, помещаемый в заголовок HTML-документа.
Связываемые (внешние) стили применяются к документам всего web-сайта.
Импортируемые стили используют импорт в сочетании с другими методами определения стилей. В листинге 2.6 приведен пример импорта внешних стилей.
Листинг 2.6 Импорт внешних стилей.
<HTML><HEAD><TITLE> Пример импорта внешних стилей </TITLE>
<style type=”text/css”>
<!-
@import C:\PRIMER\Листинг.css
H3 {color: maroon; font-family: courier}
->
</style>
<HEAD><BODY>
<H3> Современные технологии форматирования </H3>
<p> Импорт внешних стилей <BR>
позволяет сократить <BR>
размеры HTML-файлов<BR>
</P></BODY></HTML>
Внешний файл для веб-страницы представлен в листинге 2.7.
Листинг 2.7 Внешний файл Листнг.css.
|
|
|
<STYLE type=”text/css”>
H3 {color:crimson font-family:Arial Black}
P {background:cornsilk; font-family: times}
</STYLE>
В примере браузер сначала импортирует правила, содержащиеся в файле Листинг.css, а затем формирует набор правил для веб-страницы /5/.
Свойства CSS
Свойства CSS позволяют управлять фоном, отображением текста, шрифтами, обрамлением, списками, позиционированием, определять границы, размеры области заполнения, отображение строк и тестовых блоков.
Свойства CSS для управления фоном позволяют разработчику задавать цвет фона и фоновые изображения, а также управлять размещением фоновых изображений. Для создания фона документа используются свойства:
- background-color – устанавливает цвет фона для выбранных элементов. Например,.highlighted {background-color: yellow}.
- background-image – задает фоновое изображение для выбранных элементов. Например,.flowery {background-image: url(flowers.gif);}.
- background-position – позиционирует фоновое изображение.
- background-repeat – определяет, должно ли повторяться фоновое изображение для указанного элемента.
- background-attachment – указывает, должно ли фоновое изображение перемещаться вместе с элементом или оставаться фиксированным. Например, BODY {background-attachment: fixed} /5/.
