 Команда MBTEAM  Введение в css часть1.Введение в css часть1. Каскадные таблицы стилей есть один из способов оформления HTML документа. Ни более, и не менее. Тем не менее, философия этого способа радикально отличается от типично разметочного "сюда мы сунем <b>, а сюда, пожалуй, <font face=arial>". Недостатки такого подхода видны сразу - при попытке сменить оформление сайта придется менять все страницы и все элементы, один за другим. Таблицы CSS предлагают логический способ оформления документа. Т.е. в любом правильно сосотавленном тексте можно отделить такие понятия, как заголовки, параграфы, термины, ссылки друг от друга. К тому же CSS охватывает и такие области, как оформление изображений, таблиц и прочих визуальных элементов. Более того, сейчас можно с уверенностью сказать, что CSS предоставляет гораздо более широкие возможности для форматирования, нежели собственно стандарт HTML. К тому же ситуация с разными браузерами, по-разному понимающими различные атрибуты CSS, понемногу меняется. К примеру, браузеры IE и Opera, которыми, как ни крути, пользуется подавляющее большинство серферов, отображают простые таблицы CSS практически одинаково. Ну там, где они отображают неодинаково, должны помочь будущие статьи. На сегодняшний день официально принятой стандартами W3C версией CSS является 2, а в разработке находится 3 версия. Повторюсь, что не все свойства CSS2 поддерживаются браузерами. Тем не менее, некоторые свойства CSS2 являются краеугольным камнем важных аспектов DHTML программирования - всяких там менюшек всплывающих, бегающих картинок и прочего мельтешения на экране. Для начала мы рассмотрим простейший синтаксис CSS и методы подключения таблиц. Синтаксис CSS Сама таблица - обычный текстовой файл, обычно сохраняемый с расширением ".css". Формат таблиц практически свободный, что и будет показано далее. Файл состоит из определений, или правил (rules). В общем виде правило выглядит так - сначала идет selector, я буду называть его определителем, который обозначает, к каким именно элементам HTML нужно применять оформление, затем идет открывающая фигурная скобка, в ней через точку с запятой перечисляются атрибуты оформления CSS, затем фигурная скобка закрывается. selector {attribute-name:attribute-definition [;attribute-name:attribute-definition[...]]} Любое количество пробельных (символов табуляции, пробела и переноса строки) может быть вставлено между селектором, скобкой, атрибутами. Не допускается никаких непробельных символов после закрытой скобки. Например, в следующем примере символ ";" после скобки лишний: selector {attributes}; Примером правильного кода может быть следующий: selector1 {attribute1; attribute2} selector2 {attribute1;attribute2;attribute3} Оформление определителя для всех элементов одного типа Первый (простейший) способ указания определителя - задать оформление для всего базового класса элементов, например элеменов параграфа <p> и <cite> p {text-align: right } cite {font-family: monospace } В данном случае все параграфы документа, не имеюшие уточняющих классовых или идентификаторных атрибутов, будут иметь выравнивание по правому краю, а аналогичные элементы cite - форматирование моноширинным шрифтом. Обратите внимание, что конкретный шрифт не задан, поскольку на машине пользователя, если он использует один из вариантов Unix, может и не быть, скажем, шрифта Courier (хотя надо сказать его клоны имеются практически на всех Линуксовых дистрибутивах). Тем не менее, текст отобразится корректно - установленным по умолчанию в браузере моноширинным шрифтом. ... одного класса Другим способом, также очень популярным, является субклассирование элементов. То есть, у Вас есть параграфы заголовка, параграфы цитат, параграфы копирайта. Для каждого из них можно создать свой класс: p.head {text-align: center } p.cit {text-align: left; text-indent: 5em } p.copy {font-size:xx-small; color: blue } .sans {color:red} После точки пишется название класса. Если имя основного тэга не указано (то есть перед точкой ничего нет), то оформление будет применяться для всех типов элементов, имеющих class=classname. Выглядит это так: <-Назад | Далее-> Страницы: (1) 2 3 4 5  Добавил: aiaiai2 Комментарии (0) Прочитали: 163Последнее прочтение: 6 Сентября 2010 / 02:54 Оценка:  Всего оценок: 1 Оценить Вернуться К категориям На главную |