Download to read offline
![Селекторы
Attribute selector — выбор по атрибуту
a[href] {
color: red;
}
input[id][type="button"] {
color: green;
}](https://image.slidesharecdn.com/troshevcss-121201024058-phpapp01/85/CSS-15-320.jpg)
![Селекторы
div.b-head-search form#search a[href] {
border: 3px red;
}](https://image.slidesharecdn.com/troshevcss-121201024058-phpapp01/85/CSS-17-320.jpg)
![Селекторы
Вес селектора — (a, b, c, d)
<span style="color: red"> <!-- 1,0,0,0 -->
#foo {} /* 0,1,0,0 */
.bar {} /* 0,0,1,0 */
span[id=foo] {} /* 0,0,1,0 */
span {} /* 0,0,0,1 */
* {} /* 0,0,0,0 */](https://image.slidesharecdn.com/troshevcss-121201024058-phpapp01/85/CSS-18-320.jpg)
![Селекторы
Вес селектора?
<style>
div.b-head-search form#search a[href] {
border: 3px red;
}
</style>](https://image.slidesharecdn.com/troshevcss-121201024058-phpapp01/85/CSS-19-320.jpg)
![Селекторы
Вес селектора?
<style>
div.b-head-search form#search a[href] {
border: 3px red;
}
</style>
/* 0,1,2,3 */](https://image.slidesharecdn.com/troshevcss-121201024058-phpapp01/85/CSS-20-320.jpg)
![Псевдо-элементы
<a href="//maps.yandex.ru" target="_blank">Карты</a>
<style>
a[target="_blank"]:after {
position: absolute;
margin-left: 0.5em;
content: ' ⇱';
transform: rotate(90deg);
}
</style>](https://image.slidesharecdn.com/troshevcss-121201024058-phpapp01/85/CSS-33-320.jpg)
![Генераторы
prefixr.com
colorzilla.com
gradientfinder.com
[ base64 ]
fontsquirrel.com](https://image.slidesharecdn.com/troshevcss-121201024058-phpapp01/85/CSS-55-320.jpg)
Uploaded byYandex
Михаил Трошев — CSS: Систематизация базовых знаний
Документ представляет собой руководство по синтаксису и принципам CSS, охватывающее базовые и продвинутые темы, такие как селекторы, комбинаторы и псевдо-классы. Включены примеры кода и объяснения различных свойств и правил оформления в CSS. Также рассматриваются фреймворки и инструменты, которые облегчают разработку стилей.
More Related Content
Similar to Михаил Трошев — CSS: Систематизация базовых знаний
Михаил Трошев — CSS: Систематизация базовых знаний
- 2. CSS Михаил Трошев Руководитель группыпоисковых интерфейсов
- 3.
- 4. Знания хаки справочные знания синтаксис 4
- 5. 5 Шаманство
- 6. Общие принципы — представление отдельно от данных — гибкая настройка под платформы — текстовый формат — наследование, каскадирование 6
- 7. План ✓ Вступление ✓ Общиепринципы Синтаксис Экосистема
- 8.
- 9. Комментарии /* TODO: причесать*/ h1{color: red; padding:10px; margin : 0;background:blue} button { cursor: pointer; // cursor: hand; }
- 10.
- 11. Селекторы Type selector —выбор по тегу span { color: red; }
- 12. Селекторы ID selector —выбор по атрибуту id #title { color: red; }
- 13. Селекторы Class selector —выбор по атрибуту class .title { color: red; } .link.current { font-weight: bold; }
- 14. Селекторы Universal selector —выбор всех элементов * { font-size: 100%; }
- 15. Селекторы Attribute selector —выбор по атрибуту a[href] { color: red; } input[id][type="button"] { color: green; }
- 16. Селекторы Группировка селекторов h1,p, span { color: green; } .kvadratish, .praktish, .gut { color: green; }
- 17. Селекторы div.b-head-search form#search a[href]{ border: 3px red; }
- 18. Селекторы Вес селектора —(a, b, c, d) <span style="color: red"> <!-- 1,0,0,0 --> #foo {} /* 0,1,0,0 */ .bar {} /* 0,0,1,0 */ span[id=foo] {} /* 0,0,1,0 */ span {} /* 0,0,0,1 */ * {} /* 0,0,0,0 */
- 19. Селекторы Вес селектора? <style> div.b-head-search form#search a[href] { border: 3px red; } </style>
- 20. Селекторы Вес селектора? <style> div.b-head-search form#search a[href] { border: 3px red; } </style> /* 0,1,2,3 */
- 21.
- 22. Комбинаторы Descendant combinator —выбор по родителю <style> div span { text-decoration: underline }</style> <div> <span>Span 1.</span> <strong> <span>Span 2.</span> </strong> </div> <span>Span 3.</span>
- 23. Комбинаторы Child combinator —прямой родитель <style> div > span { text-decoration: underline }</style> <div> <span>Span 1.</span> <strong> <span>Span 2.</span> </strong> </div> <span>Span 3.</span>
- 24. Комбинаторы Adjacent sibling combinator— выбор по соседу <style> strong + span { text-decoration: underline }</style> <div> <span>Span 1.</span> <strong> <span>Span 2.</span> </strong> </div> <span>Span 3.</span>
- 25. Комбинаторы General sibling combinator— предшественник <style> h2 ~ p { text-decoration: underline }</style> <h2>Title</h2> <h3>Subtitle</h3> <p>Para 1.</p> <p>Para 2.</p>
- 26.
- 27. Псевдо-классы Link & useraction pseudo-classes a:link { color: blue; } a:visited { color: purple; } a:active { font-weight: bold; } a:hover { color: red; } a:focus { outline: none; }
- 28. Псевдо-классы Structural pseudo-classes :first-child :last-child :nth-child(n) :nth-last-child(n) :nth-of-type(n) ...
- 29. Псевдо-классы Structural pseudo-classes :first-child :last-child :nth-child(n) :nth-last-child(n) :nth-of-type(n) ...
- 30. Псевдо-классы UI element statespseudo-classes :checked :enabled :disabled
- 31.
- 32.
- 33. Псевдо-элементы <a href="//maps.yandex.ru" target="_blank">Карты</a> <style> a[target="_blank"]:after{ position: absolute; margin-left: 0.5em; content: ' ⇱'; transform: rotate(90deg); } </style>
- 34. Синтаксис Как правильно: псевдо-селекторы, псевдо-классы или псевдо-элементы?
- 35.
- 36. Свойства Формат записи /* селектор { свойство1: значение; свойство2: значение; } */ * { font-size: 100%; }
- 37. Свойства Формат записи /* короткая запись */ ul { margin: 0 } /* 0 0 0 0 */ ul { margin: 0 1em } /* 0 1em 0 1em */ ul { margin: 0 1em 2em } /* 0 1em 2em 1em */ ul { margin: 0 1em 2em 3em } /* полная запись */ ul { margin-left: 3em; margin-right: 1em; }
- 38. Свойства Формат записи /*короткая запись */ body { font: bold 12px/14px sans-serif } /* полная запись */ body { font-weight: bold; font-size: 12px; line-height: 14px; font-family: sans-serif; }
- 39. Свойства Формат записи /*короткая запись */ background: url(img.png) #888 repeat-y top left fixed; /* Полная запись */ background-image: url(img.png); background-color: #888; background-repeat: repeat-y; background-position: top left; background-attachment: fixed;
- 40. Свойства Значения width: 100%; /*px, pt, em */ font-size: 100%; /* px, pt, em */ font-family: Courier, "Lucida Console", monospace;
- 41. Свойства Значения color: red; /*keyword */ color: #ff0000; /* rgb hex */ color: #f00; /* short rgb hex */ color: rgb(255, 0, 0 ); /* rgb dec */ color: rgba(255, 0, 0, 0.5); /* rgb dec with alpha */ color: hsl(0, 100%, 100%); /* hue, saturation, lightness */ color: hsla(0, 100%, 100%, 0.5); /* hsl with alpha */
- 42. Свойства Значения background-image: url(img.png); background-image: linear-gradient(45deg, blue, red ); background-image: url(data:image/png;base64,iVB...gg==); transition-property: opacity, left, top, height; transition-duration: 3s, 5s;
- 43. Свойства Вендорные префиксы -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
- 44.
- 45. Правила @import — внешнийфайл @media — определенный тип устройств @namespace — пространство имён документа @charset — кодировка документы @document, @supports, @font-face — mozilla experimental
- 46. Свойства @import /* @importurl list-of-media-queries; */ @import url("fineprint.css") print; @import url("bluish.css") projection, tv; @import 'custom.css'; @import "common.css" screen, projection; @import url('test.css') screen and (orientation:landscape);
- 47. Свойства @media /* @media media-typeslist-of-media-queries { ... } */ @media screen { body { font-size: 10pt } } @media screen, print { body { font-size: 13px } } @media screen and (max-width: 960) { ... } @media all and (orientation: portrait) { ... }
- 48.
- 49. План ✓ Вступление ✓ Общиепринципы ✓ Синтаксис Экосистема
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57. План ✓ Вступление ✓ Общиепринципы ✓ Синтаксис ✓ Экосистема
- 58. Михаил Трошев Руководитель группы mishanga@yandex-team.ru Спасибо