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

Февраль 12, 2021

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

Содержание

2. Часть I. Что такое CSS Cascading Style Sheets (Каскадные таблицы стилей) Определяют, каким образом отображать HTML-элементы
3. Стиль и расположение
4. Синтаксис. Селектор {свойство: значение;} .right, li { text-align: right; color: red; font-family: Times; border: 1 solid
5. Последовательность наложения Стили браузера по умолчанию Внешний css-файл Внутреннее объявление в блоке Внутреннее объявление в теге
6. Ужасы CSS-селекторов ☺ (1 из 3) Descendant Combinator div.sidebar p Любой параграф, вложенный в блок с
7. Ужасы CSS-селекторов ☺ (2 из 3) Child Combinator /Pseudo-element selector #maincontent blockquote > p:first-child:first-line Первая строка
8. Ужасы CSS-селекторов ☺ (3 из 3) Adjacent Sibling Combinator div.sidebar p + p Любой параграф, перед
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
11. CSS Reset Чтобы избавиться от браузерных различий зачастую необходим CSS Reset. Простейший вариант: * { margin:
12. @media Rule Метод 1: @media screen { p.test {font-family:verdana,sans-serif; font-size:14px} } @media print { p.test {font-family:times,serif;
13. Часть II. CSS-Вёрстка. Категории макетов Фиксированной ширины (fixed width) По ширине браузера с авто-масштабированием (liquid layout)
14. Популярные виды макетов http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
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
18. Как же верстать? 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 {
20. CSS магия (2 из 3) .colmask { position:relative; /* This fixes the IE7 overflow hidden bug
21. CSS магия (3 из 3) /* 3 Column settings */ .threecol { background:#eee; /* right column
22. Фиксированный «подвал» CSS html, body { margin:0; padding:0; height:100%; } #container { min-height:100%; position:relative; } #header
24. Скачать презентацию

Слайд 2

Часть I. Что такое CSS
Cascading Style Sheets (Каскадные таблицы стилей)
Определяют, каким образом

отображать HTML-элементы
Объявляются либо в блоке в рамках HTML-документа, либо во внешнем файле
Множественные объявления будут каскадно наложены и объединены в одно объявление
Актуальная версия CSS – CSS 2.1
http://www.w3.org/TR/CSS21/

Слайд 3

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

Слайд 4

Синтаксис. Селектор {свойство: значение;}

Top block

Right paragraph.

item 1

item 2

ext.item 1

ext.item 2

Слайд 5

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

теге

Слайд 6

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

с классом “sidebar” (Вложенность не лимитирована, т.е. любая).

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”.

Первая строка
Вторая строка

Третья строка

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”.

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:

Слайд 13

Часть II. CSS-Вёрстка. Категории макетов
Фиксированной ширины (fixed width)
По ширине браузера с

авто-масштабированием (liquid layout)
С плавающими блоками (floating blocks)

Слайд 14

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

Слайд 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

Слайд 18

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

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

body

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

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

Содержание

Часть I. Что такое CSSCascading Style Sheets (Каскадные таблицы стилей)Определяют, каким образом

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

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

Ужасы CSS-селекторов ☺ (1 из 3)Descendant Combinatordiv.sidebar pЛюбой параграф, вложенный в блок

Ужасы CSS-селекторов ☺ (2 из 3)Child Combinator /Pseudo-element selector#maincontent blockquote > p:first-child:first-lineПервая

Ужасы CSS-селекторов ☺ (3 из 3)Adjacent Sibling Combinator div.sidebar p + pЛюбой

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

Box model. Border/Margin/Padding (2 из 2) Любое из этих трёх свойств может быть

CSS Reset Чтобы избавиться от браузерных различий зачастую необходим CSS Reset. Простейший вариант:*

@media RuleМетод 1:@media screen { p.test {font-family:verdana,sans-serif; font-size:14px} } @media print {

Часть II. CSS-Вёрстка. Категории макетов Фиксированной ширины (fixed width)По ширине браузера с

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

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

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

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