CSS. Рецепты программирования

CSS. Рецепты программирования.Автор: Кристофер Шмитт

Эта книга поможет Вам сэкономить время и быстро решить проблемы Web-дизайна. Большое количество рецептов для новичков и искушенных пользователей CSS, важные подсказки и хитрости помогут воплотить в жизнь Ваши лучшие дизайн-проекты.

Для выхода из затруднительных положений, возникающих в каждом проекте, книга предлагает готовые подробные примеры, скомпонованные для удобного быстрого поиска, сопровождающиеся пояснениями.

Дополненное обсуждением особенностей поведения новейших Web-обозревателей, включая Internet Explorer, Firefox и Opera, второе издание уделяет особое внимание сложному взаимодействию технологии CSS и графики.

Кроме того, в это издание включена информация для начинающих пользователей CSS, касающаяся верстки страниц, способов форматирования, списков, форм и таблиц и т. д.

Книга сокращает путь от теории к практике, предлагая решение следующих задач:

  • применение технологии CSS в программах Adobe Dreamweaver и Microsoft Expression Web Designer;
  • размещение элементов на странице с помощью плавающей модели, абсолютного и относительного позиционирования;
  • подробное описание популярных методов замещения HTML-текста изображением;
  • стилевое оформление элементов, определяющих типографику Web-страницы;
  • проектирование форм средствами CSS;
  • создание пользовательских навигационных меню;
  • разработка таблиц стилей для печати Web-страницы;
  • тестирование отображения Web-сайтов в различных Web-обозревателях с помощью одного компьютера.

Если Вам досаждают ошибки Web-обозревателей и для борьбы с ними Вам необходим программистский трюк или искусственный прием, обратитесь к книге — она поможет решить сотни распространенных проблем, связанных с таблицами стилей.

Купить можно на ozon.ru.

Создание CSS-сайтов в Dreamweaver

Урок #5. Как работают принципы CSS?
47 минут

Наследование и специфичность

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

Из книги Дэйва Ши и Молли Е. Хольцшлаг
«Философия CSS-дизайна»

Благодаря принципу наследования, мы можем существенно уменьшить объем страниц. Если вы заглядываете в код посещаемых сайтов, то частенько должны видеть такую картину:

<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">

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

А можно предложить другой вариант: код сократить — <body>. Добавить в таблице стилей правило:

body {
background: #FFFFFF;
margin: 0;
}

Таким бразом, уменьшается HTML-код, а то правило, которое было создано для body, автоматически применяется к каждой странице. И в случае изменения фона нам достаточно внести поправку однажды.

Если установить в body определенный шрифт, то это правило будет унаследовано всеми блоками, входящими в body. Если мне нужен другой шрифт, например, в блоке со ссылками, то новое правило будет более специфичным и весомым, то есть старое правило в этом блоке перестает действовать.

Позиционирование с помощью CSS

Позиционирование с помощью CSS — очень точная техника при размещении элементов. Вы можете расположить любой объект (картинку, текстовый блок, флешку) в любом месте страницы.

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

Благодаря абсолютному позиционированию вы можете разместить блоки в нужной вам последовательности. Менее значимая информация размещается ближе к концу кода — это делается в целях улучшения видимости сайта поисковыми системами.

Например, на этом сайте блок с верхним меню находится наверху только визуально. Если вы заглянете в исходный код, то убедитесь в том, что в верхней части страницы нет блока с меню (он находится над футером), т.е. страница начинается сразу с контента с ключевыми словами. Таким образом, мы можем существенно улучшить видимость нашего сайта поисковыми системами.