- •5. Каскадные таблицы стилей
- •1.Понятие таблицы стилей. Помещение таблицы стилей на страницу. Внутренние и внешние таблицы стилей.
- •2.Приоритет стилей. Атрибут style. Директивы @import и!important.
- •3.Единицы измерения в css.
- •4 Управление размером элементов с помощью css. Использование процентного размера.
- •5.Правила записи стилевых правил.
- •7. Форматирование шрифта с помощью css.
- •1.Форматирование абзацев с помощью css.
- •2.Управление цветом с помощью css.
- •3.Форматирование объектов с помощью css: отступы и границы.
- •4.Внешние и внутренние отступы в css.
- •5.Позиционирование с помощью css.
- •6.Управление видимостью объекта в css.
- •7.Графика с помощью css.
- •8.Оформление таблиц с помощью css.
- •9.Оформление списков с помощью css.
- •10.Плавающие элементы в css.
- •11.Построение навигационных меню с помощью css. Вертикальное меню.
- •12.Создание горизонтального навигационного меню с помощью css.
- •13.Разметка страницы с помощью css.
- •14.Сравнение табличной и блочной верстки.
- •15.Блочная фиксированная разметка с помощью css.
- •16.Блочная гибкая разметка с помощью css.
- •17.Применение абсолютного позиционирования на странице. Правило z-index.
- •18.Применение относительного позиционирования. Создание эффектов объема и тени.
- •19.Правило display. Его назначение и применение.
- •20.Управление стилями элементов htmLпо их атрибутам.
16.Блочная гибкая разметка с помощью css.
CSS свойства позиционирования позволяют вам позиционировать элемент. Также они могут расположить элемент позади другого, и указать, что должно произойти, когда содержимое элемента слишком большое.
Элементы могут располагаться, используя свойства top (сверху), bottom (снизу), left (слева), и right (справа). Однако, эти свойства не будут работать, пока не установлено свойство position.
Относительное позиционирование
Относительно позиционированный элемент располагается относительно по отношению к его обычной позиции.
Пример:
h2.pos_left
{
position:relative;
left:-20px;
}
Содержание относительно позиционированных элементов может быть сдвинуто и перекрываться с остальными элементами, однако зарезервированное пространство для элемента по прежнему остается в обычном потоке элементов.
Пример:
h2.pos_top
{
position:relative;
top:-50px;
}
Относительно позиционированные элементы часто используются в качестве контейнеров для абсолютно позиционированных элементов.
17.Применение абсолютного позиционирования на странице. Правило z-index.
Абсолютное Позиционирование
Абсолютно позиционированный элемент располагается относительно первого родительского элемента, который позиционирован иначе, чем статически. Если такого элемента не найдено, за родительский элемент принимается <html>:
Пример
h2 {
position:absolute;
left:100px;
top:150px;}
Абсолютно позиционированные элементы удаляются из стандартного потока элементов. Документ и другие элементы ведут себя так, будто абсолютно позиционированный элемент не существует.
Абсолютно расположенные элементы могут перекрывать другие элементы.
Свойство z-index указывает вертикальный порядок для элемента.
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
Элемент с большим вертикальным порядком всегда отображается впереди элемента с меньшим вертикальным порядком.
Замечание: z-index работает только для позиционированных элементов (position:absolute, position:relative или position:fixed).
Свойство z-index поддерживается всеми основными браузерами.
Замечание: Значение "inherit" не поддерживается в IE7 и более ранних версиях. IE8 требует объявления !DOCTYPE. IE9 поддерживает "inherit".
Значения Свойства:
Auto: устанавливает вертикальный порядок такой же, как у родительского элемента. Используется по умолчанию
Число: устанавливает значение вертикального порядка элемента. Отрицательные значения допустимы
Inherit: указывает, что вертикальный порядок должен наследоваться от родительского элемента
18.Применение относительного позиционирования. Создание эффектов объема и тени.
Относительное Позиционирование
Относительно позиционированный элемент располагается относительно по отношению к его обычной позиции.
Пример
h2.pos_left {
position:relative;
left:-20px; }
Содержание относительно позиционированных элементов может быть сдвинуто и перекрываться с остальными элементами, однако зарезервированное пространство для элемента по прежнему остается в обычном потоке элементов.
Примерh2.pos_top
{
position:relative;
top:-50px;
}
CSS3 Тень Контейнера
В CSS3, свойство box-shadow используется для добавления тени к контейнерам:
Пример
Добавление тени контейнера к элементу div:
div{
box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888; /* Safari */}
CSS3 Граница-Изображение
Посредством CSS3 свойства border-image вы можете использовать изображение для создания границы:
Свойство border-image позволяет вам указать границу-изображение.
Пример
Использование изображения для создания границы вокруг элемента div:
div{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari и Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */}
Новые Свойства:
border-image: Стенографическое свойство для установки всех свойств группы border-image-* 3
border-radius: Стенографическое свойство для установки всех четырех свойств border-*-radius 3
box-shadow: Присоединяет один или более эффектов отбрасывания тени к контейнеру