Веб-технологии на стороне клиента. Каскадные стили и управление ими с помощью языка Javascript. Верстка при помощи таблиц и элементов DIV

 

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанногоязыком разметки.

Для управления каскадными стилями с помощью JS используется объектная модель документа (DOM). Приведем пример небольшого скрипта, меняющего свойства CSS.

 

DOM - это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов.

 

Модель DOM не накладывает ограничений на структуру документа. Любой документ известной структуры с помощью DOM может быть представлен в виде дерева узлов, каждый узел которого представляет собой элемент, атрибут, текстовый, графический или любой другой объект. Узлы связаны между собой отношениями родительский-дочерний.

<div style= "background: transparent url() no-repeat top left; " onmouseover="javascript: this.style.backgroundImage='url(pic1.gif)'; " onmouseout="javascript: this.style.backgroundImage='url(pic2.gif)'; " >text</div>Таким образом, язык JS позволяет получить доступ к свойствам и атрибутам стилей, регламентирующих форматирование элементов веб-страницы. Одним из небольших особенностей использования такого механизма является то, что свойства CSS состоящие из двух слов, В JS-скрипте пишутся слитно, причем второе начинается с большой буквы.

Кроме того, с помощью языка JavaScript можно подключить другой файл стилей, таким образом полностью изменив текущее форматирование (для этого модифицируется свойство "src" элемента "link").

 

Основными вариантам верстки веб-страниц является: верстка таблицами и верстка блоками "div".

 

Табличная верстка — условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег <table>).

 

Метод получил широкое распространение во времена предшествовавшие появлению стандарта CSS, так как на тот момент не было другой простой возможности точно расположить элементы на странице. Таблицы же, за счет того, что автоматически изменяют свой размер в соответствии с содержимым, а также за счет возможности, напротив, задать точные размеры той или иной ячейки, позволяют быстро и удобно расставить иллюстрации к тексту или совместить несколько частей коллажа в одно большое изображение. Кроме того, таблицы в HTML могут быть вложенными, что позволяет создавать целые иерархии таблиц, что было очень удобно при верстке сложных страниц, отдельные элементы которых должны были бы сохранять свое положение и размер на экране вне зависимости от размера окна браузера, тогда как другие элементы, напротив, должны были изменяться в размерах и/или изменять свое местоположение относительно остальных объектов документа.

 

Некоторые полагают, что табличная верстка нарушает основную идею создания языков разметки — визуальное отображение документа должно автоматически получаться из логической разметки и не зависеть от его непосредственного содержания. Иными словами, использовать таблицы следует только для отображения табличных данных: статистик, расписаний, сравнительных характеристик и пр., а для расположения элементов документа следует использовать CSS.

 

Тем не менее, табличная верстка остается наиболее удобной и простой в освоении, потому многие веб-разработчики продолжают ею пользоваться. Этот метод верстки зарекомендовал себя, как наиболее стабильный и надежный, в то время как блочная верстка сложна в реализации, имеет проблемы с совместимостью с разными браузерами и т.п.

 

До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа (табличная верстка). Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа (блочная верстка). За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

 

Сразу следует оговорить, что спор вокруг таблиц происходит только в том случае, когда они используются для верстки. Если дело касается хранения табличных данных, то не возникает сомнений, что таблицы именно для этой цели и предназначены.