Артем Маркушев — HTML и CSS по кирпичикам. Детали.

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>


<body>Это тег. Тег – это контейнер.


<p>I’m a paragraph</p>Это контент тега.


<div> <img src=“image.png” /></div>

А это тег в виде контента другого тега.


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

}


body {width: 100%;

}

Это селектор.


body {width: 100%;

}

Это свойство.


body {width: 100%;

}

Это значение свойства.

CSSТипы селекторов

bodyСелектор тега.Просто название.


.activeСелектор класса.Точка перед именем.

<li class="active">…


#uniqueСелектор ID.Решетка перед именем.

<div id="unique">…

#id { … }Используйте как можно режеА лучше вообще никогда


[href]Селектор атрибута.Внутри квадратных скобок.

<a href="">…


[href="…"], [href^="…"], [href~="…"], …Селекторы по значению атрибута.Тысячи их.


*Селектор всего.


div, p { … }Множественный селектор.Разделяется запятой.



</div>


div p { … }Селектор непрямого потомка.Разделяется пробелом.



</div>


div > p { … }Селектор прямого потомка.Разделяется знаком «больше».



</div>


p + section { … }Селектор следующего соседа.Разделяется знаком «плюс».



</div>


p ~ section { … }Селектор всех соседей после тега.Разделяется знаком «тильда».



</div>


:hover a:hover

Псевдокласс.Двоеточие перед типом.


:before div:before

Псевдоэлемент.Двоеточие перед типом.


span.icon:before {content: "";

}Не укажете контент – не будет.


Что такое «каскады»

CSSКаскады

ul.menu > li a:hover:before { … }nav.primary li.nav-item.active { … }.container > p, .container > h1 { … }И тому подобное.Это каскады – зависимости.

CSSВес селекторов

#ID.class, [attribute] tag

У разных типов селекторов – разный «вес».


!importantstyle=""#ID.class, [attribute]tag*

Селекторов больше, чем кажется.


0 , 0 , 0 , 0 , 0 !important style id class tag

Матрица распределения «весов».



div { … }



div a { … }



div a.active { … }



div#first a.active { … }



div#first a { … }



a { width: 100% !important; }



a { width: 100% !important; }<a href=“#” style=“width: auto !important”>…</a>


!important > style > #id > .class = [attr] > tag > *

Зависимость надо помнить.

!importantНе используйте никогда

Вообще никогда

Даже под страхом смерти


Свойства и значения

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 {…

}

Могут быть в самых неожиданных местах.


Дополнительно

CSSДополнительно

Методологии

_bemOOCSSSMACCSи много других страшных слов


Препроцессоры

LESSSASSStylusи много других страшных слов



.container {…

.element {a {&:hover { … } }

p { … }

&.active { … }}

}



.container {…

.element {a {&:hover { … } }

p { … }

&.active { … }}

}

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

}



.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

Артем Маркушев — HTML и CSS по кирпичикам. Детали.

Software

Transcript of Артем Маркушев — HTML и CSS по кирпичикам. Детали.