Таблицу стилей можно встроить непосредственно в документ HTML, для чего необходим тег <STYLE>;, который имеет закрывающий тег </STYLE>;. Между этими тегами распологают таблицу стилей.
Эти теги распологаются в разделе <HEAD>;:
<html><head><style> H1{color: red; font-size: 27px; margin-left: 10%; font-weigt: bold} H2{color: green; font-size: 24px; font-family: courier; font-weigt: bold} P.italic{font-style: italic} P.red{color:red}</style><head><body> </body></html>
16. Методы определения стилей в CSS. Преимущества использования CSS.
Существует целых четыре способа связывания документа и таблицы стилей:
Связывание – позволяет использовать одну таблицу стилей для форматирования многих страниц HTML
Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом документе
Встраивание в теги документа – позволяет изменять форматирование конкретных элементов страницы
Импортирование – позволяет встраивать в документ таблицу стилей, расположенную на сервере.
Остановимся на каждом из этих способов более подробно.
Связывание
Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде веб-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега LINK, располагающегося внутри тега HEAD ваших страниц:
<LINK REL=STYLESHEET TYPE="text/css" href="URL">
Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – href= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://…») в случае, если файл стилей находится на другом сервере.
Внедрение
Второй вариант, при котором описание стилей располагается в коде Web-странички, внутри тега HEAD, в теге <STYLE type="text/css">... </STYLE>. В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type=»text/css» является обязательным и служит для указания броузеру использовать CSS.
Встраивание в теги документа
Третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.
Импортирование
В теге <STYLE> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url(mystyles.css);
Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значение свойства @import является URL файла таблицы стилей.
Главные преимущества CSS:
1. Более чистый код
§ Этот код легче поддерживать
§ Он быстрее загружается
§ Он лучше оптимизирован для поисковых систем
2. Модульный код
§ Правила стиля могут применяться ко множеству страниц
§ Единообразный дизайн
§ Код легче поддерживать
3. Сила дизайна
§ Точность контроля (позиционирование, размер, поля и др.)
4. Разделение труда
§ Задача разработчика — разрабатывать, задача дизайнера — создавать дизайн
5. Лучше доступность
§ Теги больше не используются не по назначению (например, <blockquote> для форматирования)
§ Нет необходимости в позиционировании невидимых картинок
§ Пользователи могут переписывать стилевые таблицы автора
17. Селекторы в CSS. Селекторы классов CSS. Селекторы идентификаторов CSS. Приоритеты селекторов.
