Михаил Трошев — css: Систематизация базовых знаний
TRANSCRIPT
![Page 1: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/1.jpg)
![Page 2: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/2.jpg)
Михаил Трошев Руководитель группы поисковых интерфейсов
CSS
![Page 3: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/3.jpg)
План
Вступление
Общие принципы
Синтаксис
Экосистема
![Page 4: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/4.jpg)
4
Знания
хаки
справочные знания
синтаксис
![Page 5: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/5.jpg)
5 Шаманство
![Page 6: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/6.jpg)
6
Общие принципы
— представление отдельно от данных — гибкая настройка под платформы — текстовый формат — наследование, каскадирование
![Page 7: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/7.jpg)
План
✓ Вступление
✓ Общие принципы
Синтаксис
Экосистема
![Page 8: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/8.jpg)
Синтаксис
Комментарии
![Page 9: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/9.jpg)
Комментарии
/* TODO: причесать */ h1{color: red; padding:10px; margin : 0;background:blue} button { cursor: pointer; // cursor: hand; }
![Page 10: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/10.jpg)
Синтаксис
Комментарии Селекторы
![Page 11: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/11.jpg)
Type selector — выбор по тегу
Селекторы
span { color: red; }
![Page 12: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/12.jpg)
ID selector — выбор по атрибуту id
Селекторы
#title { color: red; }
![Page 13: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/13.jpg)
Class selector — выбор по атрибуту class
Селекторы
.title { color: red; } .link.current { font-weight: bold; }
![Page 14: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/14.jpg)
Universal selector — выбор всех элементов
Селекторы
* { font-size: 100%; }
![Page 15: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/15.jpg)
Attribute selector — выбор по атрибуту
Селекторы
a[href] { color: red; } input[id][type="button"] { color: green; }
![Page 16: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/16.jpg)
Группировка селекторов
Селекторы
h1, p, span { color: green; } .kvadratish, .praktish, .gut { color: green; }
![Page 17: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/17.jpg)
Селекторы
div.b-head-search form#search a[href] { border: 3px red; }
![Page 18: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/18.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 */
![Page 19: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/19.jpg)
Вес селектора?
Селекторы
<style> div.b-head-search form#search a[href] { border: 3px red; } </style>
![Page 20: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/20.jpg)
Вес селектора?
Селекторы
<style> div.b-head-search form#search a[href] { border: 3px red; } </style> /* 0,1,2,3 */
![Page 21: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/21.jpg)
Синтаксис
Комментарии Селекторы Комбинаторы
![Page 22: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/22.jpg)
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>
![Page 23: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/23.jpg)
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>
![Page 24: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/24.jpg)
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>
![Page 25: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/25.jpg)
General sibling combinator — предшественник
Комбинаторы
<style> h2 ~ p { text-decoration: underline }</style> <h2>Title</h2> <h3>Subtitle</h3> <p>Para 1.</p> <p>Para 2.</p>
![Page 26: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/26.jpg)
Синтаксис
Комментарии Селекторы Комбинаторы Псевдо-классы
![Page 27: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/27.jpg)
Link & user action pseudo-classes
Псевдо-классы
a:link { color: blue; } a:visited { color: purple; } a:active { font-weight: bold; } a:hover { color: red; } a:focus { outline: none; }
![Page 28: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/28.jpg)
Structural pseudo-classes
Псевдо-классы
:first-child :last-child :nth-child(n) :nth-last-child(n) :nth-of-type(n) ...
![Page 29: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/29.jpg)
Structural pseudo-classes
Псевдо-классы
:first-child :last-child :nth-child(n) :nth-last-child(n) :nth-of-type(n) ...
![Page 30: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/30.jpg)
UI element states pseudo-classes
Псевдо-классы
:checked :enabled :disabled
![Page 31: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/31.jpg)
Синтаксис
Комментарии Селекторы Комбинаторы Псевдо-классы Псевдо-элементы
![Page 32: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/32.jpg)
Создают дополнительные DOM-элементы
Псевдо-элементы
::after ::before ::first-letter ::first-line ::selection
![Page 33: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/33.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>
![Page 34: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/34.jpg)
Синтаксис
Как правильно: псевдо-селекторы, псевдо-классы или псевдо-элементы?
![Page 35: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/35.jpg)
Синтаксис
Комментарии Селекторы Комбинаторы Псевдо-классы Псевдо-элементы Свойства
![Page 36: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/36.jpg)
Формат записи
Свойства
/* селектор { свойство1: значение; свойство2: значение; } */ * { font-size: 100%; }
![Page 37: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/37.jpg)
Формат записи
Свойства
/* короткая запись */ 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; }
![Page 38: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/38.jpg)
Формат записи
Свойства
/* короткая запись */ body { font: bold 12px/14px sans-serif } /* полная запись */ body { font-weight: bold; font-size: 12px; line-height: 14px; font-family: sans-serif; }
![Page 39: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/39.jpg)
Формат записи
Свойства
/* короткая запись */ 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;
![Page 40: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/40.jpg)
Значения
Свойства
width: 100%; /* px, pt, em */ font-size: 100%; /* px, pt, em */ font-family: Courier, "Lucida Console", monospace;
![Page 41: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/41.jpg)
Значения
Свойства
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 */
![Page 42: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/42.jpg)
Значения
Свойства
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;
![Page 43: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/43.jpg)
Вендорные префиксы
Свойства
-webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
![Page 44: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/44.jpg)
Синтаксис
Комментарии Селекторы Комбинаторы Псевдо-классы Псевдо-элементы Свойства Правила
![Page 45: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/45.jpg)
Правила
@import — внешний файл @media — определенный тип устройств @namespace — пространство имён документа @charset — кодировка документы @document, @supports, @font-face — mozilla experimental
![Page 46: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/46.jpg)
@import
Свойства
/* @import url 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);
![Page 47: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/47.jpg)
@media
Свойства
/* @media media-types list-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) { ... }
![Page 48: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/48.jpg)
Синтаксис
Комментарии Селекторы Комбинаторы Псевдо-классы Псевдо-элементы Свойства Правила
![Page 49: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/49.jpg)
План
✓ Вступление
✓ Общие принципы
✓ Синтаксис
Экосистема
![Page 50: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/50.jpg)
![Page 51: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/51.jpg)
Экосистема
Фреймворки Препроцессоры Оптимизаторы Генераторы Справочники
![Page 52: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/52.jpg)
Фреймворки
HTML5 Boilerplate Twitter Bootstrap Foundation 960 Grid System
![Page 53: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/53.jpg)
Препроцессоры
LESS Sass, Compass Stylus BOSS
![Page 54: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/54.jpg)
Оптимизаторы
CSSO YUI Compressor
![Page 55: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/55.jpg)
Генераторы
prefixr.com colorzilla.com gradientfinder.com [ base64 ] fontsquirrel.com
![Page 56: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/56.jpg)
Справочники
w3.org developer.mozilla.org msdn.microsoft.com caniuse.com html5please.com
![Page 57: Михаил Трошев — CSS: Систематизация базовых знаний](https://reader034.vdocuments.pub/reader034/viewer/2022042701/55cf3282bb61ebfe568b4732/html5/thumbnails/57.jpg)
План
✓ Вступление
✓ Общие принципы
✓ Синтаксис
✓ Экосистема