И снова основы CSS. Chapter I. Библиотека I2R. Рассматриваются внутренние (inline), глобальные (global) стили и связанные таблицы стилей (Linked Style Sheets).

Chapter I >> What Is Css

[3] Inline Style Sheets

Как уже говорилось, использование Внутрених стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помоши атрибута style в HTML теге.

HTML EXAMPLE: <font color="blue" size="3" face="Arial">Hello World!</font>

RESULT:Hello World!


INLINE STYLE SHEET EXAMPLE:<font style="color:blue;font-size:12pt;font-family:Arial">Hello World</font>

RESULT:Hello World!

Как можно заметить, код Inline Style Sheet Example получился больше чем HTML Example. Поэтому иногда разумнее использовать обычные HTML теги

[4] Global Style Sheets

Глобальные стили задают вид элементов всего документа. Для этого используется тег <STYLE>. Он размещается в заголовке документа.

EXAMPLE:

<html>

<head> <title> Example Of Global Style Sheets </title>

</head>

<style>

h1

.blue

#bold

</style>

<body>

<h1> Этот заголовок написан крупным красным курсивом 

Вот <font class="blue"> это </font> слово - синие, a <font id="bold"> это</font> -- жирное!!!

</body>

</html>

В данном примере все элементы H1 будут написаны крупным красным курсивым, все элементы с указанным классом BLUE будут синими , а а все элементы с индификатором ID="Bold" станут жирными.

[5] Linked Style Sheets

Связанные таблицы стилей используются для придания нескольким документам одного стиля. Хронятся они в отдельном файле. Пример (файл styles.css):


<style>

body {background:black;font-size:9pt;color:red;font-family:Arial Black}

.base

h1 

#bold

Как видите, это очень похоже на Global Styles Sheets. Так оно и есть. Все что относилось к Глобальным стилям справедливо и здесь. В самих же документах делается ссылка на этот файл при помощи тега <link>. Выглядит это так: <link REL="STYLESHEET" TYPE="text/css" HREF="путь до файла">

EXAMPLE:

File [ styles.css ]

<style>

body 

h1 

a:link,a:visited,a:active 

a:hover 

</style>


File [ Index.html ]

<html>

<head>

<title> Example </title>

</head>

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

<body>

[ Содержание Документа ]

</body>

</html>

На этом я заканчиваю Chapter I и перехожу к Chapter II.

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...