Урок №14. HTML. CSS - Каскадна таблиця стилів

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. Як підключити каскадну таблицю стилів (CSS) на веб-сайті?

Стилізація HTML за допомогою CSS

CSS означає каскадні таблиці стилів. CSS описує, як елементи HTML повинні відображатися на екрані, папері або в інших носіях. CSS економить багато роботи. Він може керувати розташуванням декількох веб-сторінок одночасно.

CSS можна додати до елементів HTML у три способи:

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

Примітка: Ви можете дізнатися більше про CSS у підручнику по CSS.


Вбудований (inline) CSS

Вбудований CSS використовується для застосування унікального стилю до одного елемента HTML. Вбудований CSS використовує атрибут style елемента HTML.

Цей приклад задає колір тексту елемента <h1> синім кольором:

Приклад:

<h1 style="color:blue;">This is a Blue Heading</h1>
Спробуйте самі! »

Внутрішній (internal) CSS

Внутрішній CSS використовується для визначення стилю для однієї сторінки HTML.

Внутрішній CSS визначається в розділі <head> HTML сторінки, в елементі <style>:

Приклад:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Спробуйте самі! »

Зовнішній (external) CSS

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

Щоб використовувати зовнішню таблицю стилів, додайте посилання на файл CSS в розділі <head> сторінки HTML:

Приклад:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Спробуйте самі! »

В будь-якому текстовому редакторі можна записати зовнішню таблицю стилів. Файл не повинен містити жодного HTML-коду і повинен бути збережений з розширенням .css.

Ось як виглядає "styles.css":

Приклад:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

CSS шрифти

Властивість CSS color визначає колір тексту, який буде використовуватися.

Властивість CSS font-family визначає використовуваний шрифт (сімейство шрифтів).

Властивість CSS font-size визначає розмір тексту, який буде використовуватися.


Приклад:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
{
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Спробуйте самі! »

CSS Border

Властивість CSS border визначає межу навколо елемента HTML:

Приклад:

p {
  border: 1px solid powderblue;
}
Спробуйте самі! »

CSS Padding

Властивість CSS padding визначає додавання простору (пробіл) між текстом и border (внутрішній відступ):

Приклад:

p {
  border: 1px solid powderblue;
  padding: 30px;
}
Спробуйте самі! »

CSS Margin

CSS властивість margin визначає поле (простір) за межами border (зовнішній відступ):

Приклад:

p {
  border: 1px solid powderblue;
  margin: 50px;
}
Спробуйте самі! »

Атрибут Id (ідентифікатора)

Щоб визначити певний стиль для одного спеціального елемента, додайте до цього елемента атрибут id:

<p id="p01">I am different</p>

потім визначить стиль для елемента з певним ідентифікатором:

Приклад:

#p01 {
  color: blue;
}
Спробуйте самі! »

Примітка: Ідентифікатор елемента повинен бути унікальним у межах сторінки, тому селектор ідентифікаторів Id використовується для вибору одного унікального елемента!

Атрибут Class

Щоб визначити стиль для спеціальних типів елементів, додайте до елемента атрибут class:

<p class="error">I am different</p>

потім визначить стиль для елементів з певним класом:

Приклад:

p.error {
  color: red;
}
Спробуйте самі! »

Зовнішні посилання на таблиці стилів

На зовнішні таблиці стилів можна посилатися з повною URL-адресою або шляхом, пов'язаним з поточною веб-сторінкою.

Цей приклад використовує повну URL-адресу для посилання на таблицю стилів:

Приклад:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Спробуйте самі! »

Цей приклад посилається на таблицю стилів, розташовану в папці html на поточному веб-сайті:

Приклад:

<link rel="stylesheet" href="/html/styles.css">
Спробуйте самі! »

Цей приклад посилається на таблицю стилів, розташовану в тій же папці, що й поточна сторінка:

Приклад:

<link rel="stylesheet" href="styles.css">
Спробуйте самі! »

Примітка: Докладніше про шляхи файлів ви можете прочитати в розділі Шляхи HTML файлів.

Резюме розділу


Перевірте себе вправами!


HTML теги стилю

Тег Опис
<style> Визначає інформацію про стиль для HTML-документа
<link> Визначає зв'язок між документом і зовнішнім ресурсом

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.