понедельник, 13 июня 2011 г.

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

Шрифты

Для настройки шрифтов существует свойство 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
{
}

Комментариев нет:

Отправить комментарий