10 Прийомов роботи з css

CSS є фундаментом для стилізації ваших веб сторінок. Його оманливе простий синтаксис дозволяє впливати на візуальний шар веб сервера. А CSS3 відкриває ще більше можливостей.

Відомо багато різних трюків і технік для CSS. У даній колекції ми наводимо лише 10 з них, які можуть стати чудовим доповненням до вашого набору використовуваних методів і трюків.

1. Встановіть властивість font-size. 62.5% для тега body. щоб було простіше конвертувати em одиниці

Якщо вам подобається використовувати відносні одиниці для установки розміру шрифту (em), встановіть значення 62.5% для властивості font-size тега body. В результаті стане дуже просто перераховувати px в em - потрібно буде всього лише розділити значення в px на 10 (наприклад, 24px = 2.4em).

2. Видалення контура навколо полів введення для браузерів WebKit

Коли елемент input отримує фокус введення (: focus), то в браузері Safari до нього додається блакитний контур (а в Chrome - жовтий).

10 Прийомов роботи з css

Якщо ви хочете видалити даний контур, то можна використовувати правило (в даному випадку буде видалений контур у текстового поля):

Зверніть увагу, що outline використовується для поліпшення функціональності інтерфейсу - контур полегшує виявлення активного поля введення. Така властивість дуже корисно в разі, коли користувачеві недоступно пристрій типу "миша", і йому доводиться використовувати альтернативні способи переміщення по елементах сторінки, наприклад, клавішу Tab. Контур також корисний у разі використання "швидких клавіш" для доступу до певних полях введення в формі (за наявністю контуру просто визначити активне поле вводу). Тому, перш ніж видалити контур, варто розглянути концепцію дизайну полів введення з урахуванням індикації активного поля.

3. Використовуйте правило CSS transform для отримання цікавих ефектів при наведенні курсору миші на елемент

Як збільшувати або зменшувати елемента можна використовувати властивість transform в більшості браузерів, що підтримують CSS3.

Ось правила для трюку зі збільшенням елемента на 10% при наведенні курсору миші на нього:

10 Прийомов роботи з css

Код прикладу змінює background-color для елемента div залежно від типу використовуваного користувачем браузера. Так як * вказує на IE версії 7 і нижче, то ми використовуємо правило з _ після нього, щоб для IE6 (і більш ранніх версій) використовувати інший колір фону, відмінний від фону для IE7:

5. Підтримка прозорості у всіх основних браузерах

У прикладі для елемента div задається 70% прозорості. Потрібно використовувати приватний код CSS для коректної роботи в Internet Explorer (що робить наш код невідповідним стандартам W3C):

6. Використовуйте! Important для зміни звичайного порядку спадкування правил CSS

В CSS, коли два однойменних властивості застосовуються для елемента, використовуватися буде те, яке розташоване в лістингу далі. Але за допомогою! Important в кінці значення властивості можна змінити порядок використання однойменних властивостей.

В даному наборі правил, елемент h1 буде мати червоний колір.

тепер елемент

буде зеленим.

7. Центрування елементу з фіксованими розмірами

Це один із способів центрировать елемент div з фіксованою шириною / висотою в зовнішньому контейнері. Даний спосіб можна використовувати для центрування тексту, зображень і так далі всередині контейнера. Потрібно зробити нескладні обчислення для елемента з фіксованими розмірами і використовувати абсолютні величини для позиціонування і полів. Батьківський контейнер повинен мати властивість position: relative. щоб даний метод спрацював.

10 Прийомов роботи з css

8. Просте використання веб шрифтів за допомогою API Google Font

Одним з обхідних шляхів в ситуації з @ font-face є API Google Font.

Нижче наводиться приклад використання шрифту Cantarell для елемента

з використанням API Google Font.

Для використання шрифту з API Google Font спочатку потрібно вказати посилання на зовнішню таблицю стилів в тезі .

Для використання шрифту для елемента h1 просто вказуємо його у властивості font-family.

10 Прийомов роботи з css

9. Запобігаємо переклад рядка в текстових елементах

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

Тепер текст посилання залишається без розривів:

10. Вертикальне центрування тексту

Для горизонтального центрування тексту можна використовувати кілька стандартних методів (наприклад, text-align: center або margin: 0 auto), але вертикальне центрування тексту вимагає використання трюків.

Для тексту, який складається з одного рядка, ми можемо використовувати властивість line-height. Встановлюючи значення властивості line-height для елемента з текстом рівним висоті його контейнера, ми отримуємо центрований по вертикалі текст.

Ось елемент p. який центрирован по горизонталі всередині елемента div з розмірами 100 × 100px, за допомогою властивості text-align: center.

Властивість text-align НЕ центрує текст по вертикалі. Ми можемо встановити значення властивості line-height рівним висоті контейнера div (100px).

Таке використання властивостей передбачає відсутність у елемента p полів і відступів. Якщо будуть матися поля або відступи зверху чи знизу, то потрібно буде їх компенсувати або просто встановити 0 для padding і margin. щоб полегшити собі життя.

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

10 Прийомов роботи з css

10 Прийомов роботи з css

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

10 Прийомов роботи з css

10 Прийомов роботи з css

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

10 Прийомов роботи з css

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

10 Прийомов роботи з css

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

Схожі статті