CSS Intro

HTML задає структуру та зміст сторінки. CSS описує зовнішній вигляд (оформлення) контенту.

Каскадність стилів#

Каскадними стилі називаються то, що оформлення, описане для елементів на вищих рівнях, переймають на себе і дочірні елементи рівнями нижче. Прилийте воду на верхній сходинці в під'їзді, і мокрими будуть всі сходи нижче.

Підключення стилів#

Inline#

<body style="color: red;">Some page content</body>

Internal#

<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
</style>
</head>
<body>
Some page content
</body>
</html>

External#

index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Some page content
</body>
</html>
styles.css
body {
color: red;
}

Властивості (properties)#

color: red;
Елемент синтаксисуНазва (en)Опис
colorpropertyНазва властивості
:colonРоздільник між назвою та значенням властивості
redvalueЗначення властивості
;semicolonВказівник завершення опису однієї властивості

Загальна структура CSS правила (rule) виглядає так:

<selector> {
<property>: <value>;
<property>: <value>;
<property>: <value>;
}

Селектори (selectors)#

CSS селектори описують до яких елементів мають бути застосовані вказані після них властивості. 3 самі поширені селектори: тег, id, клас.

Тег#

<style>
h1 {
color: red;
}
</style>
<h1>Teg selector</h1>

id#

<style>
#react {
color: rgb(97, 218, 251);
background-color: #282c34;
}
</style>
<section id="react">
<h2>React</h2>
<p>A JavaScript library for building user interfaces.</p>
</secton>

Клас#

<style>
.hint-info {
color: blue;
}
</style>
<p class="hint-info">Class selector</p>

Питання для самоперевірки#

0 of 4
Edit this page