Embed Size (px)
Citation preview
Михаил Трошев Руководитель группы поисковых интерфейсов
CSS
План
Вступление
Общие принципы
Синтаксис
Экосистема
4
Знания
хаки
справочные знания
синтаксис
5 Шаманство
6
Общие принципы
— представление отдельно от данных — гибкая настройка под платформы — текстовый формат — наследование, каскадирование
План
✓ Вступление
✓ Общие принципы
Синтаксис
Экосистема
Синтаксис
Комментарии
Комментарии
/* TODO: причесать */ h1{color: red; padding:10px; margin : 0;background:blue} button { cursor: pointer; // cursor: hand; }
Синтаксис
Комментарии Селекторы
Type selector — выбор по тегу
Селекторы
span { color: red; }
ID selector — выбор по атрибуту id
Селекторы
#title { color: red; }
Class selector — выбор по атрибуту class
Селекторы
.title { color: red; } .link.current { font-weight: bold; }
Universal selector — выбор всех элементов
Селекторы
* { font-size: 100%; }
Attribute selector — выбор по атрибуту
Селекторы
a[href] { color: red; } input[id][type="button"] { color: green; }
Группировка селекторов
Селекторы
h1, p, span { color: green; } .kvadratish, .praktish, .gut { color: green; }
Селекторы
div.b-head-search form#search a[href] { border: 3px red; }
Вес селектора — (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 */
Вес селектора?
Селекторы
<style> div.b-head-search form#search a[href] { border: 3px red; } </style>
Вес селектора?
Селекторы
<style> div.b-head-search form#search a[href] { border: 3px red; } </style> /* 0,1,2,3 */
Синтаксис
Комментарии Селекторы Комбинаторы
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>
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>
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>
General sibling combinator — предшественник
Комбинаторы
<style> h2 ~ p { text-decoration: underline }</style> <h2>Title</h2> <h3>Subtitle</h3> <p>Para 1.</p> <p>Para 2.</p>
Синтаксис
Комментарии Селекторы Комбинаторы Псевдо-классы
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; }
Structural pseudo-classes
Псевдо-классы
:first-child :last-child :nth-child(n) :nth-last-child(n) :nth-of-type(n) ...
Structural pseudo-classes
Псевдо-классы
:first-child :last-child :nth-child(n) :nth-last-child(n) :nth-of-type(n) ...
UI element states pseudo-classes
Псевдо-классы
:checked :enabled :disabled
Синтаксис
Комментарии Селекторы Комбинаторы Псевдо-классы Псевдо-элементы
Создают дополнительные DOM-элементы
Псевдо-элементы
::after ::before ::first-letter ::first-line ::selection
Псевдо-элементы
<a href="//maps.yandex.ru" target="_blank">Карты</a> <style> a[target="_blank"]:after { position: absolute; margin-left: 0.5em; content: ' ⇱'; transform: rotate(90deg); } </style>
Синтаксис
Как правильно: псевдо-селекторы, псевдо-классы или псевдо-элементы?
Синтаксис
Комментарии Селекторы Комбинаторы Псевдо-классы Псевдо-элементы Свойства
Формат записи
Свойства
/* селектор { свойство1: значение; свойство2: значение; } */ * { font-size: 100%; }
Формат записи
Свойства
/* короткая запись */ 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; }
Формат записи
Свойства
/* короткая запись */ body { font: bold 12px/14px sans-serif } /* полная запись */ body { font-weight: bold; font-size: 12px; line-height: 14px; font-family: sans-serif; }
Формат записи
Свойства
/* короткая запись */ 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;
Значения
Свойства
width: 100%; /* px, pt, em */ font-size: 100%; /* px, pt, em */ font-family: Courier, "Lucida Console", monospace;
Значения
Свойства
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 */
Значения
Свойства
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;
Вендорные префиксы
Свойства
-webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
Синтаксис
Комментарии Селекторы Комбинаторы Псевдо-классы Псевдо-элементы Свойства Правила
Правила
@import — внешний файл @media — определенный тип устройств @namespace — пространство имён документа @charset — кодировка документы @document, @supports, @font-face — mozilla experimental
@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);
@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) { ... }
Синтаксис
Комментарии Селекторы Комбинаторы Псевдо-классы Псевдо-элементы Свойства Правила
План
✓ Вступление
✓ Общие принципы
✓ Синтаксис
Экосистема
Экосистема
Фреймворки Препроцессоры Оптимизаторы Генераторы Справочники
Фреймворки
HTML5 Boilerplate Twitter Bootstrap Foundation 960 Grid System
Препроцессоры
LESS Sass, Compass Stylus BOSS
Оптимизаторы
CSSO YUI Compressor
Генераторы
prefixr.com colorzilla.com gradientfinder.com [ base64 ] fontsquirrel.com
Справочники
w3.org developer.mozilla.org msdn.microsoft.com caniuse.com html5please.com
План
✓ Вступление
✓ Общие принципы
✓ Синтаксис
✓ Экосистема
