HTML - статьи


Часть I. Что есть CSS - часть 4


ПРИМЕР INLINE STYLE SHEET:

<font style="color:blue; font-size:12pt; font-family:Arial"> Вперед в будущее </font>

Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать только если необходимо задать определенному элементу свой индивидуальный стиль, существующий в классификации CSS и нереализованный в HTML. Или же при необходимости абсолютно позиционировть данный элемент.

Глобальные Таблицы Стилей

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

ПРИМЕР:

<html> <head> <title> Пример Глобальных Таблиц Стилей </title> </head> <STYLE type="text/css"> h1{color:red; font-style:italic; font-size:32px} .blue{color:blue} #bold{font-weight:bold} </STYLE> <body> <h1> Этот заголовок написан крупным красным курсивом </h1> Вот <font class="blue"> это </font> слово - синее, a <font id="bold"> это</font> - жирное. </body> </html>

В данном примере все элементы H1 будут написаны крупным красным курсивым, все элементы с указанным классом BLUE будут синими , а все элементы с идентификатором ID="Bold" станут жирными. Для простоты вместо <STYLE type="text/css"> можно использовать просто тег <STYLE>, что менее граммотно.

Связанные Таблицы Стилей

Связанные таблицы стилей используются для придания нескольким документам одного стиля и xранятся в отдельном файле. Это очень привлекательно, когда нужно выдержать сайт в одном стиле, не утруждая себя составлением таблиц для каждого документа.

ПРИМЕР:

Файл styles.css

<STYLE type="text/css"> body {background:black; font-size:9pt; color:red; font-family:Arial Black} .base{color:blue; font-style:italic} h1 {color:white} #bold {font-weight:bold} </STYLE>

В самих же HTML документах делается ссылка на этот файл при помощи тега <LINK>. Выглядит это так: <LINK rel="STYLESHEET" TYPE="text/css" HREF="путь до файла">

ПРИМЕР:

Файл Index.html

<html> <head> <title> Просто еще один пример </title> </head> <LINK rel="stylesheet" type="text/css" href="styles.css"> <body> Содержание Документа </body> </html>

На этом я заканчиваю первую часть руководства и перехожу ко второй части.




- Начало -  - Назад -  - Вперед -



Книжный магазин