Сергей Сыркин - CSS
3 likes1,769 views
Документ представляет собой справочник по основам CSS, включая синтаксис, селекторы, псевдоклассы, а также свойства, размеры и цвета. Описаны ключевые аспекты, такие как комбинаторы, вендорные префиксы и использование современных фреймворков и препроцессоров. В дополнение к технической информации приведены ссылки на ресурсы и инструменты для оптимизации и генерации CSS.
![Синтаксис
Селекторы:
* {...} /* Универсальный селектор */
div {...} /* Теги */
.menu {...} /* Класс */
.menu.main {...} /* Несколько классов */
#menu {...} /* ID атрибут */
a[href] {...} /* Атрибут */
input[id][type=button] {...} /* Теги */
8](https://image.slidesharecdn.com/sergeysyrkincss-130320123853-phpapp01/85/CSS-8-320.jpg)
![Синтаксис
Группировка селекторов:
.menu,
.item,
#link
{
color: blue
}
div.b-head-search form#search a[href]
{
border: 3px red;
}
9](https://image.slidesharecdn.com/sergeysyrkincss-130320123853-phpapp01/85/CSS-9-320.jpg)
![Синтаксис
Вес селекторов:
<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](https://image.slidesharecdn.com/sergeysyrkincss-130320123853-phpapp01/85/CSS-10-320.jpg)
Сергей Сыркин - CSS
- 1. CSS в начале... Сергей Сыркин разработчик интерфейсов
- 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. Сергей Сыркин Разработчик интерфейсов [email protected] vk.com/id13678305 Спасибо