Як підключити css до html - всі способи завантаження стилів

Як підключити css до html окремим файлом
Підключення CSS внутрішніми стилями
Підключення CSS до html через import
Комбінація імпорту та внутрішніх стилів
Підключення CSS в CSS
Inline CSS
Завантаження CSS для певного браузера
CSS хакі
Асинхронна завантаження CSS
Використовуємо внутрішні стилі
об'єднання файлів
висновок

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

Також поговоримо про асинхронну завантаження стилів і хакі під різні браузери

Як підключити css до html окремим файлом

Зараз покажу, як підключити css до html окремим файлом стилів. Створюється окремий файл css. Далі за допомогою спеціальних команд він підключається до необхідних документів. Такий вид називається зовнішньою таблицею стилів.

Даний спосіб найбільш кращий. Він дозволяє розробляти стилі сайту окремо від HTML-документів. Потім стилізацію можна використовувати в одному файлі style.css на багатьох сторінках.

Прописуємо шлях якраз в тезі head. У ньому вказується вся необхідна системна інформація для відображення сторінки. Підключається ось таким чином:

для простої структури html документа це виглядає так:

<! DOCTYPE HTML> <html> <head> <meta charset = "utf-8"> <title> Назва сторінки </ title> <link rel = "stylesheet" type = "text / css" href = "style.css "> <! - підключаємо файл стилів -> </ head> <body> <h1> Привіт, світ! </ H1> </ body> </ html>

розшифровка:

Тег link - це одиночний елемент, який говорить браузеру, що далі інформація піде про заслання
Атрибут rel зі значенням stylesheet - позначає, що підключається файл є каскадної таблицею стилів
Type зі значенням text / css - говоримо браузеру, що наш файл створений в текстовому форматі з розширенням css
Href зі значенням style.css - це шлях до файлу стилів

Зверніть увагу

В атрибуті href можна вказувати як абсолютний, так і відносний шлях до файлу стилів.

Також зауважте, що ім'я файлу може бути будь-який на латиниці. Головне, щоб у нього було розширення css. Для основного файлу стилів всього сайту я рекомендую вказувати ім'я style.

Загалом, цей спосіб найбільш поширений при створенні сайту. По-перше, так зручно. Якщо багато стилів, то краще їх винести в окремий файл, а не пхати все в html.

По-друге, ви можете відразу підключати кілька файлів. Один основний зі свого сайту. А другий з іншого проекту або сервісу.

Наприклад, вставка кнопок соціальних мереж з сервісу. Ви прописуєте шлях до файлу стилів кнопок саме з того сервісу, який ці кнопки вам надав.

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

Підключення CSS внутрішніми стилями

Другий спосіб - це підключення CSS прямо всередині html документа. Це вже будуть внутрішні стилі. Описуються вони в тезі head але вже за допомогою парного елемента style.

<Style> H1 {font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: # 333366; } </ Style>

На сторінці виглядає це так:

<! DOCTYPE HTML> <html> <head> <meta charset = "utf-8"> <title> Назва сторінки </ title> <style> <! - початок внутрішніх стилів -> H1 {font-size: 120 %; font-family: Verdana, Arial, Helvetica, sans-serif; color: # 333366; } </ Style> <! - кінець внутрішніх стилів -> </ head> <body> <h1> Привіт, світ! </ H1> </ body> </ html>

Усередині тега style стилі прописуємо тільки по своєму рідному синтаксису. Тобто так само, як їх прописуємо в готельному файлі стилів. У самому файлі css тег style прописувати не потрібно.

Даний спосіб підключення css не дуже зручний. Як правило, він використовується в основному для асинхронної завантаження стилів. Про неї ми ще нижче поговоримо.

Підключення CSS до html через import

Ще один варіант - це підключення css до html за допомогою директиви @import. Прописується він в тезі style.

<Style> @ import url ( "/ theme / style.css"); </ Style>

Можна вказувати як абсолютний, так і відносний шлях до файлу. Ось як виглядає на сторінці:

<! DOCTYPE HTML> <html> <head> <meta charset = "utf-8"> <title> Назва сторінки </ title> <style> @ import url ( "/ theme / style.css"); <! - імпорт файлу стилів -> </ style> </ head> <body> <h1> Привіт, світ! </ H1> </ body> </ html>

Комбінація імпорту та внутрішніх стилів

Можна використовувати комбінацію імпорту файлу і частина внутрішніх стилів. Все прописуємо в тезі style.

<Style> @ import url ( "/ theme / style.css") H1 {font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: # 333366; } </ Style>

На сторінці це виглядає так:

<! DOCTYPE HTML> <html> <head> <meta charset = "utf-8"> <title> Імпорт </ title> <style> @ import url ( "/ theme / style.css") H1 {font-size : 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: # 333366; } </ Style> </ head> <body> <h1> Привіт, світ! </ H1> </ body> </ html>

Підключення CSS в CSS

Можна використовувати підключення CSS файлу до іншого CSS. Для цього теж можна використовувати @import.

синтаксис:

@import "шлях до файлу";

Ось приклад підключення декількох файлів стилів в одному css:

@import url "/ style / pervi .css"; @ Import url "/ style / vtoroi .css"; H1 {font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: # 333366; }

Inline CSS

Inline CSS - це вбудовані стилі, які вбудовуються тільки в певний тег html . Наприклад, до якого-небудь з абзацом. Працює через атрибут style.

<P style = "font-weight: bold; color: red;"> Зверніть увагу на цей текст. </ P>

У прикладі видно, що за допомогою атрибута style ми задали жирне накреслення і червоний колір тексту в абзаці (тезі p).

Такий варіант буде корисний, коли потрібно задати різні стилі для одного елемента (тега). Наприклад, стилізація різних абзаців. Ще часто використовують для стилізації різних осередків таблиць. Так інформація сприймається набагато краще.

Так інформація сприймається набагато краще

Даний метод використовується не так часто. Адже він вказує стилізацію тільки для одного конкретного тега. Тому всі елементи сторінки таким способом стилізувати не дуже зручно.

Але як я говорив вище, в деяких ситуаціях такий спосіб може стати в нагоді.

Скажу, що якщо інлайн стилі ви будете використовувати як в якості додаткової стилізації, то нічого поганого не буде.

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

Завантаження CSS для певного браузера

Обов'язково хочу згадати про завантаження css для певного браузера. Адже кожен з них може відображати сайт по-різному. На одному проект може добре відображатися, а на іншому криво.

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

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

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

Однак проблема в тому, що це не 100% рішення проблеми. У нових версія браузерів CSS хак може не працювати. Тому повністю покладатися на такий варіант я б не радив.

Нижче я дам вам кілька прикладів. Однак найкращим варіантом буде відмова від підключення різних css стилів для різних браузерів. Намагайтеся робити єдині стилі для всіх браузерів.

Це складно, але можливо!

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

Щоб цього домогтися, рекомендую не ускладнювати проекти. Додавайте тільки те, що дійсно, необхідно. Ще звертайте увагу на валідацію коду. Адже правильний тип документа має велике значення в злагодженій роботі браузерів.

CSS хакі

Ось кілька прикладів css хаков для Internet Explorer.

/ ** Варіант 1 ** / *: first-child + html .block {border: 1px solid red; } / ** Варіант 2 ** / * + html .block {border: 1px solid red; } / ** Варіант 3 ** / html> body .block {* border: 1px solid red; } / ** Варіант 4 ** / *: first-child + html .block {border: 1px solid red; } / ** Варіант 5 ** / *: first-child + html .block {border: 1px solid red; } / ** Варіант 6 ** / @media \ 0screen .block {border: 1px solid red; } / ** Варіант 7 ** /: root .block {border: 1px solid red; }

Замість .block вставляємо свій клас або id, для якого задаються стилі. Замість border: 1px solid red; приписуємо свої властивості і їх значення.

Браузер IE може сприймати код, який знаходиться в коментарях. Тому якщо у вас не вийшов варіант вище, то можна використовувати таке рішення:

<! - [if IE 7]> <style> .block {border: 1px solid red; } </ Style> <! [Endif] ->

Замість 7 вказуємо бажану версію IE.

Також в тезі head можна додатково окремим файлом підключити css до html. Тут теж вставляємо код між коментарями.

<! - [if IE]> <link href = "/ ie.css" rel = "stylesheet" type = "text / css" /> <! [Endif] ->

Хак для Mozila Firefox:

@ -Moz-document url-prefix () {.block {border: 1px solid red; }}

Для Google Chrome:

@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {.block {border: 1px solid red; }}

Opera 10:

@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {.block {border: 1px solid red; }}

Для ранніх версій:

html: first-child .block {border: 1px solid red; }

або

o: -o-prefocus .block {border: 1px solid red; }

Асинхронна завантаження CSS

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

Це може істотно прискорити завантаження сайту. Особливо на мобільних пристроях.

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

Використовуємо внутрішні стилі

Можна вставити внутрішні стилі для першого екрану на сайті. А вже нижче підключати готельний файл css.

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

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

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

Ще такий метод можна використовувати якщо потрібно завантажувати лише невеликий шматок стилів. По-перше, буде менше ймовірності помилитися. По-друге, сам html файл не буде занадто великим. Якщо ж потрібно буде вставити великий шматок стилів, то це може сильно збільшити вагу сторінки.

об'єднання файлів

Ще один спосіб прискорити завантаження сторінки, це об'єднання файлів стилів в один загальний. Так браузер теж зможе швидше обробити сторінку.

Найпростіше, це перенести всі необхідні стилі з інших файлів в один. Або ж можна через @import спробувати в самому файлі css підключати інші стилі.

Але на це може піти трохи більше часу. Тому краще, коли всі стилі прописані в одному загальному файлі.

висновок

Тепер ви знаєте, як підключити html до css. Для цього завдання є кілька варіантів вирішення. Підключення готельним файлом css буде вашим основним варіантом. Адже як правило файл стилів теж не маленький. Тому буде не розумно писати все прямо в html .

Є ще й інші способи підключення. Використовуйте їх тільки як додатковий варіант.

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

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

Статьи