CSS


Стрімкий розвиток Всесвітньої павутини та поява величез
ної кількості сайтів у 1990-х роках спонукали до розробки нових тегів мови HTML, які відповідали за дизайн сайтів.
Проте, при зміні дизайну сайта в кожну його сторінку потрібно було вносити зміни, що значно ускладнювало роботу.
У 1994 році було розроблено каскадні таблиці стилів. Каскадні таблиці стилів (англ. Cascading Style Sheets, або скорочено CSS) — спеціальна мова, що використовується
для опису зовнішнього вигляду сторінок, написаних мовою розмітки даних. 

Основна ідея CSS полягає в тому, щоб відокремити дизайн документа від його вмісту. 
CSS відповідає за оформлення і зовнішній вигляд HTML-коду, тоді як HTML — за
зміст та логічну структуру документа.

Конструкція СSS, яка відповідає за зовнішній вигляд певного елемента HTML, 
називається CSS-правилом. 

Усі CSS-правила складаються із селектора та блоку оголошень.
Блок оголошень містить одне або кілька оголошень, розташованих у фігурних дужках. Усередині блоку оголошень знаходяться пари CSS-властивість — значення, розділені
крапкою з комою (див рис.).








Кожне правило починається із селектора (покажчика), що вказує на ті html -елементи, 
до яких застосовується CSS-правило. Саме в блоці оголошень установлюються 
правила відображення вибраних нами елементів, визначаються їхні властивості — розмір, колір, відступи, поля, розташування на екрані (позиціонування) тощо. 

Селектор дозволяє звернутись до одного або кількох HTML-елементів.
Якщо необхідно визначити стиль таким чином, щоб один і той самий елемент у 
різних випадках відображався по-різному, то на допомогу приходять класи. 

Клас описується у вигляді .ім’я_класу {властивості}. Для присвоєння класу заданому тегу використовується властивість class = "ім’я_класу"

Ідентифікатори (селектори id) дуже подібні до класу, крім одного — ідентифікатор
може мати одне-єдине унікальне ім’я в усьому документі. У файлі CSS ім’я 
вказується зі знаком решітки на початку, а до потрібного елемента додається атри-
бут id = " ".

Термін «cascading» (каскадні) у назві CSS вказує на можливість злиття різних
таблиць стилів для створення єдиного визначення стилю окремого елемента 
(тегу) чи всього документа.
Каскадність CSS — це механізм, завдяки якому до елемента HTML-документа
може застосовуватися більш ніж одне правило CSS.

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

Існує кілька способів підключення CSS-коду до HTML-документа. 
Розглянемо деякі з них.

• Застосування inline-стилів (стилі, які підставляються безпосередньо в рядок).
Додавання CSS-правила в HTML-тег за допомогою атрибута style. Усередині
атрибута style можна написати кілька CSS-оголошень, розділених крапкою з комою, фігурні дужки не використовуються. Inline-стилі змішують уміст документа
і його дизайн, тому його краще використовувати як виключення, у випадку,
коли елемент зустрічається лише один раз у документі або на сайті, але вимагає особливого оформлення
(приклад 1).



















• Застосування таблиць стилів документа (document style sheets).
Називаються так тому, що розташовуються безпосередньо в HTML-документі й застосовуються лише до нього.
 
Іноді їх називають embedded style sheet (убудований стиль). Збереження CSS-коду
в HTML-документі у тезі <style>, що теж розміщується в <head>. Зазвичай цей
варіант використовується, коли існує лише одна проста HTML-сторінка й немає
сенсу створювати додатковий файл
(приклад 2).























• Застосування зовнішніх, або зв’язаних, стилів (external style sheets).
Це найбільш поширений варіант. Він полягає у винесенні CSS-коду в окремий
файл із розширенням .css та підключенням за допомогою тегу <link>, який
знаходиться виключно всередині елемента <head>. 
Зустрівши в HTML-документі цей тег, браузер завантажить із сайта CSS-файл
і застосує до документа стилю, що містяться в ньому 
(приклад 3).





















Запитання
  1. Що таке каскадні таблиці стилів? Назвіть причини їхньої появи.
  2. Опишіть синтаксис CSS-правила.
  3. Що таке селектор? Які бувають селектори? 
  4. Опишіть коротко способи підключення стилів. Проаналізуйте, коли і який спосіб краще використовувати.
Завдання
Для виконання завдання зручно використати notepad++.
1. Створити веб-сторінку, що містить картинку і текст. Текст обтікає картинку. Для тексту обтікання відбувається зліва.

У папці веб-дизайн потрібно створити файли :
1. спанієль.html
<html>
 <head>
  <title> Спаниель </title>
  <link rel="stylesheet" href="css01.css">
 </head>
 <body>
    <img src="спаниель.pngwidth="115" height="140
     class="picture">
<p> 
       Неслухняна величезна шерсть, круглі великі очі і <br>
   короткі ніжки - це все про спанієлів!        <br> 
</p>  
    <p> Але напевно найголовнішою їх гідністю є вуха, які <br>
    незграбно обвисають буквально відразу ж після     <br>
народження!  
    </p>
    <p>   
   Саме через них Кавалер кінг чарльз спанієль  <br> 
   розташувався на 13-му місці. 
  </p>
  </body>
</html>

2. css01.css
.picture {
float: left;
margin: 10px;
}
p {
margin: 10px;
text-align: left;
font-family: sans-serif;
font-size: 100%;
font-weight: normal;
color: gray;
}

3. В цій же папці розмістити файл-картинку спаниель.png із 
зображенням песиків.