Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Tablitsy_stiley_CSS.docx
Скачиваний:
6
Добавлен:
26.09.2019
Размер:
85.85 Кб
Скачать

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);

}

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]