'

Кроссбраузерная CSS-вёрстка

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

Стиль и расположение


Слайд 3

Синтаксис. Селектор {свойство: значение;} <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>


Слайд 4

Последовательность наложения Стили браузера по умолчанию Внешний css-файл Внутреннее объявление в блоке <style type=“text/css”></style> Внутреннее объявление в теге <div style=“…”></div>


Слайд 5

Ужасы 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


Слайд 6

Ужасы 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


Слайд 7

Ужасы 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


Слайд 8

Box model. Border/Margin/Padding (1 из 2) http://www.w3.org/TR/CSS21/box.html


Слайд 9

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; }


Слайд 10

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/


Слайд 11

@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" />


Слайд 12

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


Слайд 13

Популярные виды макетов http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts


Слайд 14

3 column liquid layout http://matthewjamestaylor.com/blog/perfect-3-column.htm Рис. 1 Размерности блоков Рис.2 Структура вложенности


Слайд 15

Пример макета с содержимым http://matthewjamestaylor.com/blog/perfect-3-column.htm


Слайд 16

Спецификации не кроссбраузерны! http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning


Слайд 17

Как же верстать? <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


Слайд 18

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; }


Слайд 19

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; }


Слайд 20

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


Слайд 21

Фиксированный «подвал» 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


Слайд 22

На закуску ? http://csszengarden.com/ http://www.mezzoblue.com/zengarden/resources/


×

HTML:





Ссылка: