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 & 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; }

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 states pseudo-classes
:checked
:enabled
:disabled

31. Синтаксис
Комментарии
Селекторы
Комбинаторы
Псевдо-классы
Псевдо-элементы

32. Псевдо-элементы
Создают дополнительные DOM-элементы
::after
::before
::first-letter
::first-line
::selection

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
/* @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);

47. Свойства
@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) { ... }

48. Синтаксис
Комментарии
Селекторы
Комбинаторы
Псевдо-классы
Псевдо-элементы
Свойства
Правила

49. План
✓ Вступление
✓ Общие принципы
✓ Синтаксис
Экосистема

51. Экосистема
Фреймворки
Препроцессоры
Оптимизаторы
Генераторы
Справочники

52. Фреймворки
HTML5 Boilerplate
Twitter Bootstrap
Foundation
960 Grid System

53. Препроцессоры
LESS
Sass, Compass
Stylus
BOSS

54. Оптимизаторы
CSSO
YUI Compressor

55. Генераторы
prefixr.com
colorzilla.com
gradientfinder.com
[ base64 ]
fontsquirrel.com

56. Справочники
w3.org
developer.mozilla.org
msdn.microsoft.com
caniuse.com
html5please.com

57. План
✓ Вступление
✓ Общие принципы
✓ Синтаксис
✓ Экосистема

58. Михаил Трошев
Руководитель группы
mishanga@yandex-team.ru
Спасибо