Основы CSS


Оформление CSS


Боксовая модель CSS


Расширенный CSS


Примеры CSS


Справка CSS


HTML-верстка: инструменты и приемы профессиональной front-end разработки

Примеры CSS.


назад вперед

CSS — изменение фона
Фон страницы
Фон различных элементов
Изображение в качестве фона страницы
Неудачное фоновое изображение
Повтор фонового изображения по горизонтали
Позиционирование фонового изображения
Фиксированное фоновое изображение (изображение не прокручивается вместе с содержимым)
Свойства фона одной записью
Расширенные примеры с фоном

Объяснение свойств фона в CSS


CSS — текст
Изменение цвета текста различных элементов
Выравнивание текста
Удаление подчеркивания ссылок
Оформление текста
Преобразование букв текста
Красная строка
Расстояние между символами
Расстояние между строками
Направление чтения текста
Увеличение расстояния между словами
Перенос строк
Выравнивание изображения по вертикали

Объяснение свойств текста в CSS


CSS — шрифты
Шрифт текста
Размер шрифта
Размер шрифта в пикселях
Размер шрифта в em
Размер шрифта в процентах и em
Стиль шрифта
Варианты шрифта
Толщина линий шрифта
Свойства шрифта одной записью

Объяснение свойств шрифта в CSS


CSS — ссылки
Изменение цвета посещенных и непосещенных ссылок
Использование text-decoration в ссылках
Фон ссылок
Добавление других стилей ссылкам
Создание кнопок

Объяснение свойств ссылок в CSS


CSS — списки
Маркеры списков
Маркеры-изображения
Маркеры-изображения — кросс-браузерное решение
Свойства списков одной записью

Объяснение свойств списков в CSS


CSS — таблицы
Границы таблиц
Использование свойства border-collapse
Ширина и высота таблицы
Выравнивание содержимого таблицы по горизонтали
Выравнивание содержимого таблицы по вертикали
Расстояние между содержимым таблицы и границами ячеек
Цвет границ ячеек
Положение названия таблицы
Создание веселой таблицы

Объяснение свойств таблиц в CSS


CSS — боксовая модель
Элемент шириной 250px
Элемент шириной 250px — кросс-браузерное решение

Объяснение боксовой модели в CSS


CSS — бордюры (границы)
Ширина четырех границ
Ширина верхней границы
Ширина нижней границы
Ширина левой границы
Ширина правой границы

Стиль четырех границ
Стиль верхней границы
Стиль нижней границы
Стиль левой границы
Стиль правой границы

Цвет четырех границ
Цвет верхней границы
Цвет нижней границы
Цвет левой границы
Цвет правой границы

Свойства границ одной записью

Разные границы на разных сторонах
Свойства верхней границы одной записью
Свойства нижней границы одной записью
Свойства левой границы одной записью
Свойства правой границы одной записью

Объяснение свойств границы в CSS


CSS — внешняя граница
Рисование линии вокруг элемента (outline)
Стиль внешней границы
Цвет внешней границы
Ширина внешней границы

Объяснение свойств внешней границы в CSS


CSS — внешний отступ
Отступ до соседних элементов
Внешний отступ одной записью
Отступ сверху текста в сантиметрах
Отступ снизу текста в процентах
Отступ слева от текста в сантиметрах

Объяснение внешнего отступа в CSS


CSS — внутренний отступ
Левый внутренний отступ
Правый внутренний отступ
Верхний внутренний отступ
Нижний внутренний отступ
Все внутренние отступы одной записью

Объяснение внутреннего отступа в CSS


CSS — группировка
Группировка селекторов
Вложенные селекторы

Объяснение группировки селекторов в CSS


CSS — размеры элементов
Высота изображения в пикселях
Высота изображения в процентах
Ширина элемента в пикселях
Ширина элемента в процентах
Максимальная высота элемента
Максимальная ширина элемента в пикселях
Максимальная ширина элемента в процентах
Минимальная ширина элемента
Минимальная ширина элемента в пикселях
Минимальная ширина элемента в процентах

Объяснение размеров элементов в CSS


CSS — отображение элементов
Скрытие элементов (visibility:hidden)
Скрытие элементов (display:none)
Отображение элементов как строчные блоки
Отображение элементов как блоки
Использование visibility:collapse

Объяснение отображения элементов в CSS


CSS — позиционирование элементов
Относительное позиционирование относительно окна браузера
Относительное позиционирование относительно нормального положения
Абсолютное позиционирование
Перекрывание элементов
Отображение части элемента
Создание окон с полосами прокручивания
Автоматическое добавление полос прокручивания
Отступ изображения сверху
Отступ изображения снизу
Отступ изображения слева
Отступ изображения справа
Изменение курсора

Объяснение позиционирования в CSS


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

Объяснение свойства float в CSS


CSS — выравнивание элементов
Выравнивание по центру
Выравнивание слева/справа с помощью внешнего отступа
Выравнивание слева/справа с помощью внешнего отступа— кросс-браузерное решение
Выравнивание с помощью float
Выравнивание с помощью float — кросс-браузерное решение

Объяснение выравнивания в CSS


CSS — генерируемое содержание
Вставка адреса страницы в название ссылок
Автоматическая нумерация пунктов списка
Изменение кавычек


CSS — псевдо-классы
Цвет ссылок
Другие стили ссылок
Использование :focus
Использование :first-child
Использование :first-child — выделение элемента в параграфе
Использование :first-child — выделение элемента в первом параграфе
Использование :lang

Объяснение псевдо-классов


CSS — псевдо-элементы
Изменение первой буквы текста
Изменение первой строки текста
Изменение первой буквы и первой строки текста
Использование :before для вставки содержимого
Использование :after для вставки содержимого

Объяснение псевдо-элементов в CSS


CSS — навигация
Готовое вертикальное меню
Готовое горизонтальное меню

Объяснение блоков навигации в CSS


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

Объяснение галереи изображений в CSS


CSS — прозрачность изображения
Создание прозрачных изображений
Создание прозрачного блока с текстом

Объяснение свойства прозрачности в CSS


CSS — спрайты
Спрайты-изображения
Спрайты — меню
Спрайты — меню с эффектом наведения

Объяснение спрайтов в CSS


CSS — выборка атрибутов
Выборка элементов с атрибутом title
Выборка элементов с атрибутом title и заданным значением
Выборка элементов с атрибутом title и заданным значением с пробелами
Выборка элементов с атрибутом title и заданным значением (разделенным дефисом)

Объяснение выборки атрибутов в CSS


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта