Виды таблиц стилей

Существует три вида таблиц стилей: внутренние таблицы стилей, глобальные таблицы стилей и связанные таблицы стилей. Внутренние таблицы стилей (Inline Style Sheets) мало чем отличаются от HTML тегов. Глобальные (Global Style Sheets) определяют стиль элементов во всем документе. Связанные (Linked Style Sheets) могут быть использованы для нескольких документов и хранятся во внешнем файле. Подробнее об этом написано ниже.

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

<font color="blue" size="3" face="Arial">Привет</font>

<font style="color:blue;font-size:12pt;font-family:Arial">Привет</font>

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

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

<html>

<head>

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

</head>

<style>

h1{color:red;font-style:italic;font-size:32px}

.blue{color:blue}

#bold{font-weight:bold}

</style>

<body>

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

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

</body>

</html>

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

Связанные таблицы стилей используются для придания нескольким документам одного стиля. Хранятся они в отдельном файле. Пример (файл default.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}

Это очень похоже на глобальные стили. Так оно и есть. Все что относилось к глобальным стилям справедливо и здесь. В самих же документах делается ссылка на этот файл при помощи тега <link>. Выглядит это так:

НаПример:

File [default.css ]

<style>

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

h1 {color:white}

a:link,a:visited,a:active {color:green}

a:hover {font-weight:bild}

</style>

File [ index.html ]

<html>

<head>

<title>Пример</title>

</head>

<body>

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

</body>

</html>

<== предыдущая лекция	\|	следующая лекция ==>
Структура и правила	\|	Font-family

Поделиться с друзьями:

Дата добавления: 2013-12-12; Просмотров: 776; Нарушение авторских прав?; Мы поможем в написании вашей работы!

Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление

Генерация страницы за: 0.014 сек.