Основні трюки CSS стилів для вебмайстрів початківців

Бувають ситуації при веб-розробці, коли потрібні швидкі рішення і найбільш простим виходом буде використання легких, але ефективних CSS-трюків. Деякі трюки настільки прості, що веб-дизайнери про них і не замислюються і використовують їх в автоматичному режимі. А для використання деяких CSS-трюків доводиться трохи «погуглити», щоб переконатися, що той, чи інший спосіб використовується вірно. Ми вирішили зібрати основні способи програмування CSS в одному місці. Тому, в цьому пості ви знайдете найбільш часто використовувані рішення при роботі зі стилями CSS.

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

 

 

 

Центрування елементів

Центрування елементів – це один з найскладніших трюків в CSS, який можна провернути по-різному. Рішення може приймати різні обриси і в основному залежить від того, що саме вам потрібно відцентрувати. Нижче розглянуті основні варіанти рішень для центрування різних елементів на сторінці.

 

Текстовий елемент

Текст вирівнюється по центру сторінки (або окремого блоку) за допомогою стилю text-align: center;.

.blok {
  text-align: center;
}

 

 

Тег (контейнер або блок)

Елемент div (або будь-який інший елемент) можна відцентрувати, якщо, наприклад, задати йому властивість block, а потім використовувати автоматичний горизонтальний відступ (ліворуч і праворуч).

Приклад коду:

 

.blok {
  display: block;
  margin: 0 auto;
  width: 100%;
}

 

У прикладі використовується ширина в 100% від розміру блоку (або сторінки), а також відступ (margin) зверху і знизу 0, а зліва і справа auto, що дозволяє браузеру вираховувати центр контейнера і, відповідно, по ньому центрувати об’єкт.

 

 

Вертикальне вирівнювання (центрування по вертикалі)

Це теж досить поширений трюк в CSS і він заслуговує на розгляд. Головне завдання при вертикальному центруванні – використовувати однакові значення стилів line-height і height. Це також дозволяє браузеру вираховувати висоту елемента і, відповідно, знаходити його центральну вісь. Якщо вам потрібно вирівняти щось всередині блоку по вертикальній центральній осі, тоді використовуйте властивість vertical-align: middle;.

Приклад коду:

 

.blok {
  line-height: 100px;
  height: 100px;
  vertical-align: middle;
}

 

за лінком описані всі способи вертикального вирівнювання в CSS

 

 

Абсолютне позиціонування

Якщо вам потрібен повний контроль над розташуванням будь-якого блоку на сторінці, тоді вам потрібно використовувати абсолютне позиціонування (position: absolute;). Абсолютне позиціонування дозволяє з точністю до 1 пікселя розташувати блок в потрібному місці. За допомогою властивостей top, right, bottom і left (це свого роду відступи з відповідної сторони сторінки) можна вказати точні «координати» потрібного блоку.

Приклад коду:

 

.blok {
  position: absolute;
  top: 25px;
  left: 50px;
}

 

У цьому прикладі блок з класом blok має відступ від верхнього краю браузера (сторінки) в 25px, а з лівого краю відступ в 50px. Якщо у батьківського блоку позиціонування відмінне від static, тоді відлік відступів ведеться від країв цього батьківського елемента. Наприклад, якщо блок з класом blok вкладений в інший блок (наприклад, з position: relative;), у якого заданий відступ зверху в 35px, тоді у blok буде загальний відступ зверху 60px (35px + 25px).

 

 

 

Вибір прямих дочірніх елементів

Досить часто потрібно вказувати не тільки загальні стилі для всього блоку, але й окремі стилі для прямих нащадків (дочірніх елементів, вкладених елементів). Для цього є відповідний трюк в CSS – достатньо використовувати >, щоб вказати прямі дочірні елементи.

Приклад коду:

 

.blok > a {
  font-size: 33px;
}

 

Цей стиль дозволить вибрати всі елементи a (лінки), які знаходяться безпосередньо під блоком з класом blok і задати їм розмір шрифту в 33px. Якщо, наприклад, тег a вкладений в тег p, тоді він вже не буде прямим дочірнім елементом блоку blok, і зміна розміру шрифту його не зачепить.

 

 

Вибір певного дочірнього елемента

Цей трюк теж може вам стати в нагоді. Щоб застосувати стиль певному дочірньому елементу, використовуйте селектор виду

:nth-child(порядковий номер дочірнього елемента відносно свого батьківського елемента)

Приклад коду:

 

.blok img:nth-child(2) {
  width: 50%;
  border: 1px solid #333;
}

 

В наведеному вище прикладі ми застосовуємо потрібні стилі для другої за рахунком картинки, яка є дочірнім елементом для блоку blok. Інших картинок в цьому блоці вказаний стиль не торкнеться.

 

 

 

Підгонка розмірів зображення під розміри блоку

Іноді потрібно вмістити картинку в блок, який має інші розміри. Наприклад, в блок з шириною 250px вмістити картинку розмірами 500х500px. Якщо не вказати стилі для таких ситуацій, картинка буде «вилазити» за краї блоку, або навпаки, не заповнювати повністю потрібний блок (якщо блок ширше за розміри картинки). Найпростіший спосіб для цього – використовувати динамічну ширину для відображення картинки.

Приклад коду:

 

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

 

Такі стилі дозволяють картинці повністю заповнювати всю ширину батьківського блоку, а висота картинки при цьому буде вираховуватися і змінюватися автоматично.

 

 

Псевдоелемент :before

За допомогою цього псевдоелемента можна вставляти потрібний контент перед вмістом певного блоку. Дуже часто за допомогою цього трюку веб-майстри вставляють якісь міні-іконки перед потрібними тегами. Наприклад, щоб стилізувати певним чином маркований список (ul). Для цього використовується властивість content. Контентом може бути, наприклад, певний текст або картинка. Дуже часто для цього використовуються також іконічні шрифти (наприклад, FontAwesome).

Приклад коду для використання картинки в якості контенту:

 

.blok ul li:before {
  content: url(img/kartinka.jpg);
}

 

Приклад коду для використання тексту в якості контенту:

 

.blok ul:before {
  content: "Привіт, світ!";
}

 

 

Псевдоелемент :after

Подібним псевдоелементу :before чином працює і псевдоелемент :after. Відмінність полягає в тому, що контент при цьому вставляється після потрібного елемента.

 

 

Зміна елементів за допомогою CSS-фільтрів

У стилях CSS3 з’являються вже більш просунуті методики, які дозволяють без яваскриптів змінювати потрібні елементи. Наприклад, за допомогою CSS-фільтрів можна змінювати картинки, не застосовуючи навіть програми редагування зображень. Наприклад, дуже просто можна знебарвити кольорову картинку використовуючи тільки пару рядків коду в стилях CSS.

Приклад коду для знебарвлення картинки:

 

.blok img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

 

Цікавим рішенням буде, наприклад, повертати колір зображенню при наведенні мишки на нього. Для цього використовуйте псевдоклас :hover, який може перевизначати стилі елементу при наведенні мишки на нього.

 

Приклад коду для повернення кольору знебарвленому зображенню:

 

.blok img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

 

Параметри CSS-фільтрів працюють практично у всіх сучасних браузерах (окрім Internet Explorer).

 

 

 

Сподіваємося, що дані CSS-трюки знадобляться вам у вашій роботі і дозволять зберегти дорогоцінний час при веб-розробці. Якщо у вас є зауваження, питання чи рекомендації по даній темі, пишіть їх нижче в формі коментування.