CSS

CSS - система каскадних стилів.

Стилі використовуються для візуального представлення даних.

Стилі називаються каскадними тому що браузер буде слідувати по них як по каскаду, застосовуючи все нові і нові правила, перекриваючи старі. Це щось схоже на закони, коли нові поправки до законів перекривають старі, ті втрачають чинність.

В стилях ми матимемо змогу описати колір шрифтів та елементів, їх розмір, фон, відступи, положення одного відносно інших, їх поведінку на події миші.

Для зручності використання стилів існують класи. Клас описується стилями, має певний набір властивостей. Коли цей клас застосувати до якогось тега - то цей тег отримає всі властивості, всі стилі класа.

В стилях можна описати безпосередньо самі теги, не застосовуючи класи.

Методи включення стилів в HTML

Існує три основних метода включення стилів в HTML.

Безпосереднє включення стиля в тег:


				<p style="color: red">Цей текст буде червоного кольору.</p>

Включення стилів у <head> сторінки, при цьому стилі охоплюються фігурними скобками { }, а тег чи клас записуються безпосередньо перед ними:


				<!DOCTYPE html>

				<html>

				<head>

				  <title>Frontend. Введення в CSS</title>

				  <meta charset="utf-8">

				  <style>

					    p { color: red;}

					    .blue_text { color: blue;}

					  </style>

				</head>

				<body>

				  <p>Цей текст буде червоним. Всі параграфи на сторінці по замовчуванню будуть червоними.</p>

				  <p class="blue_text">Але цей текст буде синім. Класс в системі каскадів
				перекриє червоний колір на синій.</p>

				  <p style="color: green">А цей текст буде взагалі зеленим, тому що так
				прописано безпосередньо в тегу і попередні стилі будуть проігноровані.</p>

				  <p>Це - звичайний параграф, і текст у ньому буде червоного кольору.</p>

Виглядатиме це так:

Цей текст буде червоним. Всі параграфи на сторінці по замовчуванню будуть червоними.

Але цей текст буде синім. Клас в системі каскадів перекриє червоний колір на синій.

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

Це - звичайний параграф, і текст у ньому буде червоного кольору.

Третій спосіб - винесення стилів в окремі файли і підключення їх в блоці <head>:


				<!DOCTYPE html>

				<html>

				<head>

				  <title>Frontend. Заняття 4</title>

				  <meta charset="utf-8">

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

				</head>

Стилі пишуться так:
назва_стилю: опис стилю;
color: red;

Стилі розділяються між собою крапкою з комою:


				div { color: yellow; width: 100px; height: 50px;}


				div {

				  color: yellow;

				  width: 100px;

				  height: 50px;

				}

Поки що ми будемо користуватися виключно третім способом, всі стилі прописувати в окремому файлі.

В іменах класів допускається використовувати такі символи:

a..z 0..9 _ - (символ підкреслення і дифіс/мінус)

Ім’я класу не повинно починатися з цифри чи дифіса/мінуса.

Не допускається використовувати пробіли. Пробіли опускають або замість них використовують підкреслення, дифіс/мінус чи велику літеру. В решті випадків використання великих літер не рекомендується.


				.bigbluebutton { ... }

				.big_blue_button { ... }

				.big-blue-button { ... }

				.bigBlueButton { ... }

Імена ідентифікаторів будуються за тими самими принципами, окрім того, що знак дифіса/мінуса використовувати не бажано.