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

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

2. HTML HyperText Markup Language

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

4. <body> это тег HTML – Структура декларативного языка

5. <p>I’m a paragraph</p> это контент тега HTML – Структура декларативного языка

6. <div> <img src=“image.png” /> </div> и это контент тега HTML – Структура декларативного языка

7. <a href=“#target”>…</a> а это атрибут HTML – Структура декларативного языка

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

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

10. HTML – Интерпретация браузером WebKit Gecko TridentBlink

11. CSS Cascading Style Sheets

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

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

14. .active селектор класса (<li class=“active”>…) CSS – Типы селекторов

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

16. [target] селектор атрибута CSS – Типы селекторов

17. :hover псевдокласс CSS – Типы селекторов

18. :before псевдоэлемент CSS – Типы селекторов

19. span.icon:before { content: “”; } CSS – Структура декларативного языка

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

21. CSS – Каскады #ID .class tag

22. CSS – Каскады #ID .class tag !important style=“” [attr] *

23. 0,0,0,0,0 CSS – Каскады

24. div 0,0,0,0,1 CSS – Каскады

25. div a 0,0,0,0,2 CSS – Каскады

26. div a.active 0,0,0,1,2 CSS – Каскады

27. div#first a.active 0,0,1,1,2 CSS – Каскады

28. div#first a 0,0,1,0,2 CSS – Каскады

29. <a href=“#” style=“…”>…</a> 0,1,0,0,0 CSS – Каскады

30. a { width: 100% !important; } 1,0,0,0,0 CSS – Каскады

31. a { width: 100% !important; } 1,0,0,0,0 <a href=“#” style=“width: auto !important”>…</a> 1,1,0,0,0 CSS – Каскады

32. !important > style > #id > .class > tag = [attr] > * CSS – Каскады

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

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

35. body { width: 100%; padding: 10px 5% 20px; background: url(image.png) 1% 1%; } CSS – Структура декларативного языка

36. -webkit-%propertyName%: %propertyValue%; -moz-%propertyName%: %propertyValue%; -o-%propertyName%: %propertyValue%; -ms-%propertyName%: %propertyValue%; CSS – Браузеро-зависимые свойства

37. input::-webkit-placeholder { … } CSS – Браузеро-зависимые свойства

38. _bem, OOCSS, SMACCS и много других страшных слов CSS – Методологии

39. LESS, SASS, Stylus и много других страшных слов CSS – Препроцессоры

40. .container { … .element { a { &:hover { … } } p { … } &.active { … } } } CSS – Препроцессоры

41. .mixin (@param){ some: func(@param,20%); } .useful-class { .mixin (20); } .useless-class { .mixin (30); } CSS – Препроцессоры

42. .container { … .element { a { &:hover { … } } p { … } &.active { … } } } CSS – Препроцессоры .container { … } .container .element a:hover { … } .container .element p { … } .container .element.active { … } >

43. .mixin (@param){ some: func(@param,20%); } .useful-class { .mixin (20); } .useless-class { .mixin (30); } CSS – Препроцессоры .useful-class { some: 22; } .uselessclass { some: 23; } >

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

45. Вопросы? Вася, это конец…

46. vk.com/kubikami Вася, это конец…

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

Du liest eine Vorschau.

Hier ansehen

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

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)

Ähnlich wie Артем Маркушев - HTML & CSS (20)

Weitere von DataArt (20)

Aktuellste (20)