Артем Маркушев - HTML & CSS

HTML & CSS
по кирпичикам
Артем Маркушев, Senior Webmaster / Frontend Developer

HTML
HyperText Markup Language

<html>
<head>
<title>Hello, World</title>
</head>
<body>
…
</body>
</html>
HTML – Структура декларативного языка

<body>
это тег

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

<div>
<img src=“image.png” />
</div>
и это контент тега

<a href=“#target”>…</a>
а это атрибут

DOM
HTML – Интерпретация браузером

WebKit Gecko TridentBlink

body {
width: 100%;
height: auto;
background-color: #42535b;
}
CSS – Структура декларативного языка

body
селектор тега
CSS – Типы селекторов

.active
селектор класса
(<li class=“active”>…)

#unique
селектор ID
(<li id=“unique”>…)
используйте пореже
а лучше - никогда

[target]
селектор атрибута

:hover
псевдокласс

:before
псевдоэлемент

span.icon:before {
content: “”;
}

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

#ID .class tag

#ID
.class tag
!important
style=“” [attr]
*

0,0,0,0,0

div
0,0,0,0,1

div a
0,0,0,0,2

div a.active
0,0,0,1,2

div#first a.active
0,0,1,1,2

div#first a
0,0,1,0,2

<a href=“#” style=“…”>…</a>
0,1,0,0,0

a { width: 100% !important; }
1,0,0,0,0

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

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

width: 100%;
CSS – Свойства

%propertyName%: %propertyValue%;
CSS – Свойства

body {
width: 100%;
padding: 10px 5% 20px;
background: url(image.png) 1% 1%;
}

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

.mixin (@param){
some: func(@param,20%);
}
.useful-class {
.mixin (20);
}
.useless-class {
.mixin (30);
}

.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);
}
.useful-class {
some: 22;
}
.uselessclass {
some: 23;
}
>

htmlbook.ru
htmlacademy.ru
Вася, это конец…

Вопросы?

vk.com/kubikami

Артем Маркушев - HTML & CSS

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Артем Маркушев - HTML & CSS

Similaire à Артем Маркушев - HTML & CSS (20)

Plus de DataArt

Plus de DataArt (20)

Dernier

Dernier (9)

Артем Маркушев - HTML & CSS