Download - Артем Маркушев - HTML & CSS
![Page 1: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/1.jpg)
HTML & CSSпо кирпичикам
Артем Маркушев, Senior Webmaster / Frontend Developer
![Page 2: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/2.jpg)
![Page 3: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/3.jpg)
![Page 4: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/4.jpg)
HTML
HyperText Markup Language
![Page 5: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/5.jpg)
<html><head>
<title>Hello, World</title></head><body>
…</body>
</html>
HTML – Структура декларативного языка
![Page 6: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/6.jpg)
<body>это тег
HTML – Структура декларативного языка
![Page 7: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/7.jpg)
<p>I’m a paragraph</p>это контент тега
HTML – Структура декларативного языка
![Page 8: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/8.jpg)
<div><img src=“image.png” />
</div>и это контент тега
HTML – Структура декларативного языка
![Page 9: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/9.jpg)
<a href=“#target”>…</a>а это атрибут
HTML – Структура декларативного языка
![Page 10: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/10.jpg)
DOM
HTML – Интерпретация браузером
![Page 11: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/11.jpg)
HTML – Интерпретация браузером
![Page 12: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/12.jpg)
HTML – Интерпретация браузером
WebKit Gecko TridentBlink
![Page 13: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/13.jpg)
CSS
Cascading Style Sheets
![Page 14: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/14.jpg)
body {width: 100%;height: auto;background-color: #42535b;
}
CSS – Структура декларативного языка
![Page 15: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/15.jpg)
bodyселектор тега
CSS – Типы селекторов
![Page 16: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/16.jpg)
.activeселектор класса
(<li class=“active”>…)
CSS – Типы селекторов
![Page 17: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/17.jpg)
#uniqueселектор ID
(<li id=“unique”>…)
используйте порежеа лучше - никогда
CSS – Типы селекторов
![Page 18: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/18.jpg)
[target]селектор атрибута
CSS – Типы селекторов
![Page 19: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/19.jpg)
:hoverпсевдокласс
CSS – Типы селекторов
![Page 20: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/20.jpg)
:beforeпсевдоэлемент
CSS – Типы селекторов
![Page 21: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/21.jpg)
span.icon:before {content: “”;
}
CSS – Структура декларативного языка
![Page 22: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/22.jpg)
ul.menu > li a:hover:before {…}
nav.primary li.nav-item.active {…}
.container > p, .container > h1 {…}
и тому подобное
CSS – Каскады
![Page 23: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/23.jpg)
CSS – Каскады
#ID .class tag
![Page 24: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/24.jpg)
CSS – Каскады
#ID.class
tag
!important
style=“” [attr]*
![Page 25: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/25.jpg)
0,0,0,0,0
CSS – Каскады
![Page 26: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/26.jpg)
div
0,0,0,0,1
CSS – Каскады
![Page 27: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/27.jpg)
div a
0,0,0,0,2
CSS – Каскады
![Page 28: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/28.jpg)
div a.active
0,0,0,1,2
CSS – Каскады
![Page 29: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/29.jpg)
div#first a.active
0,0,1,1,2
CSS – Каскады
![Page 30: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/30.jpg)
div#first a
0,0,1,0,2
CSS – Каскады
![Page 31: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/31.jpg)
<a href=“#” style=“…”>…</a>
0,1,0,0,0
CSS – Каскады
![Page 32: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/32.jpg)
a { width: 100% !important; }
1,0,0,0,0
CSS – Каскады
![Page 33: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/33.jpg)
a { width: 100% !important; }
1,0,0,0,0<a href=“#” style=“width: auto !important”>…</a>
1,1,0,0,0
CSS – Каскады
![Page 34: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/34.jpg)
!important > style > #id > .class > tag = [attr] > *
CSS – Каскады
![Page 35: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/35.jpg)
width: 100%;
CSS – Свойства
![Page 36: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/36.jpg)
%propertyName%: %propertyValue%;
CSS – Свойства
![Page 37: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/37.jpg)
body {width: 100%;padding: 10px 5% 20px;background: url(image.png) 1% 1%;
}
CSS – Структура декларативного языка
![Page 38: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/38.jpg)
-webkit-%propertyName%: %propertyValue%;-moz-%propertyName%: %propertyValue%;
-o-%propertyName%: %propertyValue%;-ms-%propertyName%: %propertyValue%;
CSS – Браузеро-зависимые свойства
![Page 39: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/39.jpg)
input::-webkit-placeholder {…
}
CSS – Браузеро-зависимые свойства
![Page 40: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/40.jpg)
_bem, OOCSS, SMACCS
и много других страшных слов
CSS – Методологии
![Page 41: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/41.jpg)
LESS, SASS, Stylus
и много других страшных слов
CSS – Препроцессоры
![Page 42: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/42.jpg)
.container {…
.element {a {
&:hover { … } }
p { … }
&.active { … }}
}
CSS – Препроцессоры
![Page 43: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/43.jpg)
.mixin (@param){some: func(@param,20%);
}
.useful-class {.mixin (20);
}
.useless-class {.mixin (30);
}
CSS – Препроцессоры
![Page 44: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/44.jpg)
.container {…
.element {a {
&:hover { … } }
p { … }
&.active { … }}
}
CSS – Препроцессоры
.container { … }
.container .element a:hover { … }
.container .element p { … }
.container .element.active { … }>
![Page 45: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/45.jpg)
.mixin (@param){some: func(@param,20%);
}
.useful-class {.mixin (20);
}
.useless-class {.mixin (30);
}
CSS – Препроцессоры
.useful-class {some: 22;
}
.uselessclass {some: 23;
}
>
![Page 46: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/46.jpg)
htmlbook.ru
htmlacademy.ru
Вася, это конец…
![Page 47: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/47.jpg)
Вопросы?
Вася, это конец…
![Page 48: Артем Маркушев - HTML & CSS](https://reader035.vdocuments.site/reader035/viewer/2022081800/55c5a91bbb61eb067f8b462b/html5/thumbnails/48.jpg)
vk.com/kubikami
Вася, это конец…