Поточний час:
Сьогодні 21 листопада, вівторокк 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 2 дня

Ваш ip адрес:54.198.210.67

Доброї ночі!
Ви обновили сторінку в 4 : 38
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

Post_58aПривіт на черзі чергова публікація, тематика сьогоднішньої публікації буде стосуватись способів підключення стилів CSS в HTML  документ.

В публікації “Включення CSS в документ HTML” було лише часткове ознайомлення яким способами підключають стилі  CSS.

В даній публікації будуть повністю описані способи підключенн стилів  CSS, і набагато доступніше розяснення ніж в статті з назвою “Включення CSS в документ HTML”

 

Перший спосіб

Перший спосіб підключення стилей CSS називається “звязування” для даного способу використовуються зовнішні таблиці стилей. Відкриваємо notepade++ і створюємо новий документ, зберігаємо цей документ як style.css, створюємо папку з назвою  сss і в дану папку поміщається  файл style.css, в папці сss нам буде потрібно розміщувати всі файли з розширенням сss. Наш файл style.css повинен бути в даній папці. Наступні дії, тепер нам буде потрібно цей файл підключити до  HTML документу.

Відкриваємо наш HTML документ за допомогою текстового редактора notepade++,  в області head підключається даний стиль CSS, за допомогою спеціального тегу який називається “link”, це є одинарний тег, в цей тег додається декілька атрибутів.

Перший атрибут “href”

Цей атрибут буде вказувати браузеру де знаходяться файл  style.css він знаходиться в папці CSS файл style.css

отже перед закриваючим тегом </head> прописуємо тег “link” <link до тегу “link” додаємо атрибут “href” в даному атрибуті виставляємо дорівнює де в лапках вказуємо спочатку де знаходиться папка CSS  потім ставим слеш і назву файлу style.css який знаходиться в даній папці.

Другий атрибут який вказується після атрибуту “href” це атрибут “type”

Другий атрибут “type”

Повинні вказати тип підключаємого документу, після href=”css/style.css” прописуємо атрибут “type” далі дорівнює і в лапках вказуємо тип документу, text далі слеш і css

Наступний атрибут це атрибут “rel” означає “взаємозвязок”  далі в нас  дорівнює, а в лапках значення “stylesheet”.

Не має значення який з атрибутів “type” чи “rel”  ви пропишите першим після атрибуту “href”

<link href=”css/style.css” rel=”stylesheet” type=”text/css” >

<link href="css/style.css" rel="stylesheet" type="text/css" >

код вище здійснює звязок між каскадними таблицями стилей і html–сторінкою, коли браузер буде відкривати html–сторінку тоді завдяки даному коду він привяже дану сторінку з  html–кодом.

До одної html–сторінки можна підключати декілька кодів. Після того як ми підключили таблицю стилей, відкриваємо файл style.css за допомогою notepad++ і заповнюємо файл дадаючи n–кількість стилей.

Наприклад:

body{
background-image:url(../images/70408.jpg);
}

p{
  font-family:verdana;
  font-size:12px;
  line-height:20px;
  text-indent:25px;
  color:#000000;
 }
 a:link{
  color:#FF6347;
   }
a:visited{
   color:#FFFAFA;
   }
a:hover{
  color:#00FF00;
  }
 a:active{
  color:#EE82EE;
  }

Кожен стиль складається з двох елементів, це селектор, і пари властивість значення.

селектрор {

властивість:значення

властивість:значення

властивість:значення

}

Другий спосіб

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

Щоб використати даний спосіб потрібно спочатку прописати теги <style></style> а потім в середині ци тегів, ми наприклад можемо взяти все те, що прописали в першому спсобі, можемо скопіювати і прописати в другий спосіб, між тегами <style> Отже стилі також можна прописувати всередині сторінки.

Наприклад:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http–equiv= "Content–Type" content= text/html; charset=windows-1251″>
<title>Zura-syte</title>
<style>p{
  font-family:verdana;
  font-size:12px;
  line-height:20px;
  text-indent:25px;
  color:#000000;
 }
 a:link{
  color:#FF6347;
   }
a:visited{
   color:#FFFAFA;
   }
a:hover{
  color:#00FF00;
  }
 a:active{
  color:#EE82EE;
  }</style>

Третій спосіб.

Можна створити одну базову таблицю, а потім всередину таблиці з допомогою команди import вставляти інші таблиці. Як це робиться. Відкриваємо файл style.css і перед всіма селекторами додаємо собачка @import потім url в дужках вказуємо таблицю (“”). Якщо таблиця стоїть в тій самій папці тоді шлях прописувати не потрібно.

Але  перед тии як прописати дані, потрібно створити новий документ для іншої таблиці стилей.

6 Responses to Способи підключення стилів CSS в HTML документ

  • Олександр says:

    в другому абзаці пропущена буква і в слові спеціальному.

    [Відповісти]

  • Олександр says:

    у другому абзаці 1-го способу

    [Відповісти]

    Ruslan Reply:

    Дякую Олександр бачу зробив граматичну помилку в слові “спеціальний”, виправлю

    [Відповісти]

  • Олександр says:

    у першому способі у зразку коду пропущений зверху тег

    [Відповісти]

  • Олександр says:

    style

    [Відповісти]

    Ruslan Reply:

    Тег “style” в першому способі не портібно прописувати, оскільки ми вказуємо код в файлі CSS, якби ми підключали стилі CSS через html сторінку тоді потрібно вказати тег style, але в першому способі ми підключаємо стилі через файл, ми в html сторінці вказуємо лінк саме лінк дає команду браузеру що сторінку потрібно відтворювати через CSS.

    [Відповісти]

Leave a Reply

Your email address will not be published. Required fields are marked *