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

NORESET

override.css



all.css base.css

inline.css

blocks.css

layout.css

screen.css

tablet.css

handheld.css

device.css

print.css

NORESET

override.css



all.css base.css

inline.css

blocks.css

layout.css

screen.css

tablet.css

handheld.css

device.css

print.css

NORESET

>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

NORESET

>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 страницы


Id страницы


Id страницы


Id страницы


Id страницы


Языки


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



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");

}




}

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: [email protected]

webskola.lv


Technology

System markup