Михаил Трошев — CSS: Систематизация базовых знаний

Михаил Трошев Руководитель группы поисковых интерфейсов

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

План

✓ Вступление

✓ Общие принципы

✓ Синтаксис

✓ Экосистема

Михаил Трошев

Руководитель группы

mishanga@yandex-team.ru

Спасибо