Як вставити файл css в html: 10 кроків

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

кроки

Метод 1 з 2:

Як встановити зовнішню таблицю стилів

1. Створіть файл CSS. Підготуйте і збережіть файл CSSс расшіерніем «.css ».

Зображення з назвою Add a CSS File to HTML Step 2

2. Завантажте файл CSS на сайт.

Зображення з назвою Add a CSS File to HTML Step 3

3. Скопіюйте адресу (URL) файлу CSS. Адреса сайту буде виглядати якось так: yoursite.com / stylesheet.css.

Доброю практикою є видалення з адреси (URL) основного імені домену. Виходячи з цього, адреса http: // мойсайт.com / css / default.css буде скорочений до «/ css / default.css ». Не забудьте включити провідний слеш ("/"). Він називається відносним шляхом.

Зображення з назвою Add a CSS File to HTML Step 4

4. Вставте в файл посилання. Знайдіть у файлі HTML меткуі створіть порожній рядок прямо над нею. Вставте в цей рядок , замінивши «ваш...»На посилання в файлі CSS.

Зображення з назвою Add a CSS File to HTML Step 5

5. Збережіть файл HTML і завантажте його на сайт.

Зображення з назвою Add a CSS File to HTML Step 6

6. Переконайтеся, що на сайті все виглядає так, як і має виглядати. В іншому випадку знову відкрийте файл HTML, знайдіть помилки і внесіть зміни.

Метод 2 з 2:

Як вставити внутрішню таблицю стилю

1. створіть мітку Відкрийте файл HTML і знайдіть мітку . Додайте над нею кілька порожніх рядків і введіть наступне:

 type ="text / css">

Зображення з назвою Add a CSS File to HTML Step 7

1. Вставте всі свої CSS між цими двома мітками.
2. Збережіть файл HTML (з розширенням .HTML).
3. Переконайтеся, що на сайті все виглядає так, як і має виглядати. В іншому випадку внесіть потрібні зміни.

Поради

Завжди перевіряйте зовнішній вигляд сайту в різних браузерах і на різних операційних системах. Деякі браузери підключаються до CSS трохи по-різному. Це навіть може статися в одному і тому ж браузері, але на різних версіях Mac і Windows. Якщо в іншому браузері ваш сайт виглядає інакше (наприклад, проміжок між деякими об`єктами, такими як списки, має інший розмір), тоді проблема полягає в настройках цього браузера. Знайдіть таблицю майстер-стилів і вставте її в початок файлу CSS, щоб змінити стандартні настройки браузера. Це робиться для того, щоб ваші настройки нічого не міняли в самому браузері.
Вставте зовнішню таблицю стилів, якщо у вас є така можливість. Це дозволить вам змінювати зовнішній вигляд сайту, змінюючи код у вихідному файлі. Так вам не доведеться міняти CSS на кожній сторінці сайту.
Якщо сайт не реагує на CSS так, як ви того очікували, перевірте всю кодування, щоб упевнитися в правильності її написання. Зокрема, приділіть особливу увагу точкам з запитом ( «-») і закривається дужках ( «}»). В CSS файлі досить просто пропустити один з цих символів.
Збережіть файл HTML на комп`ютер, щоб потім відкрити його в різних веб-браузерах і перевірити ще раз його зовнішній вигляд перед подальшої завантаженням. Але щоб його завантажити, файл CSS необхідно вставляти в HTML в якості зовнішньої таблиці стилів.
Якщо таблиця стилів сама собі суперечить - наприклад, спочатку в ній йдеться про те, що текст буде синім, а потім, що він буде корисним - виконуватися завжди буде остання умова. Якщо одна команда представляє собою зовнішню таблицю стилів, а інша - внутрішню, активної буде внутрішня таблиця.

попередження

Не використовуйте «відкриту» постановку CSS, тобто CSS, який включений в мітку HTML. (Приклад: «align = `center`» є відкритою постановкою CSS). Це застарілий варіант з поганою синтаксичною конструкцією. Якщо через деякий час вам доведеться оновлювати сайт, цю постановку буде важко змінити.