Ошибка: Failed to parse the Currency Converter XML document.
$2 201.59


Ошибка: Failed to parse the Currency Converter XML document.
$913.12


Ошибка: Failed to parse the Currency Converter XML document.
$1 825.14


Добавление CSS

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

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

Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег в заголовке страницы (пример 1).

Пример 1. Подключение таблицы связанных стилей

<br />
    &lt;!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»><br />
    &lt;html><br />

    &lt;head><br />
    &lt;link rel=«stylesheet» type=«text/css» href=«mysite.css»></p>

<p>или</p>

<p>&lt;link rel=«stylesheet» type=«text/css» href=«<a href=»http://www.mysite.ru/main.css«>http://www.mysite.ru/main.css</a>»><br />
    &lt;/head><br />
    &lt;body><br />
    &lt;h1>Hello, world!&lt;/h1><br />
    &lt;/body><br />

    &lt;/html><br />
    

Путь к файлу со стилями может быть как относительным, так и абсолютным, как показано в данном примере.

Достоинства данного способа
Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.

Можно изменять таблицу стилей без модификации веб-страниц.

При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.

Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

Таблицы глобальных стилей

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом (пример 2).

Пример 2. Использование таблицы глобальных стилей
<br />
    &lt;!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»><br />
    &lt;html><br />
    &lt;head><br />
    &lt;style type=«text/css»><br />
    H1 {<br />
    font-size: 120%; /* Размер шрифта */<br />
    font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */<br />
    color: #336 /* Цвет текста */<br />
    }<br />
    &lt;/style><br />
    &lt;/head></p>

<p>&lt;body><br />
    &lt;H1>Hello, world!&lt;/H1><br />
    &lt;/body><br />
    &lt;/html><br />
    

В данном примере показано изменение стиля заголовка
. На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.

Внутренние стили

Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр style , а его атрибуты указываются с помощью языка таблицы стилей (пример 3)...

Пример 3. Использование внутренних стилей

<br />
    &lt;!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»><br />
    &lt;html><br />
    &lt;body><br />
    &lt;H1 style=«font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336»>Hello, world!&lt;/H1><br />
    &lt;/body><br />
    &lt;/html><br />
    

Рекомендуется использовать внутренний стиль для одиночных тегов или отказаться от его использования вообще, поскольку изменение ряда элементов становится проблематичным. Внутренние стили не соответствуют идеологии структурного документа, когда содержимое и его оформление разделены.

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 4 используются сразу два метода добавления таблиц стилей в документ.

Пример 4. Сочетание разных методов подключения стилей

<br />
    &lt;!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»> <br />
    &lt;html> <br />
    &lt;head> <br />
    &lt;style type=«text/css»> <br />
    H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } <br />
    &lt;/style> <br />
    &lt;/head> </p>

<p>&lt;body> <br />
    &lt;H1 style=«font-size: 36px; font-family: Times, serif; color: red;»>Hello, world!&lt;/H1> <br />
    &lt;H1>Hello, world!&lt;/H1> <br />
    &lt;/body> <br />
    &lt;/html><br />
    

В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.

 

Интересное

Печать из Linux на Windows...
1. Предисловие Перед нами стоит задача печати документов на Win-принтере (Canon LBP — 810) из Linux (ALT Master 2.2/2.4). Canon LBP — 810 подключен (USB-подключение) и настроен на Win-компьютере...
Подробнее...
Утилиты Windows XP
Локальные параметры безопасностиПолитика паролей, учетных записей пользователей, назначение прав пользователей, параметры безопасности и другое.Оснастка консоли secpol.mscГрупповая политика...
Подробнее...
SQL в Delphi
Delphi поддерживает статический и динамический SQL. В Delphi имеется объект TQuery, который используется для хранения и выполнения SQL-запросов.Свойство TQuery SQL содержит текст SQL-запроса,...
Подробнее...
Delphi и Flash. Совмещение...
Разве возможно совместить Флэш-ролики и Дельфи-приложения. Раньше я думал что НЕТ. Но теперь я знаю не только, что это возможно, но и знаю как это делается!!! И сейчас я вам расскажу об этом....
Подробнее...
Три прикола в Дельфи!
Сейчас я покажу, как своими руками написать три прикола в DELPHI. Итак, приступим сразу к делу.Прикол первый:Давайте напишем программу, которая будет выводить в какую-то часть экрана кнопку с...
Подробнее...
Хакеры: Приёмы взлома.
Согласно недавнему опросу, проведённому в США, обычные граждане боятся хакеров больше, чем обычных преступников. Интересно, что высокие технологии входят в нашу жизнь очень быстро и становятся её...
Подробнее...
Проверка e-mail адреса на...
Я уже много раз слышал вопрос: «Как проверить e-mail на существование?». Видел на них много ответов, но во всех было сказано, что проверить никак нельзя, предлагались только обходные пути, такие...
Подробнее...
Как появляется файловый...
Почему на жестком диске появляется множество ненужных данных? Причин существует множество, но в своем большинстве ненужные файлы являются результатом некорректной, не правильной работы разных...
Подробнее...
Выпуск iPad Mini – роковая...
Первые слухи о намерениях корпорации Apple выпустить новый компактный планшет, цена которого будет составлять не более $299, по всей видимости, становятся вполне настойчивыми, чтобы применить к...
Подробнее...
CGI Perl FAQ
Что такое CGI и зачем мне все это нужно, если я не умею программировать, да и учиться на старости лет нет особого желания?CGI (Common Gateway Interface) — это шлюз, с помощью которого...
Подробнее...