Связь css и html
В описании селекторов и имен стилей не должно быть пробелов или переводов строк.
Как уже упоминалось, CSS файл является внешним, по отношению к html - документу.
Существует несколько способов "привязки" определенного файла стилей к конкретному документу.
Посредством тега <link>, находящимся в рамках парного тега <head>:
<head>
...........
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Атрибут rel указывает на тип подключаемого файла, type – указывает MIME тип файла, href – указывает путь до файла стилей.
Посредством директивы @import, находящейся в рамках парного тега <style>:
<head>
.............
<style type = "text/css">
@import url(style.css)
</style>
</head>
Указанные способы позволяют подключить внешнюю таблицу стилей.
Правила и каскадность css
Итак, существует несколько способов задания связи между CSS и html - документом. Кроме того, к одному и тому же элементу веб-страницы могут быть назначены несколько стилей (к примеру, в рамках самого элемента и во внешней таблице стилей). При этом фактическое отображение элемента регулируется правилами каскадности:
Внешняя таблица стилей, ссылка на которую встречается в html - документе позже, имеет приоритет по отношению к внешней таблице стилей, ссылка на которую встречается раньше.
Внутренние таблицы стилей приоритетнее внешних.
Таблицы стилей, располагающиеся в рамках самого элемента (<p style="...">), имеют приоритет, по отношению ко всем остальным стилям.
Более конкретные стили имеют приоритет перед менее конкретными (к примеру, p.classname {...} приоритетнее p {..}), т.е. стилевой класс приоритетнее переопределения тега, комбинированный класс приоритетнее стилевого.
В случае привязки к тегу нескольких стилевых классов, приоритетными считаются те, что указаны правее.
Атрибуты стиля, объявленные как !important, имеют приоритет перед всеми другими значениями. Таким образом, стиль p {color: red !important} сделает весь текст в рамках тегов <p> красным вне зависимоти от любых других переопределений стиля для <p>.
Применение CSS позволяет значительно упростить методы указания стиля текста, цвета и размера шрифтов и, благодаря экономным и простым способам задания определенных параметров каким-либо элементам, уменьшает размер сайта и время его загрузки. CSS позволяют сохранять описание стиля в отдельном файле и использовать его в любое время на других страничках. Большим плюсом для пользователей является возможность уменьшать либо наращивать размер шрифта html, согласуясь со своим зрением. Являясь всего лишь одним из дополнений к HTML разметке, таблицы стилей CSS, тем не менее, являются одними из важных орудий web мастера для облегчения представления информации на сайтах.
Модели документов - Document Object Model, dom
DOM базируется на представлении документа любой структуры в виде дерева узлов, каждый узел (нода) которого представляет собой элемент, атрибут элемента, текстовое значение элемента и т.п. Связь между узлами построена по принципу "родитель - подчиненные". У корня документа (дерева DOM) родителя нет. У тупикового элемента нет подчиненного (такие элементы абстрактно называются листьями дерева). Таким образом, модель DOM может создаваться не только для xml, но фактически для любого структурированного документа (HTML, XHTML). Так, например, браузер пользователя, получая html код веб-страницы из интернета, строит дерево DOM этой страницы в оперативной памяти компьютера пользователя.
Модель DOM открывает широкие возможности по манипуляции данными документа. Можно создавать новые узлы, вставлять их на разных уровенях дерева, копировать узлы, удалять узлы, искать узлы по разным параметрам и многое другое.
Модель DOM документа xml наглядно представлена на рисунке ниже.
Рис. 2. Модель документа XTM2
Любой современный язык программирования имеет в своем составе средства (парсеры) для работы с таким деревом. Получая на вход строковое содержимое xml парсер выстраивает в оперативной памяти дерево узлов и выполняет манипуляции с данными дерева. Преимущество такого подхода перед построчным разбором очевидно: одним запросом к дереву можно выбрать необходимые данные, не перебирая построчно весь документ, ведь в оперативной памяти находится полное представление элементов со всеми взаимосвязями.