Crossbrowser Css layout
- 1. Кроссбраузерная CSS- вёрстка CSS 2 - crash course Вёрстка макета по шагам © 2009, Коновалов Андрей
- 2. Часть I. Что такое CSS Cascading Style Sheets (Каскадные таблицы стилей) Определяют, каким образом отображать HTML- элементы Объявляются либо в блоке <style></style> в рамках HTML- документа, либо во внешнем файле Множественные объявления будут каскадно наложены и объединены в одно объявление Актуальная версия CSS – CSS 2.1 http://www.w3.org/TR/CSS21/
- 3. Стиль и расположение Стиль (Style) Расположение (Layout) шрифт (font) цвет (color) рамки ( border) поля ( margin) отступ ( padding) фон ( background) позиция ( position) размер (size) выравнивание ( alignment) видимость ( visibility) Единицы измерения: px % pt (1/72 inch), em etc.
- 4. Синтаксис. Селектор { свойство : значение ;} <head> <style type=“text/css”> .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 ; } </style> </head> <body> <div id = "top-block" > Top block </div> <div class = "right" > Right paragraph. <ul> <li class = “plist" > item 1 </li> <li class = "plist" > item 2 </li> </ul> </div> <ul> <li> ext.item 1 </li> <li> ext.item 2 </li> </ul> </body>
- 5. Последовательность наложения Стили браузера по умолчанию Внешний css- файл Внутреннее объявление в блоке <style type=“text/css”></style> Внутреннее объявление в теге <div style=“…”></div>
- 6. Ужасы CSS- селекторов (1 из 3) Descendant Combinator div.sidebar p Любой параграф, вложенный в блок с классом “sidebar” (Вложенность не лимитирована, т.е. любая) . <div class=“sidebar”> <p> Параграф 1 </p> <div> <p> Параграф 2 </p> </div> </div> http://g9g.org/backblog/2008/08/17/css-2-selector-fundamentals.html
- 7. Ужасы CSS- селекторов ( 2 из 3) Child Combinator / Pseudo-element selector #maincontent blockquote > p:first-child:first-line Первая строка любого параграфа, являющегося первым дочерним элементом тега blockquote, который, в свою очередь, вложен в любой элемент с id= “maincontent”. <div id="maincontent"> <div> <blockquote> <p> Первая строка <br/> Вторая строка </p> <p> Третья строка </p> </blockquote> </div> http://g9g.org/backblog/2008/08/17/css-2-selector-fundamentals.html
- 8. Ужасы CSS- селекторов ( 3 из 3) Adjacent Sibling Combinator div.sidebar p + p Любой параграф, перед которым находится брат-параграф ( sibling ), который, в свою очередь вложен в блок с классом “sidebar”. <div class="sidebar"> <p>This is a paragraph</p> <p>This is another paragraph.</p> </div> http://g9g.org/backblog/2008/08/17/css-2-selector-fundamentals.html
- 9. Box model. Border/Margin/Padding (1 из 2) http://www.w3.org/TR/CSS21/box.html
- 10. 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; }
- 11. CSS Reset Чтобы избавиться от браузерных различий зачастую необходим CSS Reset. Простейший вариант: * { margin: 0; padding: 0; } Но всё не так просто: Yahoo : http://developer.yahoo.com/yui/reset/#start Ed Eliot: http://www.ejeliot.com/blog/85 Killer collection of CSS Reset http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
- 12. @media Rule Метод 1: @media screen { p.test { font-family :verdana,sans-serif; font-size :14px} } @media print { p.test { font-family :times,serif; font-size :10px} } @media screen , print { p.test { font-weight :bold} } Метод 2: <link rel="stylesheet" media="screen, print" href="stylesheet.css" /> Media Type Description all Used for all media type devices aural Used for speech and sound synthesizers braille Used for braille tactile feedback devices embossed Used for paged braille printers handheld Used for small or handheld devices print Used for printers projection Used for projected presentations, like slides screen Used for computer screens tty Used for media using a fixed-pitch character grid, like teletypes and terminals tv Used for television-type devices
- 13. Часть II. CSS- Вёрстка . Категории макетов Фиксированной ширины (fixed width) По ширине браузера с авто-масштабированием ( liquid layout) С плавающими блоками ( floating blocks)
- 14. Популярные виды макетов http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts Самый распространённый 3 column layout Left menu layout Right menu Floating boxes Double page Full page Multi-column stacked
- 15. 3 column liquid layout http://matthewjamestaylor.com/blog/perfect-3-column.htm Рис. 1 Размерности блоков Рис.2 Структура вложенности
- 16. Пример макета с содержимым http://matthewjamestaylor.com/blog/perfect-3-column.htm
- 17. Спецификации не кроссбраузерны! http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning Google Chrome Internet Explorer 7 FireFox 3 Opera 9.6
- 18. Как же верстать? <body> <div id="header"> </div> <div class="colmask threecol"> <div class="colmid"> <div class="colleft"> <div class="col1"> </div> <div class="col2"> </div> <div class="col3"> </div> </div> </div> </div> <div id="footer"> </div> </body> <!– Это не истина в последней инстанции! --> http://matthewjamestaylor.com/blog/perfect-3-column.htm
- 19. 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; }
- 20. 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; }
- 21. 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) */ } http://www.w3.org/TR/CSS21/visudet.html
- 22. Фиксированный «подвал» 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 <div id="container"> <div id="header"> header</div> <div id="body"> body</div> <div id="footer"> foother</div> </div> http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
- 23. На закуску http://csszengarden.com/ http://www.mezzoblue.com/zengarden/resources/