Додавання стилів css на веб-сторінку, ит шеф
На цьому уроці ми розглянемо різні способи додавання стилів CSS на веб-сторінку.
Додавання стилів безпосередньо до елементу HTML
Додати стиль до елементу HTML можна за допомогою атрибута style. В цьому випадку стиль буде впливати тільки на цей елемент. Даний спосіб при верстці сайту краще не використовувати.
Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.
Lorem ipsum dolor sit amet. Porro quisquam est. qui dolorem ipsum, quia voluptas.
Додавання стилів в HTML документ
Додати стилі до елементів веб-сторінки можна в розділі head HTML- документа. При цьому стилі будуть діяти тільки в межах цієї веб-сторінки. Даний спосіб рекомендується використовувати, якщо кількість стилів не дуже велике. Також даний спосіб збільшує швидкість завантаження веб-сторінки, тому що браузеру не потрібно шукати і підключати зовнішні файли CSS.
Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.
Lorem ipsum dolor sit amet. Porro quisquam est. qui dolorem ipsum, quia voluptas.
Додавання стилів за допомогою зовнішніх файлів CSS
Додати стилі до веб-сторінки можна за допомогою зовнішнього файлу CSS. При цьому даний файл стилів можна пов'язати з будь-якою кількістю сторінок сайту за допомогою елемента link. який необхідно розмістити в розділі head.
Додавання стилів за допомогою @import
Додати файли CSS можна також за допомогою конструкції @import. яку необхідно помістити в самому верху блоку стилів HTML-документа. Даний спосіб не рекомендується використовувати, тому що він не гарантує послідовну завантаження файлів CSS. Також його використання, можна приводити до помилок при роботі веб-сторінки (Наприклад: завантаження скрипта може виконатися раніше, ніж завантаження стилів, від яких він залежить).
Динамічне підключення файлів CSS
Іноді бувають ситуації, коли необхідно динамічно підключити файл CSS до веб-сторінці. Даний спосіб можна реалізувати за допомогою методу append бібліотеки jQuery.
Примітка: при використанні даного способу не забудьте підключити бібліотеку jQuery до вашої веб-сторінці:
Динамічне додавання стилів в HTML документ
Пріоритет стилів і мінімізація CSS
Так як стилі можна задавати різними способами, то необхідно знати пріоритет одного способу перед іншим. Найбільший пріоритет мають стилі, які додаються безпосередньо до елементу HTML за допомогою атрибута style. Стилі, вбудовані в HTML документ мають пріоритет перед стилями, які підключені в вигляді зовнішніх файлів CSS.
В результаті виконання цього прикладу текст матиме жовтий колір, тому що стиль, заданий за допомогою атрибута style має найбільший пріоритет. Якщо видалити атрибут style зі значенням і оновити сторінку, то колір тексту тепер буде синім, тому що стиль заданий всередині документа має більший пріоритет ніж стилі з зовнішнього файлу.
мінімізація CSS
Мінімізація (скорочення коду) файлів CSS призначене для зменшення їх обсягу, що призводить до збільшення швидкості завантаження сайту і його продуктивності. Для прикладу розглянемо процес зменшення обсягу файлу CSS за допомогою оптимізатора CSSTidy.
Запускаємо програму "cmd (Командний рядок)", в якій набираємо назву програми csstidy.exe, а в якості параметрів вказуємо вихідний файл CSS і ім'я минимизированного файлу.
Результат мінімізації показаний на малюнку, де показані входить розмір, розмір минимизированного файлу і відсоток стиснення.