$950.36


$750.33


$53.86


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

 

Интересное

FAQ по разделу CGI интерфейс
Как мне сделать аутентификацию на Перле, а не средствами веб-сервера?:Для того, чтобы браузер выдал запрос логина и пароля, скрипт должен выдать следующие заголовки: print «WWW-Authenticate:...
Подробнее...
Проблемы программы...
Illustrator — странная программа, она не похожа на другие продукты Adobe. Порой складывается впечатление, что ее выпускает не Adobe столько проблем она делает. С самой первой из них пользователь...
Подробнее...
Служба Доменных Имен
Служба Доменных Имен предназначена для того, чтобы машины, работающие в Internet, могли по доменному имени узнать IP-адрес нужной им машины, а также некоторую другую информацию; а по IP-номеру...
Подробнее...
Сквозная навигация
Сквозная навигация — это система связей (гиперссылок), облегчающих движение пользователя по сайту. Речь идёт о максимально возможном переплетении данных. Кроме того, наличие такой связи...
Подробнее...
Удаление неиспользуемых...
Известно ли вам, что до тех пор, пока не удалить драйвер в Windows XP, он будет впустую расходовать системные ресурсы? Ниже дана пошаговая инструкция, которая поможет увидеть и удалить ненужные...
Подробнее...
Компьютер на замке
Хакеры, спамеры, недобросовестные сотрудники и коллеги... Плохишам и просто праздным любопытным вход в компьютер должен быть заказан. Как и важным данным — выход оттуда.Вместе с...
Подробнее...
Red Hat и USB-устройства
Цель этой статьи — заставить работать мою USB мышь, USB камеру и USB жесткий диск с Linux«ом.Мой Компьютер с Emperor Linux и USBЯ начал использовать Red Hat 7.3. Хотя уже прошло много времени, и...
Подробнее...
Счетчик посещений на Delphi
Счетчики предназначены для учета количества посетителей на Ваш сайт. Кроме этого на счетчик можно возложить операции ведения статистики, учет хостов откуда пришли посетители и т.д.Данный пример...
Подробнее...
Стиль против Дизайна
От Дизайна к СтилюМой отец был полупрофессиональным художником (Sunday painter), книжки с его иллюстрациями сыграли для меня в детстве формирующую роль. Как и многие другие дети, я зачаровывался...
Подробнее...
Serv-U: Установка FTP-сервера
Хочу установить на своей машине в локальной сети FTP-сервер, но не выбрал программу. Какую именно вы посоветуете и каким образом ее нужно настроить?Выбор программы Спрос рождает предложение,...
Подробнее...