Блог вчителя інформатики

Каскадні таблиці стилів.

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

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

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

Правила форматування CSS

Ø Кожна властивість — в окремому рядку.

Ø Кожен селектор — в окремому рядку.

Порядок опису стилів

Ø Позиціонування (position, left/right/top/bottom, float, clear, z-index)

Ø Дісплей і блочне моделювання (display, width, height, margin, padding, ...)

Ø Колір (background)

Ø Текст (list-style-type, overflow, color font, ...)

Ø Інші

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

Якщо необхідно визначити стиль таким чином, щоб один і той самий елемент у різних випадках відображався по-різному, то на допомогу приходять класи. Клас описується у вигляді .ім'я_класу {властивості}. Для присвоєння класу заданому тегу використовується властивість class = "ім'я_ класу".

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

Термін cascading (каскадні) у назві CSS вказує на можливість злиття різних таблиць стилів для створення єдиного визначення стилю окремого елемента (тегу) чи всього документа.

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

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

Таким чином, каскадність у CSS — це здатність стильових правил накладатися одне на одне, перезаписуватися і змішуватися. Підсумковий стиль елемента, який видно в браузері, — це комбінація кількох послідовно застосованих стилів.

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

v Застосування inline-стилів (стилі, які підставляються безпосередньо в рядок).

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

<body>

<header style="background-color: grey;

width: 900px;

heigt: 100px;

text-align: center;

padding-top: 30px;

margin: 10px auto;">

Заголовок сайта

</header>

</body>

v Застосування таблиць стилів документа (document style sheets).

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

<head>

header {

background-color: grey;

width: 900px;

heigt: 100px;

text-align: center;

padding-top: 30px;

margin: 10px auto;

}

</style>

<body>

Заголовок сайта

</header>

</body>

v Застосування зовнішніх, або зв'язаних, стилів (external style sheets).

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

HTML-код

<head>

</head>

<body>

Заголовок сайта

</header>

</body>

Файл style.css

header {

background-color: grey;

width: 900px;

heigt: 100px;

text-align: center;

padding-top: 30px;

margin: 10px auto;

}

Існує ще один спосіб підключення таблиць — за допомогою директиви @import. Цей спосіб дозволяє об'єднувати кілька таблиць стилів в одну.

<head>

@import url("css/style.css")

</style>

<body>

Заголовок сайта

</header>

</body>

Свого часу цей спосіб був досить популярний, проте наразі він втрачає свої позиції через те, що сторінка не завантажиться, доки браузер не завантажить файл CSS повністю. Це негативно позначається на швидкості завантаження сайта й, відповідно, гальмує роботу.

Розглянемо пріоритетність стилів.

1. Якщо в таблиці є однакові селектори, то виконуватиметься той, який записаний останнім. Наприклад:

p{color: grey;} p{color: pink;} — колір абзацу буде рожевим.

2. Якщо для одного елемента задано стиль і в зовнішній, і у внутрішній таблицях, то пріоритет віддається стилю в тій таблиці, яка знаходиться нижче в коді. Наприклад, спочатку в <head> підключили зовнішню таблицю, а потім за допомогою тегу <style> додали внутрішню таблицю. Браузер відобразить стилі внутрішньої таблиці.

3. Пріоритетність за спаданням:

♦ inline-стилі,

♦ ідентифікатори,

♦ класи, теги.

Ознайомимося зі стислим описом модулів CSS.

Назва модуля	Опис
CSS- позиціону- вання	Дає змогу вказати, де з'явиться блок елемента, а вільне переміщення (floating) переміщує елементи до лівого або правого краю блока-контейнера, дозволяючи решті вмісту «обтікати» його
CSS-текст	Керує перетворенням вихідного тексту у форматований і перенесенням рядків
CSS-шрифт	Вибір шрифту (font-family), його насиченість (font-weight), ширина (font-stretch), накреслення (font-style), розмір (font-size)
CSS-посилання	Відповідають за зовнішній вигляд гіпертекстових посилань HTML-документа. Оскільки посилання є основним способом навігації сайтом, то застосування CSS-стилів для оформлення покращить їх візуальне сприйняття.
CSS-тло	Додають тло для будь-якого HTML-елемента. Кожен елемент має шар тла, який може бути прозорим (за замовчуванням), мати кольорове заповнення та зображення
CSS-колір	Описує значення, які дозволяють визначати колір та непрозорість HTML-елементів, а також значення властивості color візуальне сприйняття
CSS-списки	Відповідають за оформлення списків. Зазвичай списки використовуються під час створення навігаційних панелей сайта. За допомогою стандартних CSS-властивостей можна змінити зовнішній вигляд маркера списку, додати зображення для маркера, а також змінити місце розташування маркера

Одиниці вимірювання в CSS

ü піксель (рх) — абсолютна одиниця вимірювання, оскільки не змінюється залежно від інших налаштувань;

ü em — масштабована одиниця, яка вказує відношення до розміру шрифту (font-size) поточного елемента (якщо font-size у документі 12pt, тоді 1em = 12pt, 2ет = 24pt і т. д.);

ü vw і vh — дозволяють вказувати розміри відносно вікна користувача (1vw — це 0,01 ширини вікна, a 1vh — 0,01 висоти).

Сторінки

Каскадні таблиці стилів.