Css справочник: Руководство по CSS — CSS

Справочник CSS ⚡️ HTML и CSS с примерами кода

Справочник свойств CSS с примерами кода.

@-правила и модификаторы

• !important

• @charset
• @container
• @import
• @namespace
• @media
• @supports
• @document
• @page
• @font-face
• @keyframes
• @viewport
• @counter-style
• @font-feature-values

Псевдо-классы

• :active
• :any-link
• :blank
• :checked
• :current()
• :default
• :defined
• :dir()
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :focus
• :focus-visible
• :focus-within
• :fullscreen
• :future
• :has()
• :host
• :host()
• :host-context()
• :hover
• :indeterminate
• :in-range
• :invalid
• :is()
• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :local-link
• :not()
• :nth-child()
• :nth-col()
• :nth-last-child()
• :nth-last-col()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :past
• :placeholder-shown
• :read-only
• :read-write
• :required
• :right
• :root
• :scope
• :target
• :target-within
• :user-invalid
• :valid
• :visited
• :where()

Псевдо-элементы

• ::after
• ::backdrop
• ::before
• ::cue
• ::first-letter
• ::first-line
• ::grammar-error
• ::marker
• ::part()
• ::placeholder
• ::selection
• ::slotted()
• ::spelling-error

Grid

• grid
• grid-area
• grid-auto-columns
• grid-auto-flow
• grid-auto-rows
• grid-column
• grid-column-end
• grid-column-gap
• grid-column-start
• grid-gap
• grid-row
• grid-row-end
• grid-row-gap
• grid-row-start
• grid-template
• grid-template-areas
• grid-template-columns
• grid-template-rows

Flex

• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• order

Выравнивание

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• justify-self
• align-self
• place-self
• row-gap
• column-gap
• gap

Позиционирование

• bottom
• clear
• display
• float
• left
• position
• right
• top
• z-index

Блоки

• height
• width
• max-height
• max-width
• min-height
• min-width

• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• margin-trim

• padding
• padding-bottom
• padding-left
• padding-right
• padding-top

• overflow
• overflow-x
• overflow-y
• visibility

Фон и границы

• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size

• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• box-shadow

Интерфейс

• appearance
• box-sizing
• caret-color
• cursor
• outline
• outline-width
• outline-style
• outline-color
• outline-offset
• resize
• text-overflow
• user-select

Переходы, Анимации и Перемещения

• @keyframes

• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

• offset
• offset-anchor
• offset-distance
• offset-path
• offset-position
• offset-rotate

Трансформации

• backface-visibility
• perspective
• perspective-origin
• transform
• transform-box
• transform-origin
• transform-style

Текст

• hanging-punctuation
• hyphens
• letter-spacing
• line-break
• overflow-wrap
• paint-order
• tab-size
• text-align
• text-align-last
• text-indent
• text-justify
• text-size-adjust
• text-transform
• white-space
• word-break
• word-spacing

• letter-spacing
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness
• text-decoration-skip
• text-decoration-skip-ink
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-indent
• text-rendering
• text-shadow
• text-underline-position
• text-transform
• white-space
• word-spacing

Шрифт и Цвет

• @font-face

• font
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-synthesis
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• line-height

• aspect-ratio
• color
• color-scheme
• opacity
• print-color-adjust

Режимы письма

• direction
• text-combine-upright
• text-orientation
• unicode-bidi
• writing-mode

Изображения, фильтры, композиция

• image-orientation
• image-rendering
• image-resolution
• object-fit
• object-position

• linear-gradient()
• radial-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• conic-gradient()
• repeating-conic-gradient()
• url()
• element()
• image()
• cross-fade()

• backdrop-filter
• filter

• background-blend-mode
• isolation
• mix-blend-mode

• contain
• contain-intrinsic-block-size
• contain-intrinsic-height
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• container
• container-name
• container-type
• @container
• content-visibility

Списки, счетчики, генерируемый контент

• counter-increment
• counter-reset
• list-style-image
• list-style-type
• list-style-position
• list-style

• content
• quotes

Колонки и таблицы

• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns

• border-collapse
• border-spacing
• caption-side
• empty-cells
• table-layout
• vertical-align

Страницы

• page-break-after
• page-break-before
• page-break-inside

• @page
• :blank
• :first
• :left
• :right

Маски и фигуры

• clip-path
• mask
• mask-border
• mask-border-mode
• mask-border-outset
• mask-border-repeat
• mask-border-slice
• mask-border-source
• mask-border-width
• mask-clip
• mask-composite
• mask-image
• mask-mode
• mask-origin
• mask-position
• mask-repeat
• mask-size
• mask-type

• shape-image-threshold
• shape-margin
• shape-outside

Фрагментация

• box-decoration-break
• break-after
• break-before
• break-inside
• orphans
• widows

Pointer Events

• pointer-events
• touch-action
• scroll-behavior

Логические размеры

• block-size
• inline-size
• max-block-size
• max-inline-size
• min-block-size
• min-inline-size

Логические границы

• border-block
• border-block-color
• border-block-end
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-start
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-style
• border-block-width
• border-inline
• border-inline-color
• border-inline-end
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-start
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-inline-style
• border-inline-width
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius

Логические блоки

• margin-block
• margin-block-end
• margin-block-start
• margin-inline
• margin-inline-end
• margin-inline-start

• overflow-block
• overflow-inline

• padding-block
• padding-block-end
• padding-block-start
• padding-inline
• padding-inline-end
• padding-inline-start

Логическое позиционирование

• inset
• inset-block
• inset-block-end
• inset-block-start
• inset-inline
• inset-inline-end
• inset-inline-start

Справочник CSS3.

Кратко, быстро, под рукой (А. Хрусталев) 679 ₽

456 ₽

+ до 68 бонусов

Купить

Цена на сайте может отличаться от цены в магазинах сети. Внешний вид книги может отличаться от изображения на сайте.

В наличии

21

Цена на сайте может отличаться от цены в магазинах сети. Внешний вид книги может отличаться от изображения на сайте.

Создание сайтов

Работая с каскадными таблицами стилей (CSS), читатель может быстро найти нужный ответ в этом удобном кратком справочнике, в котором предоставляются все основные сведения, необходимые для оперативной реализации CSS-стилей. Этот карманный справочник идеально подходит для веб-разработчиков от промежуточного уровня до уровня высокой квалификации, а его пятое издание исправлено согласно спецификации CSS3. Помимо полного перечня в алфавитном порядке селекторов и свойств CSS3, здесь представлены краткое введение в основные понятия CSS, а также сведения о таких новых средствах стилевого оформления.

Как получить бонусы за отзыв о товаре

1

Сделайте заказ в интернет-магазине

2

Напишите развёрнутый отзыв от 300 символов только на то, что вы купили

3

Дождитесь, пока отзыв опубликуют.

Если он окажется среди первых десяти, вы получите 30 бонусов на Карту Любимого Покупателя. Можно писать неограниченное количество отзывов к разным покупкам – мы начислим бонусы за каждый, опубликованный в первой десятке.

Правила начисления бонусов

Если он окажется среди первых десяти, вы получите 30 бонусов на Карту Любимого Покупателя. Можно писать неограниченное количество отзывов к разным покупкам – мы начислим бонусы за каждый, опубликованный в первой десятке.

Правила начисления бонусов

бесполезная книга

Часть серии

Плюсы

Качественный

Минусы

Дороговат

Книга «Справочник CSS3. Кратко, быстро, под рукой» есть в наличии в интернет-магазине «Читай-город» по привлекательной цене. Если вы находитесь в Москве, Санкт-Петербурге, Нижнем Новгороде, Казани, Екатеринбурге, Ростове-на-Дону или любом другом регионе России, вы можете оформить заказ на книгу А. Хрусталев «Справочник CSS3. Кратко, быстро, под рукой» и выбрать удобный способ его получения: самовывоз, доставка курьером или отправка почтой. Чтобы покупать книги вам было ещё приятнее, мы регулярно проводим акции и конкурсы.

Flexbox — Справочник по CSS

Свойства CSS, позволяющие использовать возможности CSS3 Flexbox

Поделиться этой страницей

Новинка! Вышла моя 44-страничная электронная книга « CSS за 44 минуты «! 😃

Получить сейчас →

1

Цель

3

4

5

1

Цель

3

4

5

1

Цель

3

4

5 9000 3

1

Цель

3

4

5

1

Цель

3

4

5

1

Цель

3

4

5

Элемент Flexbox

900 02 Элемент Flexbox

1. Один

2. Два

3. Три

4. Четыре

1. Один

2. Два

9000 5 3. Три

4. Четыре

1. Один

2. Два

3. Три

4. Четыре

1. Один

2. Два

3. Три

4. Четыре

Цель

Элемент

Элемент

Цель

Элемент

Элемент

Элемент
1

Артикул
2

Артикул
0

Это гибкая термоусадочная мишень

Foo bar

Lorem ipsum

Это мишень flex-shrink

Foo bar

Lorem ipsum

Ширина
100%

Термоусадка
3

Термоусадочная
1

1. Один

2. Два

3. Три

4. Четыре

5. Пять

6 Шесть

1. Один

2. Два

3. Три

4. Четыре

5. Пять

6. Шесть

1. Один

2. Два

3. Три

4. Четыре

5. Пять 900 03

6. Шесть

1. Один

2. Два

3. Три

1. Один

2. Два

3. Три

90 002 1. Один

2. Два

3. Три

1. Один

2. Два

3. Три

1. Один

9000 5 2. Два

3. Три

Один
заказ: 0

Два
заказ: 0

Цель
заказ: 0

Четыре
заказ: 0 9000 3

Один
заказ: 0

Два
заказ: 0

Цель
заказ: 1

Четыре
заказ: 0

Один
заказ: 0

Два
порядок: 0

Цель
порядок: -1

Четыре
заказ: 0

один
заказ: 13

два
заказ: -7

Цель 90 161 заказ: 9

Четыре
заказ: 5

Сетка — ссылка CSS

Элемент

Элемент

Цель

Элемент

Элемент

Элемент

900 02 Элемент

Элемент

Элемент

Заголовок

Боковая панель

Нижний колонтитул

Цель

1. Один

2. Два

3. Три

4. Четыре

900 02 5. Пять

6. Шесть

Заголовок

Боковая панель

Основная

50px

200px

100px

Заголовок 9 0003

Боковая панель

Основная

Нижний колонтитул

Прочее

Верхний колонтитул

Боковая панель

Основная

Нижний колонтитул

Прочие

1. Один

2. Два

3. Три

4. 900 06 Четыре

5. Пять

6. Шесть

Заголовок

Боковая панель

Основная

Нижний колонтитул: 100 пикселей высотой

Элемент

Элемент

Мишень

Предмет

Предмет

Предмет

Предмет

Предмет

Мишень

Предмет

Предмет

Предмет

Предмет

Предмет

Мишень

Предмет

Товар

Товар

1. Один

2. Два

3. Три

1. Один

9000 5 2. Два

3. Три

1. Один

2. Два

3. Три

1. Один

2. Два

3. Три

Предмет

Предмет

Мишень

Предмет

Элемент

Элемент

Элемент

Элемент

Цель

Элемент

Элемент

Элемент

Элемент

Предмет

Цель

Предмет

Предмет

Предмет

Предмет

Цель

9000 3

Товар

Цель

Товар

Пункт

Пункт

Пункт

Пункт

Пункт

Пункт

Пункт

Цель

Предмет

Предмет

Предмет

Предмет

Предмет

Предмет

Предмет

Предмет

Цель

Предмет

Предмет

Предмет

Предмет

Предмет

Пункт

Заголовок

Боковая панель

Основная

Нижний колонтитул

Цель

1. Один

2. Два

3. Три

4. Четыре

5. Пять

6. Шесть

1. Один

2. Два

3. Три

900 05 4. Четыре

5. Пять

6. Шесть

1. Один

2. Два

3. Три

4. Четыре

9000 2 5. Пять

6. Шесть

Артикул

Артикул

Мишень

Предмет

Предмет

Предмет

Предмет

Предмет

Мишень

Предмет

Товар

Товар

Товар

Товар

Цель

Товар

Товар

Товар

1. Один

2. Два

90 005 3. Три

4. Четыре

5. Пять

6. Шесть

1. Один

2. Два

3. Три

4. Четыре

5. Пять

6. Шесть

1. Один

2. Два

3. Три

4. Четыре

5. 9 0006 Пять

6. Шесть

Предмет

Предмет

Цель

Элемент

Элемент

Элемент

Элемент

Элемент

Цель

Элемент

Элемент

Элемент

Элемент

Элемент

Цель

Элемент

Элемент

Элемент

Элемент

Элемент

Цель

Элемент

Элемент

Элемент

Элемент

Элемент

Элемент

Элемент

Элемент

Цель

поз.

поз.

поз.

поз.

поз.

поз.

поз. Цель

Элемент

Элемент

Элемент

Элемент

Элемент

Элемент

Элемент

Элемент

Цель

Элемент

Элемент

Элемент

Элемент

Элемент

Элемент

Заголовок

Боковая панель

Основной

Заголовок

Боковая панель

Основной

1. Один

2. Два

3. Три

4. Четыре

5. Пять

6. Шесть

1. Один

2. 9 0006 Два

3. Три

4. Четыре

5. Пять

6. Шесть

1. Один

2. Два

3. Три

4. Четыре

5. Пять

6 Шесть

1. Один

2. Два

3. Три

4. Четыре

9000 2 5. Пять

6. Шесть

1. Один

2. Два

3. Три

4. Четыре

5. Пять

900 05 6. Шесть

1. Один

2. Два

3. Три

4. Четыре

5. Пять

6. Шесть

1. Один 900 03

2. Два

3. Три

4. Четыре

5. Пять

6. Шесть

1.