Форматирование абзацев с помощью CSS.

Выделение Абзацев - Отступы в Тексте

Свойство text-indentation используется, чтобы указать отступ первой строки в тексте.

Задать отступ (абзац) первой строки параграфов в 50 пикселов:

p { text-indent:50px;}

Допустимы отрицательные значения. Первая строка будет сдвинута влево при отрицательном значении.

Значения Свойства

Расстояние: определяет фиксированный отступ в пикселах, пунктах, сантиметрах, единицах em, и т.д.

%: определяет отступ в % от ширины родительского элемента

Inherit: указывает, что значение свойства text-indent должно наследоваться от родительского элемента

Свойство text-indent поддерживается всеми основными браузерами.

Замечание: Значение "inherit" не поддерживается в IE7 и более ранних версиях. IE8 требует объявления!DOCTYPE. IE9 поддерживает "inherit".

 

Управление цветом с помощью 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);

}

 

Форматирование объектов с помощью CSS: отступы и границы.

Стиль Границы

Свойство border-style указывает, какой тип границы отображать.

Никакое из свойств границы не возымеет КАКОЙ-ЛИБО эффект до тех пор, пока свойство border-style не установлено!

Значения border-style:

none: Отсутствие границы

dotted: Граница из точек

dashed: Пунктирная граница

solid: Сплошная граница

double: Двойная граница. Ширина двойной границы равна значению border-width

groove: Определяет 3D рельефную границу. Эффект зависит от значения border-color

ridge: Определяет 3D хребтообразную границу. Эффект зависит от значения border-color

inset: Определяет 3D вдавленную границу. Эффект зависит от значения border-color

outset: Определяет 3D выпуклую границу. Эффект зависит от значения border-color

 

Ширина Границы

Свойство border-width используется, чтобы установить ширину границы.

Ширина устанавливается в пикселях, или с помощью одного из трех предопределенных значений: thin (тонкая), medium (средняя), или thick (толстая).

Замечание: Свойство "border-width" не работает, если используется в одиночку. Используйте сначала свойство "border-style", чтобы установить границы.

Пример:

p.one

{

border-style:solid;

border-width:5px;

}

p.two

{

border-style:solid;

border-width:medium;

}

 

Цвет Границы

Свойство border-color используется, чтобы установить цвет границы. Цвет может быть установлен с помощью:

- названия - укажите название цвета, например "red"

- RGB - укажите RGB значение, например "rgb(255,0,0)"

-Hex - укажите шестнадцатеричное значение, например "#ff0000"

Пример:

p.one

{

border-style:solid;

border-color:red;

}

p.two

{

border-style:solid;

border-color:#98bf21;

}

 

В CSS можно указать различные границы для разных сторон:

Пример:

p

{

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

Свойство border-style может иметь от одного до четырех значений.

border-style:dotted solid double dashed;

верхняя граница - из точек

правая граница - сплошная

нижняя граница - двойная

левая граница - пунктирная

 

Чтобы укоротить код, можно указать все свойства границы в одном свойстве. Оно называется стенографическим (или сокращенным) свойством - "border":

 

border:5px solid red;

При использовании свойства border, порядок значений таков:

border-width

border-style

border-color

 

Отступы

Оступы создают пространство вокруг содержания (внутри границы) элемента. На отступы влияет цвет фона элемента.

Верхний (top), правый (right), нижний (bottom) и левый (left) отступы могут быть заданы независимо, используя отдельные свойства. Стенографическое свойство также может использоваться, чтобы задать все отступы одновременно.

Возможные Значения

Длина: определяет фиксированный отступ (в пикселях, пунктах, единицах em, и т.д.)

%: определяет отступ в % от элемента-контейнера

В CSS можно указать различные отступы для разных сторон:

Примерpadding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

Чтобы укоротить код, можно указать все свойства отступов в одном свойстве. Оно называется стенографическим (сокращенным) свойством - "padding":

padding:25px 50px;

 

Свойство padding может иметь от одного до четырех значений.

padding:25px 50px 75px;

верхний отступ 25px

правый и левый отступы по 50px

нижний отступ 75px

 

 

Поля

Поле очищает пространство вокруг элемента (за пределами границы). Поля не имеет цвета фона и является полностью прозрачным.

 

Верхнее (top), правое (right), нижнее (bottom) и левое (left) поля могут изменяться независимо, используя различные свойства. Стенографическое свойство полей (margin) также может быть полезно, чтобы изменить все поля одновременно.

Возможные Значения

Auto: браузер устанавливает поля. Результат этого значения зависит от браузера

Длина: определяет фиксированное поле (в пикселях, пунктах, единицах em, и т.д.)

%: определяет поле в % от содержащего элемента

 

Можно использовать отрицательные значения, чтобы частично перекрыть содержание.

 

В CSS можно указывать различные поля для разных сторон:

Примерmargin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

 

Чтобы сократить код, можно указать все свойства полей в одном свойстве.оно называется стенографическим свойством - "margin":

margin:100px 50px;

 

Свойство margin может иметь от одного до четырех значений.

margin:25px 50px;

верхнее и нижнее поля равны по 25px

правое и левое поля равны по 50px