1. 5 простих і корисних властивостей CSS У цій статті я розповім про п'ять корисні властивості CSS,...
2. CSS
3. HTML
4. Використовуємо clip разом зі зміною розміру.
5. CSS
6. HTML
7. Властивість min-height
8. Властивість white-space
9. властивість cursor
10. Display inline / block

5 простих і корисних властивостей CSS

У цій статті я розповім про п'ять корисні властивості CSS, про які ви, звичайно ж, знаєте, але можливо вже забули. Я не буду розповідати про чудові властивості CSS3. Я розповім про наступні властивості CSS 2-го стандарту: clip, min-height, white-space, cursor і display. Ці властивості підтримуються багатьма браузерами.

Clip

Властивість clip дозволить вам показати тільки певну прямокутну частину будь-якого елементу. Для того щоб домогтися цього необхідно встановити абсолютне позиціонування для цього елемента (position: absolute;). Потім вказати значення top, right, bottom і left для властивості clip щодо цього елемента.

У цьому прикладі показаний приклад використання CSS-властивості clip. По-перше, встановлюємо елементу-контейнера <div> відносне позиціонування (position: relative). Потім встановлюємо елементу img, який знаходиться в цьому контейнері властивість position в absolute і, відповідно, пишемо значення для прямокутника, по якому будемо відсікати зображення у властивості 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, а також зрушую картинку вліво, на цю ж величину. Приклад прояснить ситуацію:

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 дозволяє вам встановити мінімальну висоту елемента. Це дуже зручно у випадках коли вам необхідно збалансувати верстку.

.with_minheight {min-height: 550px; }

І додатковий хак для IE 6, оскільки він не підтримує це властивість.

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

Властивість white-space

Властивість white-space повідомляє браузеру як повинні оброблятися в елементі пробільні символи. Наприклад, вказавши white-space: nowrap, текст не буде переноситися на новий рядок.

em {white-space: nowrap; }

властивість cursor

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

.disabled {cursor: default; } .Busy {cursor: wait; } .Clickable: hover {cursor: pointer; }

Display inline / block

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

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