Снова CSS. Шрифты, форматирование, позиционирование

17.02.2010. CSS, Дизайн

0

Шрифты

Для настройки шрифтов существует свойство font:

font-family: шрифты или их семейства.

Пример:

font-family:arial, serif; //делает основным шрифт Arial, если он отсутствует, то шрифты из группы serif

font-size - устанавливает размер шрифта

font-size:12pt; // устанавливаем размер шрифта в 12pt

font-size:50px;

font-style: style; // стиль шрифта

font-style:normal - обычный текст

font-style:italic - курсив

font-style: oblique - наклонный шрифт.

Как всегда, все это можно задавать сразу в font:

font: times 16pt italic;

Форматирование

text-align: выравнивание. Может быть center, left, right, justify (по ширине)

text-decoration - "украшения" текста. Различные подчеркивания, мерцания и т.д.

blink - мигание текста

underline - подчеркнутый текст

line-through - перечеркнутый текст

overline - надчеркнутый текст (линия сверху)

none - отсутствует.

Позиционирование

float - устанавливает обтекание элемента

right - элемент выравнивается по правому краю, обтекание слева

left - наоборот

inherit - по умолчанию

none - обтекание отсутствует

clear - убирает обтекание

both - со всех сторон

right - справа

left - cлева

width и height:

Устанавливает ширину и высоту блока. Кроме этого возможны:

min-width & min-height - минимальная ширина и высота

И

max-width & max-height - максимальные ширина и высота

position: как позиционировать.

Устанавливает, как позиционировать элемент.

absolute - позиционировать относительно окна, а не родительских элементов

fixed - почти тоже самое,  при прокрутке остается на месте

relative - позволяет позиционировать элемент. По умолчанию элементы нельзя позиционировать

static - по умолчанию, элементы не позиционируются

z-index - устанавливает виртуальный слой, в котором находится элемент. Больший номер слоя соответствует более верхнему слою

overflow - сообщает браузеру, что делать, если содержимое элемента не влезает

visible - делает его видимым, границы объекта игнорируются

auto - при переполнение появляются полосы прокрутки

hidden - все что не влезло идет лесом, т.е. исчезает

scroll - все время есть полосы прокрутки

Другое

Если вы хотите, чтобы какое-то свойство использовалось при возникновление конфликтом, то можно использовать ключевое слово !important. Пишется оно после задания свойства до ;

color: red !important;

Можно задавать специальные свойства для элементов, если на них навели мышь. Для этого после имени класса, id, имени тега надо написать :hover

a:hover

{

}

P.S. Любите ужастики? Тогда вам будет интересен фильм человек-волк

Страница 1 из 11

Rambler's Top100 Блогун - монетизируем блоги