UGgallery » Учебник по CSS-верстке (сборник статей)

Учебник по CSS-верстке (сборник статей)

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

Заметка о причинах создания этого сборника. Там же можно оставлять комментарии.

Последняя редакция: 1 июня 2009 г.

Оглавление

Основные приемы CSS-верстки

Верстка в несколько колонок #: “Как я делаю две колонки” (CSSing); “В поисках Святого Грааля” (Design For Masters); “Простой двухколоночный макет” (Zhilinsky); “Простой прием или колонки одинаковой высоты” (CSSing); “Float, margin, padding, overflow:hidden;” (колонки одинаковой высоты) (Trifler.ru); “Кроссбраузерный inline-block” (Grakhov.com)
Выравнивание подвала страницы по нижнему краю окна #: “Как прижать footer к низу окна браузера с помощью CSS?” (XHTML.ru)
Растягивание блока на высоту окна. #: “Исследование высоты BODY” (XHTML.ru)
Вертикальное центрирование #: “Вертикальное центрирование блока средствами CSS” (XHTML.ru); “Еще один способ вертикального выравнивания в CSS” (CSSing)
Навигационное меню одноуровневое #: “Навигация по-русски” (CSSing); “Разделители в меню” (CSSing)
Image Replacement – Замена текста изображением #: “Некоторые техники замены текста картинками (image replacement)” (CSSing); “Разные методы Image Replacement для разных браузеров” (UGgallery)
Техника “раздвижных дверей” #: “Идея раздвижных дверей в CSS” (CSSing)
Верстка HTML-форм #: “Создаём сложные формы без таблиц” (Flack); “Создаём сложные формы без таблиц. Часть вторая” (Flack)
Clearing floats #: “Methods for Containing Floats” (Ed Eliot)
Позиционирование дочерних блоков внутри родительского #: “Position: absolute; внутри блока с position: relative;” (Rossomachin)

Браузеры: различия, особенности, поддержка разных версий

Использование различных версий браузеров #: “Набор для тестирования вёрстки” (RMCreative); “Тестирование на кроссбраузерность, сервисы и утилиты” (Design For Masters)
Особенности в работе браузеров #: “Почему так важен DOCTYPE” (Webmascon); “Трюк с блочной моделью CSS” (Webmascon); “Свойство background” (Design For Masters); “CSS Float в теории и на практике” (Design For Masters)
CSS hacks и Conditional Comments #: “CSS filters (CSS hacks)” (Centricle); “CSS для непослушных броузеров” (CSSing)
Обнуление значений по умолчанию (Различия в работе браузеров) #: “Обнуляем дефолтные значения для HTML-элементов” (The Webmakers Lounge)
Параметры для одинакового отображения шрифтов в разных браузерах #: “Переходим на em” (PokrovBlog)
Использование скриптов вместо CSS #: “Мin-width и max-width для IE версий 5-6 при помощи expression” (UGgallery)

Основы CSS и HTML необходимые для правильной работы

Семантика #: “(X)HTML – структура и семантика кода” (The Webmakers Lounge); “Семантическая вёрстка”: часть первая, часть вторая (Pepelsbey)
ID and class #: “Чем отличаются id и class” (SoftwareManiacs)
Специфичность CSS-селекторов #: “Вес CSS селекторов” (CSSing)
Организация и оформление кода #: “Стандарты именования html-layout” (Agat); “Структура CSS” (CSSing); “CSS: советы и приёмы, часть 1, часть 2″ (Umade)
Устранение ошибок: инструменты и методы #: “5 советов верстальщику” (UGgallery)

Дополнительные материалы

Спецификации

World Wide Web Consortium (W3C)

Книги

Статьи

Семантическая верстка — советы и решения: часть первая, вторая, третья, четвертая
20 CSS-решений распространенных багов и проблем при верстке сайта
70 советов по работе с CSS (англ.)
70 приемов улучшения CSS верстки
70 идей экспертов для улучшения CSS кода (+ Разбор полетов)
6 Keys to Understanding Modern CSS-based Layouts (англ.)
9 Top CSS Essential Skills That Every Web designer Should Learn (англ.)

Источники