(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Уроки веб дизайна (создание сайтов). 5 простых, но полезных атрибутов CSS.

Источник: balbesof
balbesof

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

1. CSS Clip (Усечение)

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

Пример усечения изображения

Следующий пример показывает, как скрывать изображение, используя атрибут 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%, чтобы создать галерею с возможностью предпросмотра, миниатюры сделать квадратными. Для этого я использовал атрибуты width и height, чтобы изменить размер изображений и обрезал их при помощи атрибута clip. Затем я использовал атрибут left, чтобы сместить изображения на 15 пикселей влево.

.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

Атрибут min-height позволяет задавать минимальную высоту элемента. Он очень полезен, когда необходимо сбалансировать вашу разметку.


.with_minheight {
  min-height: 550px;
}

Установка Min-height для IE6

Обратите внимание: min-height не поддерживается IE6, но существует небольшая min-height уловка.

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

3. White-space

Атрибут white-space определяет, как будут отображаться пробелы в элементе. К примеру, установка white-space: nowrap отключит автоматический переход текста на новую строку.

em {
  white-space: nowrap;
}

4. Cursor

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

.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}

.clickable:hover {
  cursor: pointer;
}

5. Display inline / block

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

.block em {
  display: block;
}

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

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 30.05.2012 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
ABBYY Lingvo x6 Английская Домашняя версия, электронный ключ
IBM RATIONAL Clearcase Floating User License + Sw Subscription & Support 12 Months
GFI LanGuard подписка на 1 год (25-49 лицензий)
Business Studio 4.2 Enterprise. Конкурентная лицензия + Business Studio Portal 4.2. Пользовательская именная лицензия.
FastReport.Desktop
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Новости ITShop.ru - ПО, книги, документация, курсы обучения
СУБД Oracle "с нуля"
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Компьютерные книги. Рецензии и отзывы
Новые материалы
3D и виртуальная реальность. Все о Macromedia Flash MX.
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100