system markup

Системная вёрсткаÍèêèòà ÑåëåöêèéØêîëà âåá-òåõíîëîãèé

Monday, November 8, 2010

Система

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

Файлы и папки

/index.html

/images/

/index.html

/images/

/index.html

/images/

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

640—1024

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

640—1024

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

@media print and (color) {.ad{

display: none;}.main .article{

width: 100%;}

Layout (Лэйаут) — Раскладка

êëàññ ðрàñêëàäêè

êëàññ ðрîäèòåëÿ

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

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

×Чòî?

Ãäå?

×Чòî?

Ãäå? Êîãäà?

.specialPriceLabel {…background-image: url("specialPriceLabel.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

Technology

download apresentação markup

html hypertext markup language

linguaggi di markup

extensible markup language (xml )

portafolio de servicios - markup

markup e html

hyper text markup language

kth easing markup day01

informatika, pocitace, ich system a...

mcs markup

i linguaggi di markup e le loro applicazioni ai …¥gml...

html - hypertext markup language - 2

html5 kig 7th markup sg

apresentação markup design

databases, markup, and regular expressions

webgis como herramienta de apoyo en la...

hypertext markup language · 2...

html - hypertext markup language - review

extensions to the smil multimedia...

html (hyper text markup language)