 H T M LC S SС к р и п т ыJAVA скриптыРаскрутка СайтаГотовые шаблоны сайтовП р о г р а м м ы |
| Поситите наш проект про мобильные телефоны http://samsu.narod.ru |
Добавление CSSТаблицы стилей могут быть добавлены на страницу тремя разными способами,
которые различаются по своим возможностям. Таблицы связанных стилей (linked style sheet)Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег LINK в заголовке страницы.Пример 1. Подключение таблицы связанных стилей <html>
<head> <link rel="stylesheet" type="text/css" href=mysite.css> или <link rel="stylesheet" type="text/css" href=http://www.mysite.ru/main.css> </head> <body> <h1>Hello, world!</h1> </body> </html> Достоинства данного способа:
Таблицы глобальных стилей (global style sheet)Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом STYLE. Пример 2. Использование таблицы глобальных стилей <html> <head> <style type="text/css"> H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366; } </style> </head> <body> В заголовке определен стиль тега H1, который
затем можно повсеместно использовать на данной веб-странице. Внутренние стили (inline style)Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр style, а его атрибуты указываются с помощью языка таблицы стилей. Пример 3. Использование внутренних стилей <html>
<body> <H1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366;">Hello, world!</H1> </body> </html> Рекомендуется использовать внутренний стиль для одиночных тегов или отказаться от его использования вообще, поскольку изменение ряда элементов становится проблематичным. Внутренние стили не соответствуют идеологии структурного документа, когда содержимое и его оформление разделены. Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере используются сразу два метода добавления таблиц стилей в документ. Пример 4. Сочетание разных методов подключения стилей <html> <head> <style type="text/css"> H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } </style> </head> <body> В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий – зеленым и другим шрифтом. |
