В лекции рассказно о трех основных китах CSS: синтаксис, справочные знания и хаки. Данная лекция поможет определиться с направлением в изучении CSS, а также поможет заполнить пробельные знания.

1. CSS
в начале...
Сергей Сыркин
разработчик интерфейсов

2. Общие понятия

3. Справочные
Синтаксис знания
Хаки
3

4. 4

5. Немного истории
• Придуман для разделения представления от данных
• Это текстовый формат
• Наследование и каскадирование
• Первая версия CSS была принята как рекомендация W3C
17 декабря 1996 года
5

6. Синтаксис

7. Синтаксис
Комментарии:
/* TODO: причесать */
h1{color: red; padding:10px; margin :
0;background:blue}
button
{
cursor: pointer;
// cursor: hand;
}
7

8. Синтаксис
Селекторы:
* {...} /* Универсальный селектор */
div {...} /* Теги */
.menu {...} /* Класс */
.menu.main {...} /* Несколько классов */
#menu {...} /* ID атрибут */
a[href] {...} /* Атрибут */
input[id][type=button] {...} /* Теги */
8

9. Синтаксис
Группировка селекторов:
.menu,
.item,
#link
{
color: blue
}
div.b-head-search form#search a[href]
{
border: 3px red;
}
9

10. Синтаксис
Вес селекторов:
<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 */
!important /* повышает приоритет */
10

11. 11

12. Синтаксис
Комбинаторы:
.main .menu {...} /* Выбор любого потомка */
.main > .menu {...} /* Выбор прямого родителя */
.menu__one + .menu__two {...} /* Следующий сосед */
.menu__one ~ .menu__two {...} /* Следующий сосед */
12

13. Синтаксис
Ссылки & действия юзера (псевдоклассы):
:link { color: blue; }
:visited { color: purple; }
:active { font-weight: bold; }
:hover { color: red; }
:focus { outline: none; }
13

14. Синтаксис
Структурные псевдоклассы:
:first-child
:last-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
...
14

15. Синтаксис
Псевдоклассы состояния:
:checked
:enabled
:disabled
14

16. Синтаксис
Псевдоэлементы:
::after
::before
::first-letter
::first-line
::selection
15

17. Синтаксис
Свойства:
/*
селектор {
свойство1: значение;
свойство2: значение
}
*/
div
{
font-size: 100%
}
16

18. Синтаксис
Короткая и длинная запись:
/* короткая запись */
ul { margin: 0 }
ul { margin: 0 1em }
ul { margin: 0 1em 2em }
ul { margin: 0 1em 2em 3em }
/* полная запись */
ul
{
margin-left: 3em;
margin-right: 1em;
}
17

19. Синтаксис
Размеры:
width: 100%; /* px, pt, em */
font-size: 100%; /* px, pt, em */
18

20. Синтаксис
Цвет:
/* keyword */
color: red;
/* rgb hex */
color: #ff0000;
/* short rgb hex */
color: #f00;
/* rgb dec */
color: rgb(255, 0, 0 );
/* rgb dec alpha */
color: rgba(255, 0, 0, 0.5);
/* hue, saturation, lightness */
color: hsl(0, 100%, 100%);
/* hsl alpha */
color: hsla(0, 100%, 100%, 0.5);
19

21. Синтаксис
Картинки, градиенты:
background-image: url(img.png);
background-image:
url(data:image/png;base64,iVB...gg==);
background-image:
linear-gradient( 45deg, blue, red );
20

22. Синтаксис
Переходы и анимация:
transition: all 5s ease 2s;
animation: ‘slide’ 10s ease 3s 2 alternate;
21

23. Синтаксис
Вендорные префиксы:
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
22

24. Синтаксис
@import — внешний файл
@media — определенный тип устройств
@namespace — пространство имён документа (xsl)
@charset — кодировка документы
23

25. Окружающая среда

26. Фреймворки
Resets, Twitter Bootstrap etc.
25

27. Препроцессоры
LESS, SESS, Stylus etc
26

28. Оптимизаторы
Zen coding, hayaku (http://hayakubundle.com/)
CSSComb (http://csscomb.ru/)
CSSO (http://css.github.com/csso/)
27

29. Справочники
Спецификация (эту ссылку найдите сами)
Справочники от создателей браузеров
(msdn.microsoft.com, developer.mozilla.org)
Спровочники (caniuse.com, html5please.com)
Генераторы CSS (colorzilla.com, createcss3.com)
28

30. Сергей Сыркин
Разработчик интерфейсов
ssyrkin@yandex.ru
vk.com/id13678305
Спасибо