В этом уроке мы расскажем о пяти полезных свойствах CSS, с которыми Вы скорее всего хорошо знакомы, но редко их используете. Мы говорим не о новых необычных свойствах CSS3, а о старых CSS2 свойствах, таких как: clip, min-height, white-space, cursor, и display, которые поддерживаются всеми браузерами. После прочтения этого урока Вы удивитесь, насколько полезны эти свойства.

1. Свойство обрезки 

Свойство обрезки действует как маска. Оно позволяет ограничить содержимое элемента прямоугольной формой. Чтобы обрезать элемент, нужно задать ему абсолютное позиционирование. Затем задать значение свойств верхнего, правого, нижнего и левого углов элемента.

Пример обрезки изображения 

Демонстрация работы

Этот пример показывает, как обрезать изображение, используя свойство clip. Сначала зададим элементу <div> свойство position: relative. После этого зададим элементу <img> свойство position: absolute и соответствующие значения параметров функции rect.

.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

Изменения размера и обрезка изображения 

Демонстрация работы

В этом примере мы покажем, как изменить размер и обрезать изображение. Исходное изображение прямоугольной формы. Мы хотим уменьшить его на 50%, чтобы создать галерею уменьшенных изображений квадратной формы. Так что мы используем свойства высоты и ширины, чтобы изменить размер изображения, и обрезаем с помощью свойства обрезки. После этого мы используем свойство расположения левого угла, чтобы сдвинуть изображение влево на 15px.

.gallery li {
  float: left;
  margin: 0 10px 0 0;
  position: relative;
  width: 70px;
  height: 70px;
  border: solid 1px #000;
}
.gallery img {
  width: 100px;
  height: 70px;
  position: absolute;
  clip: rect(0 85px 70px 15px);
  left: -15px;
}

2. Свойство минимальной высоты 

Демонстрация работы

Свойство min-height позволяет задать минимальную высоту элемента. Оно полезно, когда Вам нужно выравнять разметку. Мы используем его, например, чтобы область содержимого всегда была длиннее, чем боковой столбец.

.with_minheight {
  min-height: 550px;
}

Обходной путь для свойства минимальной высоты для браузера Internet Explorer 6 и 7

Заметьте, свойство min-height не поддерживается старыми версиями браузера Internet Explorer, такими как 6 и 7, но есть обходной путь.

.with_minheight {
  min-height:550px;
  height:auto !important;
  height:550px;
}

3. Свойство пробела 

Демонстрация работы

Свойство white-space определяет, как пробел обрабатывается в элементе. Например, если задать свойство white-space: nowrap, текст не будет разрываться для переноса на следующую строку.

em {
  white-space: nowrap;
}

4. Курсор 

Демонстрация работы

Если Вы меняете поведение кнопки, Вам также нужно изменить ее курсор. Например, когда кнопка неактивна, курсор должен измениться на стандартный, т. е. стрелку, чтобы обозначить, что на кнопку сейчас нельзя нажимать. Так что свойство cursor очень полезно для разработки веб-приложений.

.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}
.clickable:hover {
  cursor: pointer;
}

5. Отображение строкой или блоком 

Демонстрация работы

Блочные элементы выводятся на новой строке, а строчные элементы выводятся на той же строке. Теги <div>, <h1>, и <p> — это примеры блочных элементов. Примеры строчных тегов это: <em>, <span>, и <strong>. Вы можете переназначить стиль отображения, задав свойство display: inline или block.

.block em {
  display: block;
}
.inline h4, .inline p {
  display: inline;
}

Автор урока Nick La

Перевод — Дежурка

Смотрите также:

• Знакомство с псевдоклассом CSS3 :target
• Создание логотипа Volkswagen с использованием CSS3
• Применение режима наложения CSS3