CSS: Меры измерения: px, em, pt, %,cm,mm

2.04.2010. Новости

0

В CCS существует множество различных способов измерять отступы, размеры шрифтов, элементов и т.д. Во всем этом легко запутаться, если не знать, что и как. Поэтому и появилась эта заметка;)

  1. px - задания размеров с помощью пикселей. Полезен тем, что можно с высокой точностью задавать размеры объектов. 1 пиксель - 1 точка экрана. Используются чаще всего для позиционирования элементов документа.
  2. em - относительные единицы, 1 em равен значению font-size
  3. pt - пункты, используются в типографии и часто для задания шрифтов
  4. % - всем известные проценты, на самом деле это аналог em, тоже рассчитывается от текущего значения font-size
  5. cm - тут все просто, обычные сантиметры
  6. mm - ну а это миллиметры
  7. in - дюймы

Если font-size у на равняется 12pt, то:

1em=100%=12pt

1 pt=1/72 in и является константой.

Обычно 12pt=16p

Снова 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 Блогун - монетизируем блоги