Каскадні таблиці стилів. Стильове оформлення сторінок

Методична скарбничка вчителя фізики та
інформатики
Крисюк В.М.

Каскадні таблиці стилів. Стильове оформлення сторінок

Каскадні таблиці стилів - CSS(Cascading Style Sheets) - мова, яку використовують для опису вигляду (кольори, шрифти, розташування блоків та інші аспекти) веб-сторінок. Це спрощує процес створення сторінок і поліпшує їх дизайн. (https://uk.wikipedia.org/wiki/CSS)

Використання стилів у веб-технологіях схоже на їх використання в сучасних текстових редакторах — текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу виводити на web-сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням.

При описі стилів вказується селектор - назва тега (чи список назв тегів) і у фігурних дужках опис стилю (пари властивість:значення записують через крапку з комою) .

Шрифти
font-family	Конкретний шрифт або перелік шрифтів (основний та резервні)	font-family: Times New Roman, sans-serif;
font-weight	Насиченість шрифту (lighter, bold, bolder) або число.	font-weight: bolder; font-weight: 600;
font-size	Розмір шрифту (проценти, пункти, пікселі, сантиметри)	font-size: 300%; font-size: 120px; font-size: 400pt;
font-style	Стиль шрифту (normal,	font-style: normal; font-style: italic font-style: oblique;
Колір
color	Колір елемента	color: yellow; color: #00ff00; color: #374;
background-color	Колір фону елемента (не сторінки)	background-color: gold; background-color: #fa34bb;
Текст
text-decoration	Текстовий ефект (підкреслення або закреслення)	text-decoration: underline; text-decoration: none; text-decoration: line-through;
text-align	Вирівнювання елемента (left, right, center, justify)	text-align: justify; text-align: center;
text-indent	Відступ першого рядка	text-indent: 50pt;
line-height	Інтервал між рядками	line-height: 50 %
Межі
margin-	Відступи навколо елемента margin-left margin-right margin-top margin-bottom	margin-right: 20pt; margin-left: 2cm;
Одиниці вимірювання px Пікселі cm Сантиметри mm Міліметри pt Пункти (типографське) % Проценти

Довідник стилів

Стилі дозволяють змінити стандартні теги, такі, як <h1>...<h6>, <p>, <table> та інші.

Підключати аркуші стилів можна різними способами.

1) Стилі в конкретному тезі.

2) Стилі в голові (<head>) веб-документа.

<h1 style="font-size: 120%;
font-family: Verdana, Arial, sans-serif;
color: #336">

Заголовок

</h1>

<style type="text/css">

h1{
font-size: 120%;
font-family: Verdana, Arial, sans-serif;
color: #336
}

</style>

Завдання 1. Перегляньте файл
css-1.html, відкривши його в браузері. Змініть властивості другого абзацу, застосувавши до нього будь-які стилі.

Завдання 2. Перегляньте файл
css-2.html, відкривши його в браузері. Змініть стилі на свій смак, забезпечивши зручність перегляду. Як впливає зміна стилів у заголовку на загальний вигляд сторінки?

Завдання 3. Перегляньте файл css-3.html, відкривши в браузері. Змініть стилі та контент так, щоб сторінка відповідала зразку.

3) Стилі в окремому файлі, який буде мати розширення css (Наприклад, style.css).

Під час створення html-файлу увагу концентрують на змісті сторінки, а не на її зовнішньому вигляді, а під час створення таблиці стилів — навпаки.
Цей файл прив'язують до html-сторінки з допомогою тегу <link>, що описується в "голові".

Файл style.css

html-сторінка

   h1{
font-size: 120%;
font-family: Arial;
color: #336
    }

   p {
font-size: 110%;
color: grey
    }

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<h1> Привіт, світе! </h1>

</body>

</html>

Мова надає можливість створювати власні стилі, які будуть застосовуватися до частин (блоків) документа.

Такі блоки виділяються парними тегами <div> або <span >.

<div> ...</div> використовується для виділення вертикальних фрагментів (кілька абзаців, рядків тощо)
<span >...</span >використовується для виділення горизонтальних фрагментів

<div style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336">
Привіт, світе!
</div>

Такі стилі можна описати двома способами

для блоку з ідентифікатором	для блоку з селектором класу
#name1 { text-align: center; color: red; }	.name1{ text-align: center; color: red; }
<div id="name1"> Hello, World! </div>	<div class="name1"> Hello, World! </div>

Завдання 4-1. Перегляньте файл css-4.html, відкривши в браузері.

Яка відмінність між атрибутами HTML-елементів "id" і "class"?

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

id-унікальне власне ім'я елемента на сторінці. На сторінці не має бути декілька елементів з одним id. Наприклад блоку з шапкою сайту можна дати id = "title".
class -вільна ознака, що дається зазвичай до кількох елементів, щоб відрізняти їх від інших. Наприклад, картинкам, які просто супроводжують текст, можна дати class = "decor", а картинкам, які важливі для розуміння тексту - class = "content".
Різний пріоритет. У кожного правила в CSS є "вага", за яким визначається порядок їх застосувань. У id ця вага більше. Тому, якщо у елемента заданий і id, і class, виграє id.
Якірні посилання. Якщо потрібно поставити посилання на якийсь елемент в сторінці, то йому достатньо дати id (<h2 id = "mitka1"> ... </ h2>) і посилатися на нього якорем (http://site/path/#mitka1). Це альтернатива старому <a name="...">.
Множинні ознаки. Елементу можна задавати декілька класів через пробіли: <img class = "important centered printable">. Причому їх можна описати і окремо .important {color: red;}... і в поєднанні:.important.centered {border: solid black 1px;}

Завдання 4-2. Змініть файл css-4.html згідно зразка, використавши стилі.

css-1.html

(1k)

css-2.html

(1k)

css-3.html

(1k)

css-4.html

(2k)