Оригінальна публікація: External CSS Stylesheets – How to Link CSS to HTML and Import into Head
Вважається, що таблиці стилів CSS найкраще зберігати у зовнішньому файлі. А як додати CSS до файлу HTML?
Посилання на зовнішній файл CSS є важливою частиною будь-якої шаблонної сторінки HTML. У цій публікації ми дізнаємося, як це зробити.
Як додати файл CSS до файлу HTML
Ви можете додати файл CSS до свого файлу HTML, додавши елемент link
всередині елемента head
свого файлу HTML, ось так:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Елемент link
має багато застосувань, тому важливо вказати відповідні атрибути, щоб імпортувати зовнішню таблицю стилів CSS. Зараз ми розглянемо декілька найважливіших атрибутів.
Атрибут rel
Перший з двох необхідних атрибутів — атрибут rel
. Цей атрибут використовують, щоб повідомити браузеру про стосунки з імпортованим файлом.
Напишіть rel="stylesheet"
, аби повідомити браузер, що ви імпортуєте таблицю стилів.
Атрибут href
Другим необхідним атрибутом є href
, який вказує файл для імпорту.
Файли CSS та HTML часто знаходяться в одній папці. У такому разі можна написати href="style.css"
.
Якщо файли CSS та HTML знаходяться в різних папках, вам потрібно написати шлях від файлу HTML до файлу CSS.
Наприклад, часто файл CSS знаходиться в папці, яка є братською для файлу HTML:
project --- index.html
css ---------- style.css
У такому разі шлях потрібно написати ось так: "css/styles.css"
.
Атрибут type
<link rel="stylesheet" href="style.css" type="text/css">
Атрибут type
використовують, щоб визначити тип змісту. Для таблиці стилів це буде text/css
. Але оскільки css
є єдиною використаною мовою таблиць стилів, його краще не використовувати.
Атрибут media
<link rel="stylesheet" href="style.css" media="screen and (max-width: 600px)">
Атрибут media
не видно в прикладі. Це додатковий атрибут, за допомогою якого можна вказати, коли імпортувати певну таблицю стилів. Його значенням повинен бути медіатип або медіазапит.
Він може бути корисним, якщо ви хочете розділити стилі для різних пристроїв і розмірів екрана в окремих файлах. Вам потрібно буде імпортувати кожен файл CSS із власним елементом link
.
Ви можете переглянути ці публікації (або інші джерела) про медіазапити, щоб дізнатись більше про значення атрибута:
- як використовувати медіазапити CSS для створення адаптивного вебсайту
- як встановити діапазони ширини для медіазапитів CSS
- медіазапит в CSS: стандартна роздільна здатність, контрольні точки та цільові розміри телефону
Висновок
У цій публікації ви дізналися, як додати зовнішню таблицю стилів до вебсторінки за допомогою елемента link
та атрибутів href
й rel
.
Ви також дізналися, що можна імпортувати декілька таблиць стилів і використовувати атрибут media
, щоб визначити, коли кожну з них потрібно застосувати.
Розважайтесь над створенням вебсторінок!