Полное руководство по примерам CSS

CSS текст

• Установить цвет текста

• Выравнивание текста

• Отступ текста

• Декорирование текста

• Установить间距 между символами

• Установить间距 между словами

• Установить间距 между строками текста

• Сохранение пробелов и отступов

• Перенос текста в элементе

• Вертикальное выравнивание изображения в тексте

CSS шрифты

• Установить шрифт текста

• Установить размер шрифта

• Установить стиль шрифта

• Установить стиль шрифта

• Установить жирный шрифт

• Установить все свойства шрифтов в одном заявлении - сокращенные свойства шрифтов

CSS ссылки

• Установить стиль для различных состояний ссылок

• Удалить стандартную подстрочку из гиперссылки

• Удалить пунктирный контур из гиперссылки

• Создать блок ссылок

• Вращение изображений

CSS списки

• Указать маркеры и нумерацию в списке

• Установить положение маркера элемента списка

• Установить изображение в качестве маркера элемента списка

• Создать простое выпадающее меню

• Установить все свойства списков в одном заявлении - сокращенные свойства стиля списка

CSS таблиц

• Установление рамки таблицы

• Указание размеров таблицы

• Создание лучшей таблицы через сворачивание рамок таблицы

• Установление горизонтального выравнивания текста в ячейках таблицы

• Установление вертикального выравнивания содержимого

• Указание того, как показывать пустые ячейки

• Указание заполнения для ячеек таблицы

• Указание алгоритма разложения таблицы - автоматический или фиксированный

• Установление位置的 заголовка таблицы

Фон CSS

• Установление цвета фона элемента

• Установление изображения в качестве фона элемента

• Повторение фонового изображения по горизонтали и вертикали

• Указание位置的 фонового изображения

• Фиксированное фоновое изображение, не滚ящееся вместе с содержимым, содержащим его

• Одновременное установление всех свойств фона - сокращенные свойства фона

• Установление размера фонового изображения

• Установление裁ивания фона

• Установление точки origins фона

• Добавление нескольких 背景 к элементу

Единицы CSS

• Использование абсолютных единиц (например, px, pt, cm и т.д.)

• Использование относительных единиц (например, em, ex, % и т.д.)

Размеры CSS

• Установление ширины и высоты элемента

• Установление максимальной ширины и высоты элемента

• Установление минимальной ширины и высоты элемента

• Контроль переполнения

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

• Выравнивание текста и внедренных элементов в блоковом элементе

• Центрирование блочных элементов с помощью свойств отступа

• Выравнивание элементов по горизонтали с помощью свойства float

• Выравнивание элементов по горизонтали и вертикали с помощью свойства position

• Предотвращение крушения родительского элемента с свойством clear

• Создание простого горизонтального меню

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

• Позиционирование элемента относительно окна браузера

• Позиционирование элемента относительно его родительского элемента

• Позиционирование элемента относительно его нормального положения

• Перекрытие элементов с помощью свойства z-index

Отображение CSS

• Скрытие элемента с помощью свойства видимости

• Удаление элемента из DOM с помощью свойства display

• Отображение элемента как внедренный элемент

• Отображение элемента как блочный элемент

• Сворачивание элементов таблицы

Рамка и контур CSS

• Рисование рамки вокруг элемента

• Рисование рамки по всем сторонам элемента

• Установление различных стилей рамки

• Одновременное установление всех свойств рамки - сокращенные свойства рамки

• Создание закругленных углов вокруг элемента

• Создание рамки с использованием изображения

• Рисование контура вокруг элемента

• Рисование рамки вокруг элемента без влияния на окружающие элементы

Отступы и заполнение CSS

• Установление отступа для всех сторон элемента

• Одновременное установление всех свойств отступа - сокращенные свойства отступа

• Установление заполнения для всех сторон элемента

• Одновременное установление всех свойств заполнения - сокращенные свойства заполнения

Непрозрачность CSS

• Установление прозрачности элемента

• Эффекты переворота изображения и прозрачности

• Текст в прозрачной рамке

Содержимое, генерируемое CSS

• Указание кавычек

• Части и категории для автоматического нумерования

• Использование CSS для вставки генерируемого содержимого

CSS pseudo-классы

• Установление стиля для различных состояний гиперссылки

• Использование pseudo-класса :focus для установления стиля для элемента формы, находящегося в фокусе

• Использование pseudo-класса :first-child для установления стиля для первого подэлемента элемента

• Использование pseudo-класса :first-child для установления стиля для последнего подэлемента элемента

• Установить стиль для nth-child элемента с помощью псевдокласса :nth-child

• Установить стиль для определенного языка с помощью псевдокласса :lang()

• Использовать псевдоклассы вместе с селекторами

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

• Создать эффект下沉шего первого слова с помощью псевдоэлемента ::first-letter

• Настроить текст первого абзаца с помощью псевдоэлемента ::first-line

• Вставить содержимое перед или после элемента с помощью псевдоэлементов ::before или ::after

• Использовать псевдоэлементы в классах

Градиенты CSS3

• Создать линейный градиент сверху вниз

• Создать линейный градиент слева направо

• Создать линейный градиент по диагонали

• Установить направление линейного градиента с помощью угла

• Создать линейный градиент с помощью нескольких цветовых меток

• Установить положение цвета в месте остановки градиента при создании градиента

• Повторять линейные градиенты

• Создать радиальный градиент

• Установить форму радиального градиента

• Установить размер радиального градиента

• Повторять радиальные градиенты

• Использовать прозрачность для градиентов

Тени CSS3

• Создать рамочную тень

• Добавить несколько рамочных тени к рамке элемента

• Создать эффект тени текста

2D-трансформации CSS3

• Переместить элемент с помощью метода translate()

• Обратить элемент с помощью метода Rotate()

• Увеличить или уменьшить размер элемента с помощью метода scale()

• Применить 2D-трансформацию с помощью метода matrix()

• Применить несколько преобразований к элементу

3D-трансформации CSS3

• Переместить элемент в трёхмерном пространстве с помощью метода translate3d()

• Обратить элемент в трёхмерном пространстве с помощью метода rotate3d()

• Увеличить или уменьшить размер элемента в трёхмерном пространстве с помощью метода scale3d()

• Применить 3D-трансформацию с помощью метода matrix3d()

• Применить несколько 3D-трансформаций к элементу

Переходы CSS3

• Применить эффект перехода к фону

• Применить эффект перехода к нескольким свойствам

• Установить все свойства перехода за один раз - сокращения переходов

Анимации CSS3

• Элементы анимации на веб-странице

• Определить ключевые кадры при создании анимации

• Установить все свойства анимации за один раз - анимационные сокращения

Многостолбцовый макет CSS3

• Создать многостолбцовый макет

• Установить количество столбцов или ширину

• Установить интервал между столбцами

• Добавить правило или вертикальную линию между столбцами