Як вставити файл CSS в HTML

Автор: Eric Farmer
Дата Створення: 3 Березень 2021
Дата Оновлення: 1 Липня 2024
Anonim
Подключение стилей Css в HTML
Відеоролик: Подключение стилей Css в HTML

Зміст

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

кроки

Метод 1 з 2: Як уставити зовнішню таблицю стилів

  1. 1 Створіть файл CSS. Підготуйте і збережіть файл CSS з расшіерніем «.css».
  2. 2 Завантажте файл CSS на сайт.
  3. 3 Скопіюйте адресу (URL) файлу CSS. Адреса сайту буде виглядати якось так: www.yoursite.com/stylesheet.css.
    • Доброю практикою є видалення з адреси (URL) основного імені домену. Виходячи з цього, адреса http: //мойсайт.com/css/default.css буде скорочений до «/css/default.css». Не забудьте включити провідний слеш ( "/"). Він називається відносним шляхом.
  4. 4 Вставте в файл посилання. Знайдіть у файлі HTML мітку / head> і створіть порожній рядок прямо над нею. Вставте в цей рядок LINK rel = stylesheet type = "text / css" href = "www.ваш_сайт.com / stylesheet.css">, замінивши «www.Ваше ...» на посилання в файлі CSS.
  5. 5 Збережіть файл HTML і завантажте його на сайт.
  6. 6 Переконайтеся, що на сайті все виглядає так, як і має виглядати. В іншому випадку знову відкрийте файл HTML, знайдіть помилки і внесіть зміни.

Метод 2 з 2: Як вставити внутрішню таблицю стилю

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

STYLE type = "text / css"> / STYLE>

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

Поради

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

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

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