Наглядный CSS

Description

На 1 июня 2018 года CSS содержал 415 уникальных свойств, относящихся к объекту style в любом элементе браузера Chrome. Сколько свойств доступно в вашем браузере на сегодняшний день? Наверняка уже почти шесть сотен. Наиболее важные из них мы и рассмотрим. Грег Сидельников упорядочил свойства по основной категории (положение, размерность, макеты, CSS-анимация и т. д.) и визуализировал их работу. Вместо бесконечных томов документации — две с половиной сотни иллюстраций помогут вам разобраться во всех тонкостях работы CSS. Эта книга станет вашим настольным справочником, позволяя мгновенно перевести пожелания заказчика и собственное видение в компьютерный код! Предисловие Глава 1. Свойства и значения CSS 1.1. Внешнее размещение 1.2. Внутреннее размещение 1.3. Строковое размещение 1.4. Селекторы 1.5. Взаимосвязь между свойствами и значениями 1.6. Комментарии в CSS-коде 1.7. Оформление стилей 1.8. CSS-переменные 1.9. Метаязык SASS 1.10. Суть каскадных таблиц стилей 1.11. Селекторы CSS 1.12. Лояльность CSS 1.13. Распространенные комбинации 1.14. Сокращенные нотации Глава 2. Псевдоэлементы 2.1. ::after 2.2. ::before 2.3. ::first-letter 2.4. ::first-line 2.5. ::selection 2.6. ::slotted(*) Глава 3. Псевдоселекторы 3.1. :link 3.2. :visited 3.3. :hover 3.4. :active 3.5. :focus 3.6. :enabled 3.7. :disabled 3.8. :default 3.9. :indeterminate 3.10. :required 3.11. :optional 3.12. :read-only 3.13. :root 3.14. :only-of-type 3.15. :first-of-type 3.16. :nth-of-type() 3.17. :last-of-type 3.18. :nth-child() 3.19. :nth-last-child() 3.20. :nth-child(odd) 3.21. :nth-child(even) 3.22. :not() 3.23. :empty 3.24. :Вложенные псевдоселекторы 3.25. :dir(rtl) и :dir(ltr) 3.26. :only-child Глава 4. Блочная модель CSS Глава 5. Позиционирование 5.1. Тестовый элемент 5.2. Статичное и относительное позиционирование 5.3. Абсолютное и фиксированное 5.4. Фиксированное позиционирование 5.5. «Липкое» позиционирование Глава 6. Работа с текстом 6.1. Свойство text-align 6.2. Свойство text-align-last 6.3. Свойство overflow 6.4. Свойство text-decoration-skip-ink 6.5. Свойство text-rendering 6.6. Свойство text-indent 6.7. Свойство text-orientation 6.8. Свойство text-shadow Глава 7. Свойства margin, border-radius, box-shadow и z-index Глава 8. Логотип Nike Глава 9. Свойство display Глава 10. Свойство visibility Глава 11. Плавающие элементы Глава 12. Цветовые градиенты 12.1. Общие сведения 12.2. Типы градиентов Глава 13. Фильтры 13.1. Фильтр blur() 13.2. Фильтр brightness() 13.3. Фильтр contrast() 13.4. Фильтр grayscale() 13.5. Фильтр hue-rotate() 13.6. Фильтр invert() 13.8. Фильтр saturate() 13.9. Фильтр sepia() 13.10. Фильтр drop-shadow() Глава 14. Фоновые изображения 14.1. Указание нескольких значений 14.2. Свойство background-position 14.3. Фон из нескольких изображений 14.4. Прозрачность фона 14.5. Множественные фоны 14.6. Свойство background-attachment 14.7. Свойство background-origin Глава 15. Свойство object-fit Глава 16. Границы 16.1. Эллиптический радиус границы Глава 17. 2D-трансформации 17.1. Свойство translate 17.2. Свойство rotate 17.3. Свойство transform-origin Глава 18. 3D-трансформации 18.1. Свойство rotateX 18.2. Свойства rotateY и rotateZ 18.3. Свойство scale 18.4. Свойство translate 18.5. Создание 3D-куба Глава 19. Flex-верстка 19.1. Свойство display:flex 19.2. Главная и перекрестная оси 19.3. Свойство flex-direction 19.4. Свойство flex-wrap 19.5. Свойство flex-flow 19.6. Свойство justify-content 19.7. Свойство align-items 19.8. Свойство flex-basis 19.9. Свойство flex-grow 19.10. Свойство flex-shrink 19.11. Свойство order 19.12. Свойство justify-items 19.13. Интерактивный flex-редактор Глава 20. Grid-верстка Глава 21. Grid-верстка: шаблоны grid-областей 21.1. Grid-верстка и медиазапросы 21.2. Верстка сайта на основе grid-элементов 21.3. Неявные строки и столбцы 21.4. Свойство grid-auto-rows 21.5. Ячейки с автоматически изменяемой шириной 21.6. Промежутки 21.7. Единицы fr для эффективного определения размера оставшегося пространства 21.8. Работа с единицами fr Глава 22. Единицы fr и промежутки 22.1. Повторение значений 22.2. Группировка 22.3. Свойства grid-row-start и grid-row-end 22.4. Краткая нотация диапазона 22.5. Выравнивание контента в grid-элементах 22.6. Свойство align-self 22.7. Свойство justify-self 22.8. Шаблоны grid-областей 22.9. Наименование линий сетки Глава 23. Анимация 23.1. Свойство animation 23.2. Свойство animation-name 23.3. Свойство animation-duration 23.4. Свойство animation-delay 23.5 Свойство animation-direction 23.6. Свойство animation-iteration-count 23.7. Свойство animation-timing-function 23.8. Свойство animation-fill-mode 23.9. Свойство animation-play-state Глава 24. Прямая и обратная кинематика Глава 25. Принципы Sass/SCSS 25.1. Новый синтаксис 25.2. Необходимые условия 25.3. Расширенные возможности 25.4. Переменные 25.5. Вложенные правила 25.6. Директива & 25.7. Примеси 25.8. Поддержка разных браузеров 25.9. Арифметические операторы 25.10. Операторы управления потоком От издательства