System markup

Системная вёрстка
Íèêèòà Ñåëåöêèé
Øêîëà âåá-òåõíîëîãèé
?
!
AB
Monday, November 8, 2010

Система
Mножество взаимосвязанных
элементов, обособленное от среды и
взаимодействующее с ней, как целое.

Файлы и папки

/index.html

/index.html
/css/

/index.html
/css/
/images/

/index.html
/css/
/images/
/js/

/index.html
/css/
/images/
/js/
/css/

CSS файлы

CSS файлыindex.html
all.css

all.css base.css
inline.css
blocks.css
layout.css
device.css
override.css

all.css base.css
inline.css
blocks.css
layout.css
device.css
NO
RESET
override.css

all.css base.css
inline.css
blocks.css
layout.css
screen.css
tablet.css
handheld.css
device.css
print.css
NO
RESET
override.css

all.css base.css
inline.css
blocks.css
layout.css
screen.css
tablet.css
handheld.css
device.css
print.css
NO
RESET
>1100
640—1024
<640
override.css

all.css base.css
inline.css
blocks.css
layout.css
screen.css
tablet.css
handheld.css
device.css
print.css
iphone4.css
NO
RESET
>1100
640—1024
<640
override.css

Строчные элементы
(строчные блоки)

Блочные элементы
(плавающие блоки)

Оформление строчных элементов

Оформление блоков

Layout

Пример device.css
@import "screen-wide.css" screen and (min-width: 1441px);
@import "screen.css" screen and (min-width: 1025px) and (max-width: 1440px);
@import "tablet.css" screen and (min-width: 641px) and (max-width: 1024px);
@import "handheld.css" handheld, screen and (max-width: 640px);
@import "print.css" print;
@import "iphone4.css" screen and (-webkit-min-device-pixel-ratio: 2);

Пример device.css
@import "screen-wide.css" screen and (min-width: 1441px);
@import "screen.css" screen and (min-width: 1025px) and (max-width: 1440px);
@import "tablet.css" screen and (min-width: 641px) and (max-width: 1024px);
@import "handheld.css" handheld, screen and (max-width: 640px);
@import "print.css" print;
@import "iphone4.css" screen and (-webkit-min-device-pixel-ratio: 2);
@media (orientation: portrait) { … }

@media print and (color) {
selector{
color: #f00;
}
}
@media print and (monochrome) {
selector{
color: #777;
}
}
Print

Print
@media print and (color) {
.ad{
display: none;
}
.main .article{
width: 100%;
}
}

Layout (Лэйаут) — Раскладка
êëàññ ðрàñêëàäêè
êëàññ ðрîäèòåëÿ
id ñòðрàíèöû
<body class="layout parentPage" id="currentPage">

Раскладка

Родитель

Id страницы

Языки

Языки
@import "override.css";

Языки
html[lang=lv] element {
background-image: url("sprites-ru.png");
}

Языки
html[lang=lv] element {
background-image: url("sprites-ru.png");
}
html[lang=ru] .specialPrice .label {
position: absolute;
top: 0;
right: 0;
background-image: url("ru-specialPrice-label.png");
}

Названия картинок
(когда не используются спрайты)

×Чòî?

×Чòî?
Ãäå?

×Чòî?
Ãäå? Êîãäà?

.specialPriceLabel {
…
background-image: url("specialPriceLabel.png");
}

html[lang=ru] .specialPriceLabel {
background-image: url("specialPriceLabel-ru.png");
}
…
}

html[lang=ru] .specialPriceLabel {
background-image: url("specialPriceLabel-ru.png");
}
…
}
html[lang=ru] .aside .specialPriceLabel {
background-image: url("specialPriceLabel-aside-ru.png");
}

Классы элементов
íàñëåäîâàíèå
íåçàâèñèìûå áëîêè

<element class="parent">
<element class="child">Content</element>
</element>
.parent > .child{ … }

<element class="grandparent_parent">
<element class="parent_child">Content</element>
</element>
.parent_child{ … }

Templa Voilá
Метка—данные

Метка—данные

Метка — данные
<name>
<label>Метка</label>
<data>Данные</data>
</name>

<name>
<label>Метка</label>
<data>Данные</data>
</name>
<div class="name">
<span class="label">Метка</span>
<span class="data">Данные</span>
</div>

<element label="Метка">Данные</element>
element:before{
content: attr(label) " ";
}

Спасибо за внимание!
Никита Селецкий
Школа-веб технологий
email: nikita@seleckis.lv
webskola.lv

System markup

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (12)

System markup