|
Примеры CSS
CSS Фоновые Свойства
Установка цвета фона страницы
Установка цвета фона различных элементов
Установка изображения в качестве фона страницы
Плохое фоновое изображение
Как повторять фоновое изображение только по горизонтали
Как позиционировать фоновое изображение
Фиксированное фоновое изображение (изображение не будет прокручиваться вместе со страницей)
Все фоновые свойства в одном объявлении
Продвинутый фоновый пример
Подробнее о фоновых свойствах CSS
CSS Текст
Установка цвета текста различных элементов
Выравнивание текста
Убрать подчеркивание ссылок
Декорация текста
Контроль букв в тексте (прописные, строчные и т.п.)
Абзацы в тексте
Указать расстояния между символами
Указать расстояния между строками
Установка направления текста в элементе
Увеличение расстояния между словами
Запрет переноса по словам в элементе
Вертикальное выравнивание изображения внутри текста
Подробнее о форматировании текста с помощью CSS
CSS Шрифты
Установка шрифта текста
Установка размера шрифта
Установка размера шрифта в пикселях (px)
Установка размера шрифта в единицах em
Установка размера шрифта в процентах и единицах em
Установка стиля шрифта
Установка вида шрифта
Установка степени насыщенности (жирности) шрифта
Все свойства шрифта в одном объявлении
Объяснение CSS свойств шрифтов
CSS Ссылки
Установка различных цветов для посещенных/непосещенных ссылок
Использование декорации текста для ссылок
Указать цвет фона для ссылок
Добавление других стилей к гиперссылкам
Продвинутый пример - Создание блочных ссылок
Объяснение CSS свойств ссылок
CSS Списки
Всевозможные маркеры пунктов списков
Установка изображения в качестве маркера пункта списка
Установка изображения в качестве маркера пункта списка - Кросс-браузерное решение
Все свойства списка в одном объявлении
Объяснение CSS свойств списков
CSS Таблицы
Установка черной границы для элементов table, th, и td
Использование свойства border-collapse
Указать ширину и высоту таблицы
Установка горизонтального выравнивания содержимого (text-align)
Установка вертикального выравнивания содержимого (vertical-align)
Контроль расстояния между содержимым таблицы и ее границами (padding)
Указать цвет для границ таблицы
Указать положение заголовка таблицы
Создание необычной таблицы
Объяснение CSS свойств таблиц
CSS Блочная Модель
Создание элемента с общей шириной в 250 пикселей
Создание элемента с общей шириной в 250 пикселей - Кроссбраузерное решение
Подробнее о блочной модели CSS
CSS Границы
Установка границ с четырех сторон
Установка высоты верхней границы
Установка высоты нижней границы
Установка ширины левой границы
Установка ширины правой границы
Установка стиля всех четырех границ
Установка стиля верхней границы
Установка стиля нижней границы
Установка стиля левой границы
Установка стиля правой границы
Установка цвета всех четырех границ
Установка цвета верхней границы
Установка цвета нижней границы
Установка цвета левой границы
Установка цвета правой границы
Установка всех свойств границы в одном css объявлении
Установка различных границ по каждой стороне
Установка всех свойств верхней границы в одном css объявлении
Установка всех свойств нижней границы в одном css объявлении
Установка всех свойств левой границы в одном css объявлении
Установка всех свойств правой границы в одном css объявлении
Объяснение CSS свойств границы
CSS Контуры
Нарисовать линию вокруг элемента (контур)
Установка стиля контура
Установка цвета контура
Установка ширины контура
Объяснение CSS свойств контуров
CSS Поля
Указать поля элемента
Стенографическое свойство полей
Установить верхнее поле текста, используя значение в сантиметрах
Установить нижнее поле текста, используя значение в процентах
Установить левое поле текста, используя значение в сантиметрах
Объяснение CSS свойств полей
CSS Отступы
Установка левого отступа элемента
Установка правого отступа элемента
Установка верхнего отступа элемента
Установка нижнего отступа элемента
Установка всех свойств отступов в одном объявлении
Объяснение CSS свойств отступов
Группировка селекторов в CSS и Вложенные селекторы
Группировка селекторов
Вложенные селекторы
Подробнее о группировке селекторов и вложенных селекторах CSS
CSS Размеры
Установка высоты изображения, используя значение в пикселах
Установка высоты изображения в процентах
Установка ширины элемента в пикселах
Установка ширины элемента в процентах
Установка максимальной высоты элемента
Установка максимальной ширины элемента в пикселах
Установка максимальной ширины элемента в процентах
Установка минимальной высоты элемента
Установка минимальной ширины элемента в пикселах
Установка минимальной ширины элемента в процентах
Объяснение CSS свойств размеров
CSS Отображение
Как спрятать элемент (visibility:hidden)
Как не показывать элемент (display:none)
Как превратить элемент во встроенный
Как превратить элемент в блочный
Как заставить свернуться табличный элемент
Объяснение CSS свойств отображения элементов
CSS Позиционирование
Позиционирование элемента относительно окна браузера
Позиционирование элемента относительно его обычного положения
Абсолютное позиционирование элемента
Перекрывающиеся элементы
Установка формы элемента
Как создать полосу прокрутки, когда содержимое элемента не вмещается в него
Как заставить браузер автоматически обрабатывать переполнение
Установка верхнего края изображения, используя значение в пикселах
Установка нижнего края изображения, используя значение в пикселах
Установка левого края изображения, используя значение в пикселах
Установка правого края изображения, используя значение в пикселах
Изменить курсор
Объяснение CSS свойств позиционирования
CSS Плавающие Элементы
Простое использование свойства float
Изображение с границей и полями, которое плавает справа от параграфа
Изображение с заголовком, плавающее справа
Позволить первой букве параграфа плавать слева
Создание галереи изображений с помощью свойства float
Выключение float - с помощью свойства clear
Создание горизонтального меню
Создание главной страницы без использования таблиц
Объяснение свойств плавающих элементов CSS
CSS Выравнивание Элементов
Выравнивание по центру с помощью установки полей
Левое / Правое выравнивание с помощью позиционирования
Левое / Правое выравнивание с помощью позиционирования - Кроссбраузерное решение
Левое / Правое выравнивание с помощью свойства float
Левое / Правое выравнивание с помощью свойства float - Кроссбраузерное решение
Объяснение свойств выравнивания в CSS
CSS Генерация Контента
Вставка адреса URL в круглых скобках после каждой ссылки с помощью свойства content
Нумерация разделов и подразделов в формате "Раздел 1", "1.1", "1.2", и т.д.
Указать маркеры цитирования с помощью свойства quotes
CSS Псевдо-классы
Добавить цветовое оформление к гиперссылкам
Добавить другие стили к гиперссылкам
Использование :focus
:first-child - сопоставление с первым элементом p
:first-child - сопоставление с первым элементом i во всех p элементах
:first-child - Сопоставление со всеми i элементами во всех элементах p, являющихся первыми потомками
Использование :lang
Подробнее о псевдо-классах CSS
CSS Псевдо-элементы
Сделать первую букву в тексте особенной
Сделать первую строку в тексте особенной
Сделать первую букву и первую строку в тексте выделяющимися
Использование :before для вставки некоторого контента перед элементом
Использование :after для вставки некоторого контента после элемента
Подробнее о псевдо-элементах CSS
CSS Панели Навигации
Полностью оформленная вертикальная панель навигации
Полностью оформленная горизонтальная панель навигации
Подробнее о создании навигационных панелей и меню средствами CSS
CSS Галерея Изображений
Галерея изображений
Как создать галерею изображений с помощью CSS
CSS Прозрачность Изображений
Создание прозрачных изображений - эффект при наведении мыши
Создание прозрачного блока с текстом на фоне изображения
Подробнее о прозрачных изображениях CSS
CSS Спрайты Изображений
Спрайт изображений
Спрайт изображений - список навигации
Спрайт изображений с эффектом hover
Подробнее о спрайтах изображений
CSS Атрибутивные Селекторы
Выбрать элементы с атрибутом title (заголовки)
Выбрать элементы с атрибутом title (заголовок), равным указанному значению
Выбрать элементы с атрибутом title (заголовок), равным указанному значению (даже если атрибут имеет несколько значений, разделенных пробелами)
Выбрать элементы с атрибутом title (заголовок), равным указанному значению (даже если атрибут имеет несколько значений через дефис)
Подробнее об атрибутивных селекторах CSS
|
