Наверняка вы видели разные шпаргалки по веб-программированию. Теперь появились шпаргалки по CSS .В данной таблице приведены основные селекторы и свойства CSS.
CSS (Каскадные таблицы стилей) используется для описания, создания и изменения внешнего вида документа. И может быть применен к любым видам XML-документов.
Форматирование элементов происходит с помощью свойств и допустимых значений этих свойств.
Объявление стиля состоит из двух частей: селектора элемента страницы (указателя), и команды форматирования элемента — блока объявления в фигурных скобках. Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления перечисляются форматирующие свойства и их значения.
селектор_элемента {свойство: значение; свойство2: значение;}
Выборка элементов
Селекторы |
|
| * | Выберет все элементы на странице, которые имеют идентификатор. |
| input | Селекторы по элементу. Выберет все элементы <input>. |
| .имяКласса | Селекторы по классу |
| селектор .index выберет все элементы с соответствующим классом (который был определен в атрибуте class="index" или похожем). | |
| #идентификатор | Селекторы по идентификатору |
| селектор #toc выберет элемент с идентификатором toc (который был определен в атрибуте id="toc" или похожем). | |
| [attr=value] | Выберет все абзацы на странице, которые имеют атрибут attr со значением value.
|
| [аttr~=value] | Выберет все ссылки с атрибутомattr содержащим в значении подстроку "value" отделенную пробелами от остального содержимого. |
| [attr*=value]
|
Позволяет выбрать все элементы имеющие атрибут attr со значением содержащим подстроку "value". |
| [attr^=value] | Выберет все элементы имеющие атрибут attr со значением начинающимся на "value". |
| [attr$=value] | Выберет все элементы имеющие атрибут attr со значением заканчивающимся на "value". |
| A + B | Соседние селекторы |
| селекторы ;ul + li выберет любой элемент, который находится непосредственно после элемента. | |
| A ~ B | Родственные селекторы |
| p ~ span выберет все элементы <span>, которые находятся после элемента <p> внутри одного родителя. | |
| A > B | Дочерние селекторы |
| селектор ul > li выберет все элементы , которые находятся внутри элемента <ul> element. | |
| A B | Вложенные селекторы |
| селектор div span выберет все элементы <span>, которые находятся внутри элемента <div>. | |
| *ns|* *|* | Универсальный селектор |
| Соответствует любому HTML-элементу. | |
Комбинация селекторов |
|
| a[href][title] | - выберет все ссылки, для которых заданы атрибуты href и title; |
| img[alt*="CSS"]:nth-of-type(even) | - выберет все четные картинки, альтернативный текст которых содержит слово CSS. |
Псевдоселекторы и псевдоклассы |
|
| :first-child | Применяет стилевое оформление к первому дочернему элементу. |
| :first-line | Задает стиль первой строки текста. |
| :first-letter | Применяет стили к первой букве первой строки. |
| :hover | Стиль элемента при наведении на него мышью. |
| :active | Стиль для активной ссылки |
| :focus | Стиль для элемента получающего фокус |
| :link | Непосещенные ссылки |
| :visited | Посещенные ссылки |
| :lang(var) | Выбор элементов с атрибутом языка в (); |
| :before | Для вывода желаемого текста перед содержимым элемента |
| :after | Для вывода желаемого текста после содержимым элемента |
| :read-only | Применяется к полям формы, у которых задан атрибут readonly. |
| ::-moz-placeholder | Задаётся стилевое оформление подсказывающего текста в Firefox. |
| ::-webkit-input-placeholder | Задаётся стилевое оформление подсказывающего текста в Chrome. |
| :checked | Применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено» |
| :default | Применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов. |
| :disabled | Применяет стиль к заблокированным элементам форм. |
| :empty | Представляет пустые элементы те, которые не содержат дочерних элементов, текста или пробелов. |
| :enabled | Используется для применения стиля к доступным (не заблокированным) элементам форм. |
| :first-child | Применяет стилевое оформление к первому дочернему элементу своего родителя. |
| :first-of-type | Задает правила стилей для первого элемента в списке дочерних элементов своего родителя. |
| :indeterminate | Задает стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределенном состоянии. |
| :last-child | Задает стилевое оформление последнего элемента своего родителя. |
| :last-of-type | Задает правила стилей для последнего элемента в списке дочерних элементов своего родителя. |
| :not | Задает правила стилей для элементов, которые не содержат указанный селектор. |
| :nth-child | Используется для добавления стиля к элементам на основе нумерации в дереве элементов.
2n - все четные элементы, номера элементов 2, 4, 6, 8, 10. 2n+1 - все нечетные элементы, номера элементов 1, 3, 5, 7, 9. 3n+2 - номера элементов 2, 5, 8, 11, 14. |
| :nth-last-of-type | Используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов. |
| :only-of-type | Позволяет выбрать все элементы, которые являются уникальными родительском. |
| :nth-of-type | Используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов. |
| :nth-last-child | Позволяет выбрать все элементы являющиеся вторыми элементами потомками в родительском с конца. |
| :root | Определяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу<html>. |
Свойства элементов
Шрифты, текст, ссылки |
|
| font | Краткая запись свойств шрифта.
|
|
font-size
|
Размер шрифта. |
| font-family | Семейство шрифта для оформления текста содержимого. |
| font-style | Начертание шрифта. |
| font-variant | Представление строчных букв. |
| font-weight | Насыщенность шрифта. |
| font-stretch | Начертание шрифта, уплотнение и расширение текста. |
| font-size-adjust | Контролирование шрифта при недоступности первого. |
| text-indent | Отступ текста. |
| text-align | Выравнивание текста. |
| text-decoration | Текст-отделка. |
| letter-spacing | Межбуквенное расстояние. |
| word-spacing | Слово-интервал. |
| text-transform | Текст-преобразования. |
| white-space | Белое-пространство.
|
| line-height | Высота линии. |
| word-break | Данное свойство позволяет установить правила переноса внутри слов для того, чтобы длинные строки полностью заполняли пространство внутри контейнера. Не используется для CJK-языков (китайский-японский-корейский). |
| word-wrap | Применяется, когда текст не умещается в свой контейнер и выходит за его границу. Позволяет разрывать длинные слова и переносить их на следующую строку. |
|
color
|
Цвет текста. |
| cursor
|
Устанавливает форму курсора, когда он находится в пределах элемента. |
|
vertical-align
|
Вертикальное выравнивание строчных элементов, изображений и полей форм. |
| tab-size | Настройка табуляции. |
|
unicode-bidi
|
Направление написания слов в тексте (используется вместе с direction). |
Блочная модель |
|
| display | Тип генерируемого элементом контейнера. |
| height | Высота элемента. |
| max-height | Максимальная высота. |
| min-height | Минимальная высота |
| width | Ширина элемента. |
| max-width | Максимальная ширина. |
| min-width | Минимальная ширина. |
| box-sizing | Управление расчётом ширины и высоты элемента с учётом внутренних отступов и толщины рамки. |
| resize | Позволяет растягивать элемент в ширину и высоту. |
| margin | Отступ от каждого края элемента. |
| margin - top | Отступ от верхнего края элемента. |
| margin - right | Отступ от правого края элемента. |
| margin - bottom | Отступ от нижнего края элемента. |
| margin - left | Отступ от левого края элемента. |
| padding | Значение поля вокруг элемента. |
| padding - top | Значение поля от верхнего края элемента. |
| padding - right | Значение поля от правого края элемента. |
| padding - bottom | Значение поля от нижнего края элемента. |
| padding - left | Значение поля от левого края элемента. |
Flexbox модель |
|
| flex-direction | Свойство относится к flex-контейнеру. Управляет направлением главной оси, вдоль которой укладываются flex-элементы, в соответствии с текущим режимом записи. Не наследуется. |
| flex-wrap | Свойство определяет, будет ли flex-контейнер однострочным или многострочным, а также задает направление поперечной оси, определяющее направление укладки новых линий flex-контейнера. |
| flex-flow | Свойство позволяет определить направления главной и поперечной осей, а также возможность переноса flex-элементов при необходимости на несколько строк. Представляет собой сокращённую запись свойств flex-direction ;и flex-wrap. |
| order | Свойство определяет порядок, в котором flex-элементы отображаются и располагаются внутри flex-контейнера. Применяется к flex-элементам. Свойство не наследуется. |
| flex-grow | Коэффициент увеличения ширины flex-элемента |
| flex-shrink | Коэффициент уменьшения ширины flex-элемента |
| justify-content | Свойство выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство, незанятое flex-элементами. |
| align-items | Выравнивание элементов по вертикали. |
| align-self | Выравнивание отдельных элементов. |
| align-content | Свойство выравнивает строки в flex-контейнере при наличии дополнительного пространства на поперечной оси, аналогично выравниванию отдельных элементов на главной оси с помощью свойства justify-content. |
Таблицы и рамки |
|
| border-collapse | Удаление промежутка между рамками ячеек таблицы. |
| border-spacing | Увеличение промежутка между рамками ячеек таблицы. |
| caption-side | Управление местоположением подписи к таблице. |
| empty-cells | Скрытие пустых ячеек. |
| table-layout | Компоновка макета таблицы. |
| border | Устанавливает толщину, стиль и цвет границы вокруг элемента. |
| border - top | Устанавливает толщину, стиль и цвет границы сверху элемента. |
| border - bottom | Устанавливает толщину, стиль и цвет границы внизу элемента. |
| border - right | Установить толщину, стиль и цвет правой границы. |
| border - left | Установить толщину, стиль и цвет левой границы. |
| border - color | Устанавливает цвет границы элементов. |
| border - top - color | Задает цвет границы сверху элемента. |
| border - right - color | Задает цвет границы справа от элемента. |
| border - bottom - color | Задает цвет границы снизу элемента. |
| border - left - color | Задает цвет границы слева от элемента. |
| border - style | Стиль границы вокруг элемента. |
| border - top- style | Стиль границы сверху элемента. |
| border - left- style | Стиль границы слева элемента. |
| border - right - style | Стиль границы справа элемента. |
| border - bottom- style | Стиль границы внизу элемента. |
| border - width | Толщина границы на всех сторонах элемента. |
| border - top - width | Толщина границы сверху элемента. |
| border - right - width | Толщина границы справа от элемента. |
| border - left - width | Толщина границы слева от элемента. |
| border - bottom - width | Толщина границы снизу элемента. |
| width | Ширина таблицы и столбцов задается с помощью свойства. |
| border-radius | Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для каждого угла определяется с помощью одного или двух радиусов, определяющих его форму — круга или эллипса. |
| border-top-left-radius | Верхний левый радиус. |
| border-image-width | Свойство задаёт ширину изображения для границы элемента. Если ширина не задана, то по умолчанию она равна 1. |
| border-image-source | Свойство задаёт путь к изображению, которое будет использоваться для оформления границ блока. |
| border-image-slice | Свойство определяет размер частей изображения, используемых для оформления границ элемента и делит изображение на девять частей. |
| border-image-repeat | Свойство управляет заполнением фоновым изображением пространства между углами рамки. Можно задавать как с помощью одного значения, так и с помощью пары значений. |
| border-image-outset | Свойство позволяет переместить изображение-рамку за пределы границ элемента на указанную длину. Может задаваться как с помощью одного, так и четырёх значений. |
| border-image | Градиентная рамка. Значением может выступать не только изображение, но и градиентная заливка. |
| outline | Устанавливает цвет, стиль и толщину внешней обводки элемента. |
| outline-width | Задает толщину внешней обводки элемента, установить индивидуально для каждой границы нельзя. |
| outline-style | Задает стиль ввнешней обводки элемента. Не влияет на ширину блока или его положение. |
| outline-color | Указывает цвет внешней обводки элемента. Не влияет на ширину блока или его положение. |
| outline-offset | Свойство задаёт расстояние между границей элемента border и внешней границей, созданной с помощью свойства outline. |
Списки |
|
| list-style-type | Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется. |
| list-style | Свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение маркера. |
| list-style-image | В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется. |
| list-style-position | Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется. |
Позиционирование и обтекание |
|
| position | Управление положением элементов. |
| top | Смещение относительно верхней стороны блока-контейнера. |
| right | Смещение относительно правой стороны блока-контейнера. |
| bottom | Смещение относительно нижней стороны блока-контейнера. |
| left | Смещение относительно левой стороны блока-контейнера. |
| float | Выравнивание элемента, остальные элементы обтекают его. |
| clear | Отмена обтекания элемента. |
| z-index | Управление наложением элементов. |
| object-fit | Управляет заполнением контейнера для содержимого замещаемых элементов. |
| object-position | Позиционирует содержимое замещаемых элементов внутри контейнера относительно осей X и Y. |
Переполнение и обрезка |
|
| text-overflow | Обрезка строк. |
| clip | Обрезка части элемента. |
| overflow | Добавление полос прокрутки или скрытие содержимого |
| overflow-x | Обрезка правого края контента внутри блока в случае его переполнения. |
| overflow-y | Обрезка нижнего края контента внутри блока в случае его переполнения. |
Видимость элемента |
|
| opacity | Прозрачность элемента. |
| visibility | Управление видимостью элемента. |
Цвет и фон |
|
| color | Цвет текста. |
| background | Аттрибуты фона |
| background-repeat | Свойство определяет, каким образом будет повторяться фоновый рисунок. Не наследуется. |
| background-color | Устанавливает фоновой цвет страницы. |
| background-attachment | Устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. |
| background-clip | Свойство определяет, будет ли цвет фона ограничиваться содержимым элемента или будет простираться до внешнего края границы border. Не наследуется. |
| background-origin | Свойство определяет, где будет позиционироваться фоновое изображение. Если одновременно задано свойство background-attachment: fixed, эффекта не будет. |
| background-size | Свойство позволяет масштабировать фоновое изображение по вертикали и горизонтали. Оно описывает, как изображение будет растягиваться и обрезаться, чтобы полностью закрыть собой фоновую область. |
| background-repeat | Повторение фона. |
| background-image | Фоновое изображение. |
| background-position | Положение фонового изображения. |
| background-blend-mode | Режим смешивания фоновых слоёв, заданных в свойстве background-image. |
Тени |
|
| text-shadow | Тень текста. |
| box-shadow | Тень блока. |
Переходы |
|
| transition-property | Указание свойств, к которым будет применен переход. |
| transition-duration | Определяет время происхождения перехода. |
| transition-timing-function | Определяет функцию, указывающую, как вычисляются промежуточные значения свойств. |
| transition-delay | Задержка перехода. |
| transition | Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство. |
Анимации |
|
| animation-name | Свойство задаёт имя анимации. |
| animation-duration | Свойство устанавливает продолжительность анимации, задаётся в секундах или миллисекундах, отрицательные значения не допустимы. |
| animation-timing-function | Свойство определяет изменение скорости от начала до конца анимации с помощью временных функций. |
| animation-delay | Свойство игнорирует анимацию заданное количество времени, что даёт возможность по отдельности запускать каждую анимацию. |
| animation-iteration-count | Свойство позволяет запустить анимацию несколько раз. |
| animation-direction | Свойство задает направление повтора анимации. |
| animation | Краткая запись всех свойств анимации. |
| animation-play-state | Свойство управляет проигрыванием и остановкой анимации. |
| animation-fill-mode | Свойство определяет порядок применения определенных в @keyframes стилей к объекту. |
Трансформации |
|
| backface-visibility | Видимость обратной стороны элемента. |
| transform | Свойство описывается с помощью функций трансформации, которые смещают элемент относительно его текущего положения на странице или изменяют его первоначальные размеры и форму. Не наследуется. |
| transform-origin | Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50%. Задаётся только для трансформированных элементов. Не наследуется. |
| transform-style | Стиль 3D-преобразований. |
| perspective-origin | Точка 3D-трансформации. |
| perspective | Активация 3D-пространства для элемента. |
Генерируемое содержимое |
|
| content | Добавление генерируемого содержимого. |
| counter-increment | Приращение счётчика. |
| counter-reset | Инициализация или сброс счетчика |
| quotes | Добавление кавычек заданного типа. |
Печать |
|
| page-break-before | Разрыв страницы до. |
| page - break - after | Разрыв страницы после. |
| age - break - insidep | Разрыв страницы внутри. |
| orphans | Висячая строка. |
| widows | Минимальное число строк текста на следующей странице. |
Экранный диктор |
|
| volume | Задает громкость звучания музыки на веб-странице. |
| speak | Задает, как именно будет озвучен текстовый элемент. |
| pause | Паузу до и после озвучивания контента элемента. |
| pause-before | Длительности паузы до произношения содержимого элемента. |
| pause-after | Длительности паузы после произнесения содержимого элемента. |
| cue | Задает звуковые сигналы, обозначающие начало и конец элемента. |
| cue-before | Задает звуковой сигнал, обозначающий начало элемента. |
| cue-after | Задает звуковой сигнал, обозначающий окончание элемента. |
| play-during | Публикация звука в фоновом режиме. |
| azimuth | Определяет расположение источника звука. |
| elevation | Направление источника звука по вертикали. |
| speech-rate | Скорость речи. |
| voice-family | Голоса перечисляются через запятую. |
| pitch | Частота звука. |
| pitch-range | Интонацией произношения содержимого элемента. |
| stress | Задает высоту пиков в интонации голоса. |
| richness | Устанавливает мягкость голоса. |
| speak-punctuation | Задает как озвучивать пунктуацию в тексте. |
| speak-numeral | Задает как озвучивать числа. |
Значения свойств и величины
Абсолютные размеры |
|
| 0 | Ноль не требует единицы. |
| px | Пиксели. |
| cm | Сантиметры. |
| mm | Миллиметры. |
| in | Дюймы. |
| pt | 1 пт= 1/72 дюйма. |
| pc | 1пк = 12 пт. |
Относительные размеры |
|
| em | 1 em = размер буквы m родителя. |
| rem | Размер относительно размера шрифта элемента <html> |
| ex | Высота строчной буквы "х". |
| % | Процент |
Цвет |
|
| white | Именованныецвета. Всего 147. |
| гgb(R, G, B) | Красный, синий и зеленый. В процентах или от 0 до 255. Нельзя задавать значения числами с плавающей точкой. |
| rgba(R,G,B,A) | RGBA. RGB с параметром прозрачности alpha, указываемом в десятичных значениях от 0 до 1. |
| #FFFFFF; | HEX. RGB в шестнадцатеричной системе счисления. Если в парах оба знака одинаковые, можно использовать короткую запись. Например: #FFFFFF → #FFF. |
| hsl(H,S,L) | HSL. Hue — цвет(от 0 до 360), Saturation — насыщенность цвета, Lightness — яркость цвета. |
| hsla(H,S,L,A) | HSLA. HSL, но с прозрачностью от 0 до 1. |
| transparent | Ключевое слово для обозначения полной прозрачности. |
| currentColor | Ключевое слово указывающее на наследуемый цвет текста элемента. |
Градиенты и паттерны |
|
| linear-gradient() | Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента. |
| radial-gradient() | Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса. |
| repeating-radial-gradient() | Повтор линейного и радиального градиента. Рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры. |
Градиенты и паттерны |
|
| linear-gradient() | Линейный градиент создается с помощью двух и более цветов, для которых задано направление, или линия градиента. |
| radial-gradient() | Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса. |
| repeating-radial-gradient() | Повтор линейного и радиального градиента. Рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры. |
Функции |
|
| attr() | Добавление значения атрибута с помощью свойства content. |
| calc() | Задание вычисляемых значений css-свойств. |
| counter() | Отображает текущее значение счетчика. |
| counters() | Создает вложенную нумерацию. |
| rotate() | Поворот на заданный угол. |
| rotateX() | Поворот относительно оси X. |
| rotateY() | Поворот относительно оси Y. |
| rotateZ() | Поворот относительно оси Z. |
| scale() | Увеличение/уменьшение элемента. |
| skew() | Деформирование (искажение) сторон элемента относительно координатных осей. |
| skewX() | Искажение сторон элемента относительно оси X. |
| skewY() | Искажение сторон элемента относительно оси Y. |
| translateZ() | Перемещение элемента в направлении оси Z. |
| translate3d() | Перемещение элемента в 3D-пространстве . |
| matrix() | Трансформирование элемента с помощью нескольких функций 2D-трансформаций одновременно . |
| matrix3d() | Трансформирование элемента с помощью нескольких функций 3D-трансформаций одновременно. |
| perspective() | Установка 3D-перспективы только для одного элемента. |
| url() | Добавление внешнего медиа содержимого. |
@-Правила
@-Правила(ЭТ правила) |
|
| @charset | Правило для задания кодировки символов, используемое в таблице стилей. |
| @font-face | Подключение пользовательских шрифтов. |
| @import | Правило для загрузки внешних таблиц стилей в выбранную таблицу стилей. |
| @keyframes | Правило для ключевых моментов анимации. |
| @media | Правило медиазапроса. |
| @page | Правило для изменения некоторых свойств при печати документ. |
Медиатипы
| all | Все типы устройств. |
| Страничные материалы и документы, просматриваемые на экране в режиме предварительного просмотра печати. | |
| screen | Экраны цветных компьютерных мониторов. |
| speech | Синтезаторы речи. |