Post on 08-Aug-2015
HTML & CSSпо кирпичикам
Артем Маркушев, Senior Webmaster / Frontend Developer
HTML
HyperText Markup Language
<html><head>
<title>Hello, World</title></head><body>
…</body>
</html>
HTML – Структура декларативного языка
<body>это тег
HTML – Структура декларативного языка
<p>I’m a paragraph</p>это контент тега
HTML – Структура декларативного языка
<div><img src=“image.png” />
</div>и это контент тега
HTML – Структура декларативного языка
<a href=“#target”>…</a>а это атрибут
HTML – Структура декларативного языка
DOM
HTML – Интерпретация браузером
HTML – Интерпретация браузером
HTML – Интерпретация браузером
WebKit Gecko TridentBlink
CSS
Cascading Style Sheets
body {width: 100%;height: auto;background-color: #42535b;
}
CSS – Структура декларативного языка
bodyселектор тега
CSS – Типы селекторов
.activeселектор класса
(<li class=“active”>…)
CSS – Типы селекторов
#uniqueселектор ID
(<li id=“unique”>…)
используйте порежеа лучше - никогда
CSS – Типы селекторов
[target]селектор атрибута
CSS – Типы селекторов
:hoverпсевдокласс
CSS – Типы селекторов
:beforeпсевдоэлемент
CSS – Типы селекторов
span.icon:before {content: “”;
}
CSS – Структура декларативного языка
ul.menu > li a:hover:before {…}
nav.primary li.nav-item.active {…}
.container > p, .container > h1 {…}
и тому подобное
CSS – Каскады
CSS – Каскады
#ID .class tag
CSS – Каскады
#ID.class
tag
!important
style=“” [attr]*
0,0,0,0,0
CSS – Каскады
div
0,0,0,0,1
CSS – Каскады
div a
0,0,0,0,2
CSS – Каскады
div a.active
0,0,0,1,2
CSS – Каскады
div#first a.active
0,0,1,1,2
CSS – Каскады
div#first a
0,0,1,0,2
CSS – Каскады
<a href=“#” style=“…”>…</a>
0,1,0,0,0
CSS – Каскады
a { width: 100% !important; }
1,0,0,0,0
CSS – Каскады
a { width: 100% !important; }
1,0,0,0,0<a href=“#” style=“width: auto !important”>…</a>
1,1,0,0,0
CSS – Каскады
!important > style > #id > .class > tag = [attr] > *
CSS – Каскады
width: 100%;
CSS – Свойства
%propertyName%: %propertyValue%;
CSS – Свойства
body {width: 100%;padding: 10px 5% 20px;background: url(image.png) 1% 1%;
}
CSS – Структура декларативного языка
-webkit-%propertyName%: %propertyValue%;-moz-%propertyName%: %propertyValue%;
-o-%propertyName%: %propertyValue%;-ms-%propertyName%: %propertyValue%;
CSS – Браузеро-зависимые свойства
input::-webkit-placeholder {…
}
CSS – Браузеро-зависимые свойства
_bem, OOCSS, SMACCS
и много других страшных слов
CSS – Методологии
LESS, SASS, Stylus
и много других страшных слов
CSS – Препроцессоры
.container {…
.element {a {
&:hover { … } }
p { … }
&.active { … }}
}
CSS – Препроцессоры
.mixin (@param){some: func(@param,20%);
}
.useful-class {.mixin (20);
}
.useless-class {.mixin (30);
}
CSS – Препроцессоры
.container {…
.element {a {
&:hover { … } }
p { … }
&.active { … }}
}
CSS – Препроцессоры
.container { … }
.container .element a:hover { … }
.container .element p { … }
.container .element.active { … }>
.mixin (@param){some: func(@param,20%);
}
.useful-class {.mixin (20);
}
.useless-class {.mixin (30);
}
CSS – Препроцессоры
.useful-class {some: 22;
}
.uselessclass {some: 23;
}
>
htmlbook.ru
htmlacademy.ru
Вася, это конец…
Вопросы?
Вася, это конец…
vk.com/kubikami
Вася, это конец…