Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

Примеры 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





« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru