5 простых и полезных свойств CSS

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

Clip

Свойство clip позволит вам показать только определённую прямоугольную часть какого-либо элемента. Для того чтобы добиться этого необходимо установить абсолютное позиционирование для этого элемента (position: absolute;). Затем указать значения top, right, bottom и left для свойства clip относительно этого элемента.

how css clip works

Пример

В этом примере показан пример использования CSS-свойства clip. Во-первых, устанавливаем элементу-контейнеру <div> относительное позиционирование (position: relative). Затем устанавливаем элементу img, который находится в этом контейнере свойство position в absolute и, соответственно, пишем значения для прямоугольника, по которому будем отсекать изображение в свойстве clip.

image clip

CSS

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

HTML

<div class="clip"><img src="sample-img.jpg" alt="image" /></div>

Используем clip вместе с изменением размера.

В этом примере я хочу вам показать как изменить размер картинки, а затем обрезать её. Моё оригинальное изображение прямоугольного формата. Я хочу уменьшить его в 2 раза. Итак, я использую свойства width и height чтобы установить ему конкретный размер и применяю свойство clip. Поскольку я хочу, чтобы моё изображение было квадратным, я устанавливаю не нулевой left для clip, а также сдвигаю картинку влево, на эту же величину. Пример прояснит ситуацию:

thumb gallery

CSS

.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; }

HTML

<ul class="gallery"> <li><img src="sample-img1.jpg" alt="image" /></li> <li><img src="sample-img2.jpg" alt="image" /></li> <li><img src="sample-img3.jpg" alt="image" /></li> </ul>

Свойство Min-height

Пример

Свойство min-height позволяет вам установить минимальную высоту элемента. Это очень удобно в случаях когда вам необходимо сбалансировать вёрстку.

job board

.with_minheight { min-height : 550px; }

И дополнительный хак для IE 6, поскольку он не поддерживает это свойство.

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

Свойство White-space

Пример

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

nowrap

em { white-space : nowrap; }

Свойство Cursor

Пример

Зачастую, опередлив поведене кнопки, логично поменять и курскор мыши. Например, если кнопка выключена, то можно изменить курсор, который бы показывал что кнопка не кликабельна.

cursor

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

Display inline / block

Пример

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

display: inline or block

.block em { display : block; } .inline h4, .inline p { display : inline; }
Опубликовано: 19.11.2009 Просмотров 26913 Ссылка на оригинал Tweet it!
6 comments  

deerua

2009.11.19 22:45

 Неплохо бы ссылку на оригинал
 

basilkot

2009.11.19 22:47

  • чуть выше вашего комментария написана :)
    рядом с количеством просмотров.

Ленивец

2009.11.20 05:09

 Блин, как много оказывается ешё не знаю...
Автор, подскажите пожалуйста, а где можно НОРМАЛЬНЫМ языком прочитать про вёрстку, а то открываю для себя некоторые вещи, например что "блочные элементы рендерятся с новой линии, на всю ширину родительского элемента, в то время как строчные элементы (inline обрабатываются как элемент строки. "???
Если можно, то на почту [email protected]
 

AngelOfFate

2009.11.20 08:23

 спасибо, определенно в закладки =)
 

Ирина

2010.04.16 17:49

 Потрясающая статья. Сколько читаю в интернете инф. на тему верстки нигде такого доступного исчерпывающего пояснения не встречала.
 

Анфа

2010.10.06 14:02

 Безупречная работа, продолжайте в том же духе, в Интернете на русском очень мало материалов качества.
 

basilkot

2010.10.06 14:22

  • Спасибо

Бубука

2011.09.19 21:12

 Бу - бу -бу
 

Оставить после себя комментарий

user

2016.11.22

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!