DataLife Engine > Web-Design > Добавление CSS
Добавление CSS29 января 2008. Разместил: podpole |
|
Таблицы стилей могут быть добавлены на веб-страницу тремя разными способами, которые различаются по своим возможностям. Таблицы связанных стилей Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег в заголовке страницы (пример 1). Пример 1. Подключение таблицы связанных стилей <br /> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /> <html><br /> <head><br /> <link rel="stylesheet" type="text/css" href="mysite.css"></p> <p>или</p> <p><link rel="stylesheet" type="text/css" href="<a href="http://www.mysite.ru/main.css">http://www.mysite.ru/main.css</a>"><br /> </head><br /> <body><br /> <h1>Hello, world!</h1><br /> </body><br /> </html><br /> Путь к файлу со стилями может быть как относительным, так и абсолютным, как показано в данном примере. Достоинства данного способа Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах. Можно изменять таблицу стилей без модификации веб-страниц. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее. Таблицы глобальных стилей Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом (пример 2). Пример 2. Использование таблицы глобальных стилей <br /> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /> <html><br /> <head><br /> <style type="text/css"><br /> H1 {<br /> font-size: 120%; /* Размер шрифта */<br /> font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */<br /> color: #336 /* Цвет текста */<br /> }<br /> </style><br /> </head></p> <p><body><br /> <H1>Hello, world!</H1><br /> </body><br /> </html><br /> В данном примере показано изменение стиля заголовка . На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически. Внутренние стили Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр style , а его атрибуты указываются с помощью языка таблицы стилей (пример 3)... Пример 3. Использование внутренних стилей <br /> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /> <html><br /> <body><br /> <H1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336">Hello, world!</H1><br /> </body><br /> </html><br /> Рекомендуется использовать внутренний стиль для одиночных тегов или отказаться от его использования вообще, поскольку изменение ряда элементов становится проблематичным. Внутренние стили не соответствуют идеологии структурного документа, когда содержимое и его оформление разделены. Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 4 используются сразу два метода добавления таблиц стилей в документ. Пример 4. Сочетание разных методов подключения стилей <br /> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <br /> <html> <br /> <head> <br /> <style type="text/css"> <br /> H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } <br /> </style> <br /> </head> </p> <p><body> <br /> <H1 style="font-size: 36px; font-family: Times, serif; color: red;">Hello, world!</H1> <br /> <H1>Hello, world!</H1> <br /> </body> <br /> </html><br /> В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом. |