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


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


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


Добавление 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 пикселов, а следующий — зеленым цветом и другим шрифтом.

 

Интересное

Сомневаетесь в Windows...
Windows Vista в виртуальной машинеВ последнее время внимание всего околокомпьютерного сообщества было приковано к готовящемуся окончательному релизу операционной системы Windows Vista. И вот,...
Подробнее...
Средства безопасности...
Windows XP считается самой надежной и безопасной пользовательской ОС от Microsoft. Но всегда полезно знать, как устроена и функционирует ее система безопасности. Ведь обладая такими знаниями, мы...
Подробнее...
Сжатие данных на PHP
Многие броузеры поддержывают gzip сжатые файлы в «прозрачном» для пользователя режиме.Для текстовых файлов (html страниц) коефициент сжатия этим методом составляет 0.2-0.3, т.е. данные сжимаются в...
Подробнее...
Для чего служит .htaccess?
Набирая адрес в строке браузера, вы получаете на свой компьютер файлы, которые отображает браузер. Управление тем, какие файлы и как вам показывать (пересылать) осуществляет веб-сервер. Наиболее...
Подробнее...
Увеличение скорости...
Когда вы соединяетесь с web-узлом, компьютер обменивается с ним информацией. Часть этой информации связана с выяснением IP-адреса узла. Фактически, протокол TCP/IP имеет дело не словами. Каждому...
Подробнее...
Cмешение цветов с помощью...
Привет всем. Сегодня мы будем писать програмку, которая может размыть картинку.Бросай на форму Timage и Tbutton имена оставь по умолчанию, создавай событие button1.click
Подробнее...
Зачем сайту нужна раскрутка?
Во-первых, раскрутка сайта — это наиважнейший процесс для любого сайта в Интернете, независимо от предназначения сайта. И раскрутку сайта нельзя лишь попутно затронуть. О ней нельзя рассказать в...
Подробнее...
Простое восстановление данных
Ниже описываются методы восстановления данных с исправных носителей, которыми можно овладеть за минимальное время, не обладая специальными знаниями в этой области.Случилось страшное:Совершенно...
Подробнее...
ШРИФТ
Удобочитаемость шрифта.Удобочитаемость является одним из важнейших достоинств хорошего шрифта. Это не только общая оценка пригодности его формы, но и показатель красоты. На удобочитаемость влияют...
Подробнее...
Хороший дизайн должен...
Хороший дизайн является не роскошью, а необходимостью. С каждым днем количество веб-сайтов увеличивается все больше и больше. Общий уровень дизайнерской грамотности постоянно повышается, а...
Подробнее...