Форум | Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Примеры


CSS Синтаксис

Селектор элемент
Селектор идентификатора
Селектор класса (для всех элементов)
Селектор класса (только для <p> элементов)
Группировка селекторов

Синтаксис CSS объяснил


CSS обои

Установите цвет фона страницы
Установите цвет фона различных элементов
Установка изображения в качестве фона страницы
Как повторить фоновое изображение только по горизонтали
Как позиционировать фоновое изображение
Фиксированный фоновое изображение (это изображение не будет прокручиваться с остальной части страницы)
Все свойства фона в одной декларации
Расширенный пример фона

Свойства фона объяснил


CSS Границы

Установите ширину четырех границ
Установите ширину верхней границы
Установите ширину нижней границы
Установите ширину левой границы
Установите ширину правой границы
Устанавливает стиль четырех границ
Устанавливает стиль верхней границы
Устанавливает стиль нижней границы
Устанавливает стиль левой границы
Установите стиль правой границы
Установите цвет четырех границ
Установите цвет верхней границы
Установите цвет нижней границы
Установите цвет левой границы
Установите цвет правой границы
Все свойства границы в одной декларации
Установить различные границы на каждой стороне
Все лучшие свойства границы в одной декларации
Все нижние границы свойства в одной декларации
Все левые свойства границы в одной декларации
Все правые свойства границы в одной декларации

Свойства Пограничные объяснил


CSS Маржа

Укажите различные поля для каждой стороны элемента
Пусть левое поле будет унаследовано от родительского элемента
Свойство Маржа стенографии
Установить запас для автоматического центрирование элемента внутри контейнера

Свойств полей объяснил


CSS Отступы

Установите левый отступ элемента
Установите правый отступы элемента
Установите верхний отступ элемента
Установить нижний отступ элемента
Все свойства накладку в одной декларации

Свойства Padding объяснил


CSS Text

Установить цвет текста различных элементов
Выровнять текст
Удалите строку по ссылкам
Украсьте текст
Контроль букв в тексте
Отступ текст
Укажите расстояние между символами
Укажите расстояние между строками
Установите направление текста элемента
Увеличьте белое пространство между словами
Отключить перенос текста внутри элемента
Вертикальное выравнивание изображения внутри текста

Свойства текста объяснил


CSS шрифты

Установить шрифт текста
Установить размер шрифта
Установить размер шрифта в рх
Установить размер шрифта в EM
Установить размер шрифта в процентах и EM
Установить стиль шрифта
Установите вариант шрифта
Установите дерзновение шрифта
Все свойства шрифта в одной декларации

Свойства шрифта объяснил


CSS Ссылки

Добавьте различные цвета для посещенных / непросмотренных ссылок
Использование текстового украшения на ссылки
Укажите цвет фона для ссылок
Добавить другие стили к гиперссылкам
Дополнительно - Создать ссылку коробки
Дополнительно - Создать ссылку коробки с границами

Ссылка Свойства объяснил


Списки CSS

Все различные маркеры элемента списка в списках
Установка изображения в качестве элемента списка маркера
Поместите элемента списка маркер
Все объекты списка в одной декларации
Списки стилей с цветами
Полная ширина граничила список

Свойства Список объяснил


CSS Таблицы

Укажите черную рамку для таблицы, й, и т.д элементов
Использование пограничного коллапса
Одноместный границы вокруг стола
Укажите ширину и высоту таблицы
Установите горизонтальное выравнивание содержания (выравнивания текста)
Установить вертикальное выравнивание содержимого (вертикально-Align)
Укажите отступ - й и TD элементы
Горизонтальные разделители
Hoverable стол
Полосатые таблицы
Укажите цвет границ таблицы
Установите положение заголовка таблицы
Отзывчивый Таблица
Создание фантазии таблицы

Свойства таблицы объяснены


Модель Бокса CSS

Укажите элемент с общей шириной 250px

Box модель объясняла


CSS Outline

Нарисуйте линию вокруг элемента (контур)
Установить стиль контура
Установите цвет набросков
Установите ширину контура

Свойства Outline объяснил


CSS Размеры

Установите высоту и ширину элемента
Установить максимальное ширины элемента
Установите ширину и высоту различных элементов
Установите высоту и ширину изображения с использованием процентов
Установка мин-макс ширина и ширину элемента
Установить мин-высота и максимальная высота элемента

Свойства Размер объяснил


CSS Дисплей

Как скрыть элемент (visibility:hidden)
Как не отображать элемент (display:none)
Как отобразить элемент уровня блока в качестве строкового элемента
Как отображать встроенный элемент в качестве элемента уровня блока
Как использовать CSS вместе с JavaScript , чтобы показать скрытое содержание

Свойства экрана объяснил


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

Позиция элемента относительно окна браузера
Позиция элемента относительно его нормального положения
Поместите элемент с абсолютным значением
Перекрытие элементы
Установить форму элемента
Как создать полосу прокрутки , когда содержимое элемента слишком большой , чтобы соответствовать
Как настроить браузер для автоматической обработки переполнения
Установите верхний край изображения , используя значение пикселя
Установите нижний край изображения , используя значение пикселя
Установите левый край изображения , используя значение пикселя
Установите правый край изображения , используя значение пикселя
Изменение курсора Позиция текста изображения (верхний левый угол)
Текст положения изображения (верхний правый угол)
Текст положения изображения (левый нижний угол)
Текст положения изображения (нижний правый угол)
Текст положения изображения ( по центру)

Свойства позиционирования объяснил


CSS Плавающий

Простое использование свойства поплавка
Изображение с границы и поля , что плавает вправо в пункте
Изображение с надписью , которая плавает вправо
Пусть первая буква абзаца поплавка влево
Создайте галерею изображений со свойством флоат
Выключение с плавающей точкой ( с помощью четкого свойства)
Создание горизонтального меню
Создание главной страницы без таблиц

Свойства Float объяснил


CSS выравнивания элементов

Центр согласования с рентабельностью
Left / Right выравнивая с позиции
Left / Right совместив с позиции - Crossbrowser решение
Left / Right выравнивая с поплавком
Left / Right совместив с поплавком - Crossbrowser решение

Совместите объяснил свойства


CSS Комбинаторы

Потомок селектора
селектор по уходу за детьми
Прилегающие селектор Sibling
Селектор Общие Sibling

Combinator селекторы объяснил


CSS Generated Content

Вставьте URL в скобках после каждой ссылки со свойством контента
Нумерация разделов и подразделов с "Section 1", "1.1", "1.2" и т.д.
Укажите кавычки со свойством котировок


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

Добавить различные цвета в гиперссылку
Добавить другие стили к гиперссылкам
Использование: фокус
:first-child - соответствует первому элементу р
:first-child - соответствует первому элементу я во всех р элементов
:first-child - Матч всех элементов я во всех р элементов первого ребенка
Использование из :lang

Псевдо-классы объяснил


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

Сделайте первую букву специальный в тексте
Сделайте первую строчку специальный в тексте
Сделайте первую букву и первую строку специальное
Использование: перед тем, чтобы вставить некоторое содержимое перед элементом
Использование: после того, как вставить некоторое содержимое после элемента

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


CSS панели навигации

Полностью стилизованный вертикальной панели навигации
Полностью стилизованный горизонтальная панель навигации

Навигационная панель объяснил


CSS Dropdowns

Выпадающий текст
Выпадающее меню
Выравнивание по правому краю раскрывающемся меню
Выпадающее изображение
Выпадающее панель навигации

Dropdowns объяснил


CSS Всплывающие

правый подсказке
Левая подсказке
Лучшие подсказке
Нижняя подсказке
Подсказке со стрелкой
Анимированные подсказке

Всплывающие объяснил


CSS Галерея изображений

Галерея
Отзывчивый Картинная галерея

Картинная галерея объяснил


CSS Непрозрачность Изображение

Создание прозрачных изображений - эффект курсора , находящегося
Создание прозрачной коробке с текстом на фоне картинок

Изображение непрозрачности объяснил


Спрайты CSS Image

Спрайт изображение
Изображение спрайт - список навигации
Изображение спрайт с эффектом парения

Спрайты объяснил


CSS селекторы атрибутов

Выбирает все <a> элементы с целевым атрибутом
Выбирает все <a> элементы с мишенью = "_blank" атрибута
Выбирает все элементы с атрибутом заголовка , который содержит разделенный пробелами список слов, одним из которых является "цветок"
Выбирает все элементы со значением атрибута класса , который начинается с "top" (должно быть целое слово)
Выбирает все элементы со значением атрибута класса , который начинается с "top" (не должно быть целое слово)
Выбирает все элементы со значением атрибута класса , который заканчивается с "test"
Выбирает все элементы со значением атрибута класса , который содержит "te"

Атрибут объяснил селекторы


CSS Формы

Поле ввода Полная ширина
Проложенный поле ввода
Выложенные поле ввода
Дно Окаймленный поле ввода
Цветные поля ввода
Целенаправленные поля ввода
Целенаправленные поля ввода 2
Ввод с помощью значка / изображения
Animated вход поиск
Стайлинг прокручиваемым
Стилизация выберите меню
Стилизация кнопок ввода

Формы объяснил


CSS Счетчики

Создание счетчика
Вложенные счетчики 1
Вложенные счетчики 2

Счетчики объяснил


CSS3 Закругленные углы

Добавить скругленные углы к элементам
Круглый каждого угла по отдельности
Создать эллиптические углы

CSS3 закругленные углы объяснил


CSS3 Пограничные Изображения

Создание границы изображения вокруг элемента, используя ключевое слово круглое
Создание границы изображения вокруг элемента, используя ключевое слово растягивания
Границы изображения - Различные значения среза

Границы изображения CSS3 объяснил


CSS3 стола

Добавление нескольких фоновых изображений для элемента
Укажите размер фонового изображения
Масштабирование фоновое изображение с помощью "содержать" и "крышку"
Определить размеры нескольких фоновых изображений
Полноразмерная фоновое изображение (полностью заполнить область содержимого)
Использование фонового происхождения , чтобы указать , где фоновое изображение позиционируется
Используйте фон-клип , чтобы задать область рисования фона

CSS3 фоны объяснил


CSS3 Градиенты

Линейный градиент - сверху вниз
Линейный градиент - слева направо
Линейный градиент - диагональная
Линейный градиент - с определенным углом
Линейный градиент - с несколькими цветными остановками
Линейный градиент - цвет радуги + текст
Линейный градиент - с прозрачностью
Линейный градиент - повторяющаяся линейный градиент
Radial Gradient - равномерно разнесенные цвета останавливается
Radial Gradient - иначе расставленные цветовые остановки
Radial Gradient - установленной формы
Radial Gradient - различные ключевые слова размер
Radial Gradient - повторяющаяся радиальный градиент

CSS3 градиенты объяснены


CSS3 эффекты теней

Простой эффект тени
Добавить цвет в тень
Добавьте эффект размытия тени
Белый текст с черной тенью
Тень свечения красный неон
Тень свечения красный и синий неоновый
Белый текст с черным, синим, и Darkblue тень
Добавьте простой бокс-тень к элементу
Добавить цвет в поле-тень
Добавить цвет и эффект размытия для Box-тень
Создание бумаги типа карты (текст)
Создание бумаги типа карты (Polaroid изображений)

CSS3 эффекты тени объяснил


CSS3 Text

Укажите , каким образом скрытый, разливалась содержание должно сигнализировать пользователю
Как отображать переполненном содержимого при наведении курсора на элемент
Разрешить длинные слова , чтобы иметь возможность быть разорван и обернуть на следующую строку
Укажите строки нарушение правил

CSS3 текст объяснил


CSS3 шрифты

Используйте свои "собственные" шрифты в @font-face правило
Используйте свои "собственные" шрифты в @font-face правило ( жирным шрифтом)

CSS3 шрифты объяснил


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

translate() - переместить элемент из текущего положения
rotate() - вращение по часовой стрелке такой элемент
rotate() - вращать элемент против часовой стрелки
scale() - увеличить элемент
scale() - уменьшить элемент
skewX() - перекосы элемент вдоль оси Х
skewY() - перекосы элемент вдоль оси Y.
skew() - перекосы элемент вдоль X и Y оси
matrix() - вращать, масштабировать, перемещать и наклонять элемент

CSS3 2D трансформирует объяснил


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

rotateX() - вращать элемент вокруг его оси Х при заданной степени
rotateY() - вращать элемент вокруг его оси Y. при заданной степени
rotateZ() - вращать элемент вокруг его оси Z. при заданной степени

CSS3 3D - преобразования объяснил


CSS3 Transitions

Изменение ширины элемента - Переход
Переход - изменение ширины и высоты элемента
Укажите различные кривые скорости для перехода
Укажите задержку для эффекта перехода
Добавьте преобразование к эффекту перехода
Укажите все свойства переходов в одном сокращённого свойства

CSS3 переходы объяснил


CSS3 Animations

Свяжите анимацию к элементу
Анимация - изменить цвет фона элемента
Анимация - изменить цвет фона и положение элемента
Задержка анимации
Запустить анимацию в 3 раза , прежде чем остановится
Запуск анимации навсегда
Запуск анимации в обратном направлении
Запуск анимации в альтернативных циклах
Кривые скорости для анимации
Анимация сокращённое свойство

CSS3 анимации объяснил


CSS3 изображения

Округлые изображение
Объезжанная изображение
Миниатюрное изображение
Миниатюрное изображение в качестве ссылки
Отзывчивый изображение
Текст изображения (верхний левый угол)
Текст изображения (верхний правый угол)
Текст изображения (левый нижний угол)
Текст изображения (нижний правый угол)
Текст изображения ( по центру)
Polaroid изображения
Оттенки серого фильтра изображения
Расширенный - Изображение режимное с помощью CSS и JavaScript

CSS3 Изображения объяснил


CSS3 Кнопки

Основные кнопки CSS
Кнопка цветов
размеры кнопок
Закругленные кнопки
Кнопка границы Цветные
Hoverable кнопки
кнопки Shadow
кнопки для инвалидов
ширина кнопки
группы кнопок
Выложенные группа кнопок
Анимированные кнопки (Hover эффект)
Анимированные кнопки (мультипликационный эффект)
Анимированные кнопки (прессованная Effect)

CSS3 Кнопки объяснил


CSS3 Pagination

Простая нумерация страниц
Активный и hoverable нумерацией страниц
Округлые активным и hoverable нумерацией страниц
Hoverable эффект перехода
Граничит с нумерацией страниц
Округлые Граничит с нумерацией страниц
Разбивка с пространством между ссылками
размер Pagination
Разбивка с пространством между ссылками
Сосредоточенный нумерацией страниц
Панировочные сухари

CSS3 Pagination объяснил


CSS3 Несколько столбцов

Создание нескольких столбцов
Укажите промежуток между колоннами
Укажите стиль правила между колоннами
Укажите ширину линейки между колонками
Укажите цвет правила между колоннами
Укажите ширину, стиль и цвет правило между колоннами
Укажите , сколько колонок элемент должен охватывать через
Укажите, предложенную оптимальную ширину столбцов

CSS3 нескольких столбцов объяснил


CSS3 Интерфейс пользователя

Пусть пользователь изменить ширину элемента
Пусть пользователь изменить размер высоту элемента
Пусть пользователь изменить размер и ширину и высоту элемента
Добавьте пространство между контуром и границей элемента

CSS3 пользовательский интерфейс объяснил


CSS3 Box Определение размеров

Ширина элементов без коробки-проклейки
Ширина элементов с коробкой-проклейки
Элементы формы + коробка-проклейки

CSS3 окно проклейки объяснил


CSS3 Flexbox

Flexbox с тремя нежестких элементов
Flexbox с тремя нежестких элементов - РТЛ направление
Flex-направление - рядного обратная
Flex-направление - колонка
Flex-направление - колонки заднего хода
обосновывать-контент - Flex-конец
обосновывать-контент - центр
обосновывать-контент - пространство между ними
обосновывать-контент - пространство вокруг
выравнивать-элементы - стрейч
выравнивать-элементы - Flex-старт
выравнивать-элементы - Flex-конец
выравнивать-элементы - центр
выравнивать-элементы - базовый уровень
флекс-пленка - Nowrap
флекс-пленка - упаковка
флекс-пленка - наматывается обратная
выравнивать-контент - центр
Заказать флекс элементы
Margin-направо: авто;
Маржа: авто; = Идеальное центрирование
выравнивать-я на гибких элементов
Укажите длину гибкого элемента, по отношению к остальной части гибких элементов
Как создать адаптивный сайт с flexbox

CSS3 flexbox объяснил


CSS3 Media Queries

Измените цвет фона для LIGHTGREEN если окна просмотра 480px в ширину или шире
Показать меню , которое будет всплывать к левой части страницы , если окна просмотра 480px в ширину или шире

CSS3 медиа запросов объяснил


CSS3 Media - Запросы Еще примеры

HTML страницы
Ширина от 520 до 699px - Применить значок электронной почты для каждой ссылки
Ширина от 700 до 1000 пикселей - предварить ссылки с текстом
Ширина выше 1001PX - Применить адрес электронной почты для связи
Ширина выше 1151px - Добавить иконку , как мы использовали раньше
Используйте список электронных ссылок на боковой панели на веб - странице

CSS3 медиа запросов объяснил примеры