Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
ІНТЕРНЕТ В БІЗНЕСІ.docx
Скачиваний:
29
Добавлен:
20.12.2018
Размер:
5.4 Mб
Скачать

3.6.1 Встраиваемые стили

Встраиваемые (inline) стили определяются в составе HTML-дескриптора и оказывают влияние только на этот дескриптор. Использование встраиваемых стилей предоставляет разработчику максимальный уровень контроля над особенностями отображения Web-страницы. Разработчик может задавать отдельные стили для каждого абзаца, заголовка, горизонтальной линии, ячейки таблицы и других элементов. Ниже приведен фрагмент кода, в котором встраиваемый стиль задается для дескриптора абзаца.

<p style="font: 13pt verdana"> Текст цього абзацу відображатиметься шрифтом verdana розміром 13 пунктів.</р>

3.6.2 Включаемые стили

Включаемые стили, которые также называют внутренними стилями, применяются ко всей Web-странице. Дескриптор <style> помещается в заголовок HTML-документа Стили определяются для различных типов HTML-документов. Так, например, вы можете задать отображение всех элементов <hl> серым цветом с использованием шрифта Verdana размером 14 пунктов (соответствующий код приведен ниже) Стиль будет применен к каждому элементу <hl> в составе данного документа. Если вы захотите, чтобы все заголовки первого уровня отображались другим цветом, вам достаточно изменить соответствующее свойство в определении стиля.

Как видно из приведенного ниже кода, внешний вид HTML-документа, в котором используются листы стилей, несколько отличается от документа, который соответствует традиционному стандарту HTML. В данном примере заданы цвет фона, цвет текста, шрифт для отображения заголовков H1, а также стили абзацев и гипертекстовых ссылок Заметьте, что для заголовка первого уровня <hl> указаны начертание и размер шрифта в пунктах. Это одна из дополнительных возможностей, предоставляемых CSS. Вы можете задавать размер не только в пунктах, но и в пикселях (рх), процентах (75 percent) и сантиметрах (cm).

<html> <head>

<title>Использование включаемых листов стилей. Пример 1</title>

<style>

<!--

body{background:#FFFFFF;color:#000000;}

h1{font: 14pt verdana;color: #CCCCCC;}

P {font: 13pt times;}

A {color: #FF0000; text-decoration: none;}

-->

</style>

</head>

<body>

<h1>B. Шекспир. Перевод С. Маршака</h1>

Твоя душа противится свиданьям.<br>

Но ты скажи ей, как меня зовут.<br>

Меня прозвали <a href ="william.html ">"волей"</a>

иль <a href ="william.html">"желаньем"</a><br>

А воле есть в любой душе приют.<br><br>

Она твоей души наполнит недра<br>

Собой одной и множествами <a href =" william.html" > воль</a>.<br>

А в тех делах, где счет ведется щедро,<br>

Число "один" - не более чем ноль. <br><br>

</body>

</html>

3.6.3 Связываемые стили

Связываемые, или внешние, стили реализуют механизм для создания стилей, которые применяются ко всему Web-узлу. Создайте с помощью любого текстового редактора документ, содержащий только определения стилей, и сохраните его в файле с расширением *.css. Эти стили можно с одинаковым успехом применить как к одной, так и к тысячам Web-страниц. Добавьте ссылку на созданный файл стилей в раздел заголовка HTML-документа, в результате чего стили будут использоваться при отображении элементов этого документа. Теперь, если вы внесете изменения в файл стилей, эти изменения отразятся в каждом документе, который был связан с этим файлом. Раздел заголовка, содержащий ссылку на файл стилей, выглядит следующим образом:

<html>

<head>

<title>Linked Style Sheet Example</title>

<link rel="stylesheet" href="mystyle_l.css" type="text/css">

</head>

<body>