- •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по их атрибутам.
1.Форматирование абзацев с помощью css.
Выделение Абзацев - Отступы в Тексте
Свойство text-indentation используется, чтобы указать отступ первой строки в тексте.
Задать отступ (абзац) первой строки параграфов в 50 пикселов:
p { text-indent:50px;}
Допустимы отрицательные значения. Первая строка будет сдвинута влево при отрицательном значении.
Значения Свойства
Расстояние: определяет фиксированный отступ в пикселах, пунктах, сантиметрах, единицах em, и т.д.
%: определяет отступ в % от ширины родительского элемента
Inherit: указывает, что значение свойства text-indent должно наследоваться от родительского элемента
Свойство text-indent поддерживается всеми основными браузерами.
Замечание: Значение "inherit" не поддерживается в IE7 и более ранних версиях. IE8 требует объявления !DOCTYPE. IE9 поддерживает "inherit".
2.Управление цветом с помощью css.
Свойство color используется для установки цвета текста.
В CSS цвет обычно указывается с помощью:
шестнадцатеричного (HEX) значения - например "#ff0000"
RGB значения - например "rgb(255,0,0)"
имени цвета - например "red"
Цвет текста по умолчанию для страницы определяется в селекторе body.
Примерbody {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
Шестнадцатеричные Цвета
Шестнадцатеричные значения цветов поддерживаются всеми основными браузерами.
Шестнадцатеричный цвет указывается в формате: #RRGGBB, где RR (красный), GG (зеленый) и BB (голубой) - шестнадцатеричные целые числа, которые определяют компоненты цвета. Все значения должны быть в диапазоне от 0 до FF.
Например, значение #0000ff определяет голубой цвет, потому что голубой компонент установлен в наибольшее значение (ff), а остальные компоненты установлены в 0.Пример p
{
background-color:#ff0000;
}
RGB Цвета
RGB значения цветов поддерживаются всеми основными браузерами.
RGB значение цвета указывается в формате: rgb(красный, зеленый, голубой). Каждый параметр (красный, зеленый и голубой) определяют интенсивность цвета и могут быть целыми числами от 0 до 255 или значениями в процентах (от 0% до 100%).
Например, значение rgb(0,0,255) отображается голубым, так как параметр голубого компонента установлен в наибольшее значение (255), а остальные параметры установлены в 0.
Также, значение rgb(0,0,255) можно указать как (0%,0%,100%).Пример p
{
background-color:rgb(255,0,0);
}
RGBA Цвета
RGBA значения цветов поддерживаются в IE9+, Firefox 3+, Chrome, Safari и Opera 10+.
RGBA значения цветов являются расширением RGB значений цветов с альфа каналом - который указывает прозрачность объекта.
RGBA значение цвета указывается в формате: rgba(красный, зеленый, голубой, альфа). Параметр альфа - это число между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).Пример p
{
background-color:rgba(255,0,0,0.5);
}
HSL Цвета
HSL значения цветов поддерживаются в IE9+, Firefox, Chrome, Safari и Opera 10+.
HSL означает hue (тон), saturation (насыщенность), и lightness (яркость) - и определяет представление цветов в цилиндрических координатах.
HSL значение цвета указывается следующим образом: hsl(тон, насыщенность, яркость).
Тон - это значение угла (в градусах) цветового круга (от 0 до 360) - 0 (или 360) - красный, 120 -зеленый, 240 -голубой. Насыщенность - это значение в процентах; 0% означает оттенок серого и 100% определяет полный цвет. Яркость - также процентная величина; 0% - черный, 100% - белый.Пример p
{
background-color:hsl(120,65%,75%);
}
HSLA Цвета
HSLA значения цветов поддерживаются в IE9+, Firefox 3+, Chrome, Safari и в Opera 10+.
HSLA значения цветов являются расширением HSL значений цветов сальфа каналом, определяющим прозрачность объекта.
HSLA значение цвета указывается следующим образом: hsla(тон, насыщенность, яркость, альфа), где параметр альфа определяет прозрачность. Альфа параметр - это число между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный).Пример p
{
background-color:hsla(120,65%,75%,0.3);
}