Post on 19-Feb-2017
HTML & CSSПо кирпичикам
Докладчик: Артем МаркушевДата: 6 июля 2015 года
<div class="wide_column_wrap"> <div class="wide_column" id="wide_column"> <div class="page_block" id="">
<div id="page_info_wrap" class="page_info_wrap"> <div class="page_top"> <div class="profile_online"><div id="profile_online_lv" style="display: none;">Online<b
class="mob_onl profile_mob_onl unshown" id="profile_mobile_online" onmouseover="mobileOnlineTip(this, {mid: cur.oid, right: 1})" onclick="mobilePromo(); "></b></div>
<div id="profile_time_lv"></div> </div>
<div class="page_name">Павел Дуров<a href="/verify" class="page_verified" onmouseover="pageVerifiedTip(this, {mid: 1})"></a></div> <div class="page_current_info" id="page_current_info">
<span class="current_text">道德經</span></div></div>...
А вот так сайт выглядит на самом деле
HTMLHyperText Markup LanguageСтруктура документа
Ответ на вопрос «Что?»
HTMLСтруктура декларативного языка
<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>У тегов есть атрибуты.Атрибуты задают параметры.
DOMDocument Object ModelИнтерпретация HTML браузером
Ответ на вопрос «Что происходит?»
HTMLИнтерпретация браузером
HTMLИнтерпретация браузером
WebKit Gecko EdgeHTMLранее - Trident
BlinkранееChrome – WebKitOpera - Presto
CSSCascading Style Sheets
Вид документа
Ответ на вопрос «Как (выглядит)?»
CSSСтруктура декларативного языка
body {width: 100%;height: auto;background-color: #42535b;
}
CSSСтруктура декларативного языка
body {width: 100%;
}
Это селектор.
CSSСтруктура декларативного языка
body {width: 100%;
}
Это свойство.
CSSСтруктура декларативного языка
body {width: 100%;
}
Это значение свойства.
CSSТипы селекторов
bodyСелектор тега.Просто название.
CSSТипы селекторов
.activeСелектор класса.Точка перед именем.
<li class="active">…
CSSТипы селекторов
#uniqueСелектор ID.Решетка перед именем.
<div id="unique">…
#id { … }Используйте как можно режеА лучше вообще никогда
CSSТипы селекторов
[href]Селектор атрибута.Внутри квадратных скобок.
<a href="">…
CSSТипы селекторов
[href="…"], [href^="…"], [href~="…"], …Селекторы по значению атрибута.Тысячи их.
CSSТипы селекторов
*Селектор всего.
CSSТипы селекторов
<div><p></p><section><p></p></section><section><p></p></section>
</div>
CSSТипы селекторов
div, p { … }Множественный селектор.Разделяется запятой.
CSSТипы селекторов
<div><p></p><section><p></p></section><section><p></p></section>
</div>
CSSТипы селекторов
div p { … }Селектор непрямого потомка.Разделяется пробелом.
CSSТипы селекторов
<div><p></p><section><p></p></section><section><p></p></section>
</div>
CSSТипы селекторов
div > p { … }Селектор прямого потомка.Разделяется знаком «больше».
CSSТипы селекторов
<div><p></p><section><p></p></section><section><p></p></section>
</div>
CSSТипы селекторов
p + section { … }Селектор следующего соседа.Разделяется знаком «плюс».
CSSТипы селекторов
<div><p></p><section><p></p></section><section><p></p></section>
</div>
CSSТипы селекторов
p ~ section { … }Селектор всех соседей после тега.Разделяется знаком «тильда».
CSSТипы селекторов
<div><p></p><section><p></p></section><section><p></p></section>
</div>
CSSТипы селекторов
:hover a:hover
Псевдокласс.Двоеточие перед типом.
CSSТипы селекторов
:before div:before
Псевдоэлемент.Двоеточие перед типом.
CSSТипы селекторов
span.icon:before {content: "";
}Не укажете контент – не будет.
CSSCascading Style Sheets
Что такое «каскады»
CSSКаскады
ul.menu > li a:hover:before { … }nav.primary li.nav-item.active { … }.container > p, .container > h1 { … }И тому подобное.Это каскады – зависимости.
CSSВес селекторов
#ID.class, [attribute] tag
У разных типов селекторов – разный «вес».
CSSВес селекторов
!importantstyle=""#ID.class, [attribute]tag*
Селекторов больше, чем кажется.
CSSВес селекторов
0 , 0 , 0 , 0 , 0 !important style id class tag
Матрица распределения «весов».
CSSВес селекторов
0 , 0 , 0 , 0 , 1 !important style id class tag
div { … }
CSSВес селекторов
0 , 0 , 0 , 0 , 2 !important style id class tag
div a { … }
CSSВес селекторов
0 , 0 , 0 , 1 , 2 !important style id class tag
div a.active { … }
CSSВес селекторов
0 , 0 , 1 , 1 , 2 !important style id class tag
div#first a.active { … }
CSSВес селекторов
0 , 0 , 1 , 0 , 2 !important style id class tag
div#first a { … }
CSSВес селекторов
0 , 1 , 0 , 0 , 0 !important style id class tag
<a href=“#” style=“…”>…</a>
CSSВес селекторов
1 , 0 , 0 , 0 , 0 !important style id class tag
a { width: 100% !important; }
CSSВес селекторов
1 , 1 , 0 , 0 , 0 !important style id class tag
a { width: 100% !important; }<a href=“#” style=“width: auto !important”>…</a>
CSSВес селекторов
!important > style > #id > .class = [attr] > tag > *
Зависимость надо помнить.
!importantНе используйте никогда
Вообще никогда
Даже под страхом смерти
CSSCascading Style Sheets
Свойства и значения
CSSСвойства
width: 100%;
CSSСвойства
{propertyName}: {value}
CSSСвойства
body {width: 100%;padding: 10px 5% 20px;background: url(image.png) no-repeat center
center;font-family: ‘Open Sans’, Arial, sans-serif;
}
CSSСвойства
-webkit-{property}: …; -moz-{property}: …; -ms-{property}: …; -o-{property}: …;
Браузеро-зависимые селекторы. Анахронизм, но пригодится.
CSSСвойства
input::-webkit-placeholder {…
}
Могут быть в самых неожиданных местах.
CSSCascading Style Sheets
Дополнительно
CSSДополнительно
Методологии
_bemOOCSSSMACCSи много других страшных слов
CSSДополнительно
Препроцессоры
LESSSASSStylusи много других страшных слов
CSSДополнительно
Препроцессоры
.container {…
.element {a {&:hover { … } }
p { … }
&.active { … }}
}
CSSДополнительно
Препроцессоры
.container {…
.element {a {&:hover { … } }
p { … }
&.active { … }}
}
.container { … }
.container .element a:hover { … }.container .element p { … }.container .element.active { … }
>
CSSДополнительно
Препроцессоры
.mixin (@param){some: func(@param,20%);
}
.useful-class {.mixin (20);
}
.useless-class {.mixin (30);
}
CSSДополнительно
Препроцессоры
.mixin (@param){some: func(@param,20%);
}
.useful-class {.mixin (20);
}
.useless-class {.mixin (30);
}
.useful-class {some: 22;
}
.uselessclass {some: 23;
}
>
ЭтоКонец
htmlbook.ruhtmlacademy.ru
ЭтоКонец
Вопросы?
artfield.mevk.com/artfieldfest
МинутаРекламы
kubikami.landvk.com/kubikami
flo.one