![[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)
![Scino: Front-end [part-1]](https://cdn.slidesharecdn.com/ss_thumbnails/scion-front-end-part-1-140411050351-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Viewers also liked (20)
Similar to Артем Маркушев - HTML & CSS (20)
More from DataArt (20)
Артем Маркушев - 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=/slideshow/html-css-50595533/50595533/“/slideshow/html-css-50595533/50595533/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(/slideshow/html-css-50595533/50595533/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; } >