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