Кроссбраузерная CSS-вёрстка CSS2 - crash course Вёрстка макета по шагам © 2009, Коновалов Андрей

Часть I. Что такое CSS Cascading Style Sheets (Каскадные таблицы стилей) Определяют, каким образом отображать HTML- элементы Объявляются либо в блоке в рамках HTML-документа, либо во внешнем файле Множественные объявления будут каскадно наложены и объединены в одно объявление Актуальная версия CSS – CSS 2.1

Стиль и расположение Стиль (Style)Расположение (Layout) шрифт (font) цвет (color) рамки (border) поля (margin) отступ (padding) фон (background) позиция (position) размер (size) выравнивание (alignment) видимость (visibility) Единицы измерения: px % pt (1/72 inch), em etc.

Синтаксис. Селектор {свойство: значение;}.right, li { text-align: right; color: red; font-family: Times; border: 1 solid black; } #top-block, li.plist { text-align: left; color: green; font-family: Tahoma; border: 1 dashed green; } Top block Right paragraph. item 1 item 2 ext.item 1 ext.item 2

Последовательность наложения 1.Стили браузера по умолчанию 2.Внешний css-файл 3.Внутреннее объявление в блоке 4.Внутреннее объявление в теге

Ужасы CSS-селекторов (1 из 3) Descendant Combinator div.sidebar p Любой параграф, вложенный в блок с классом sidebar (Вложенность не лимитирована, т.е. любая). Параграф 1 Параграф 2

Ужасы CSS-селекторов (2 из 3) Child Combinator /Pseudo-element selector #maincontent blockquote > p:first-child:first-line Первая строка любого параграфа, являющегося первым дочерним элементом тега blockquote, который, в свою очередь, вложен в любой элемент с id= maincontent. Первая строка Вторая строка Третья строка

Ужасы CSS-селекторов (3 из 3) Adjacent Sibling Combinator div.sidebar p + p Любой параграф, перед которым находится брат-параграф (sibling), который, в свою очередь вложен в блок с классом sidebar. This is a paragraph This is another paragraph.

Box model. Border/Margin/Padding (1 из 2)

Box model. Border/Margin/Padding (2 из 2) Любое из этих трёх свойств может быть разбито на 4 составляющие: top, right, bottom, left. p { border: 1 solid red; //width, style, color margin: 0px 20px 10px 10px; //top, right, bottom, left margin-top: 5px; padding-left: 10px; border-bottom-color: blue; }

CSS Reset Чтобы избавиться от браузерных различий зачастую необходим CSS Reset. Простейший вариант: * { margin: 0; padding: 0; } Но всё не так просто: Yahoo : Ed Eliot: Killer collection of CSS Reset global-css-reset-styles/

@media Rule Метод screen { p.test {font-family:verdana,sans-serif; font-size:14px} print { p.test {font-family:times,serif; font-size:10px} screen, print { p.test {font-weight:bold} } Метод 2: Media TypeDescription allUsed for all media type devices auralUsed for speech and sound synthesizers brailleUsed for braille tactile feedback devices embossedUsed for paged braille printers handheldUsed for small or handheld devices printUsed for printers projectionUsed for projected presentations, like slides screenUsed for computer screens ttyUsed for media using a fixed-pitch character grid, like teletypes and terminals tvUsed for television-type devices

Часть II. CSS-Вёрстка. Категории макетов Фиксированной ширины (fixed width) По ширине браузера с авто- масштабированием (liquid layout) С плавающими блоками (floating blocks)

Популярные виды макетов Самый распространённый 3 column layoutLeft menu layoutRight menu Floating boxes Double pageFull pageMulti-column stacked

3 column liquid layout Рис. 1 Размерности блоковРис.2 Структура вложенности

Пример макета с содержимым

Спецификации не кроссбраузерны! Google ChromeInternet Explorer 7 FireFox 3Opera 9.6

Как же верстать?

CSS магия (1 из 3) #header { clear:both; float:left; width:100%; border-bottom:1px solid #000; } #footer { clear:both; float:left; width:100%; border-top:1px solid #000; }

CSS магия (2 из 3).colmask { position:relative; /* This fixes the IE7 overflow hidden bug */ clear:both; float:left; width:100%; /* width of whole page */ overflow:hidden; /* This chops off any overhanging divs */ } /* common column settings */.colmid,.colleft { float:left; width:100%; /* width of page */ position:relative; }.col1,.col2,.col3 { float:left; position:relative; padding:0 0 1em 0;/* no left and right padding on columns, only padding top and bottom is included here */ overflow:hidden; }

CSS магия (3 из 3) /* 3 Column settings */.threecol { background:#eee; /* right column background colour */ }.threecol.colmid { right:25%; /* width of the right column */ background:#fff; /* center column background colour */ }.threecol.colleft { right:50%; /* width of the middle column */ background:#f4f4f4; /* left column background colour */ }.threecol.col1 { width:46%; /* width of center column content (column width minus padding on either side) */ left:102%;/* 100% plus left padding of center column */ }.threecol.col2 { width:21%; /* Width of left column content (column width minus padding on either side) */ left:31%; /* width of (right column) + (center column left and right padding) + (left column left padding) */ }.threecol.col3 { width:21%; /* Width of right column content (column width minus padding on either side) */ left:85%; /* Please make note of the brackets here: (100% - left column width) + (center column left and right padding) + (left column left and right padding) + (right column left padding) */ }

Фиксированный «подвал» CSS html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header { background:#ff0; padding:10px; } #body { padding:10px; padding- bottom:60px; /* Height of the footer */ } #footer { position:absolute; bottom:0; width:100%; height:60px; /* Height of the footer */ background:#6cf; } HTML header body foother

На закуску