Шановні українці! Матеріал був перекладений з російської мови. Тому можуть бути незначні помикли...
Каскадні таблиці стилів
Каскадні таблиці стилів (Cascading Style Sheets, CSS) - спосіб оформлення сторінок HTML, що дозволяє за допомогою параметрів стилю визначити відображення вмісту тега. Основні параметри стилів:
border - рамка навколо вмісту тега. Можливі значення: ширина кордону в стандартних одиницях (зазвичай пікселях: 1px), стиль кордону (суцільна solid, точкова dotted, штрихова dashed, відсутня none), колір кордону (назва кольору або RGB-код кольору).
color - колір тексту. Можливі значення: назва кольору (black, red, green, yellow) або RGB-код кольору (#00fac3).
display - показ вмісту тега. Можливі значення: inline (вміст тега відображається); none (вміст тега не відображається і місце на екрані не резервується).
font-family - шрифт тексту. Можливі значення: назва шрифту (Arial, Times New Roman) або назва сімейства шрифтів (Times, Courier).
font-size - розмір шрифту. Можливі значення: розмір шрифту в стандартних одиницях (пунктах: 12pt, міліметрах: 12mm, пікселях: 12px), в абсолютних одиницях (small, medium, large), у відносних одиницях (smaller, larger).
font-weight - напівжирне накреслення шрифту. Можливі значення: normal або bold.
font-style - курсивне накреслення шрифту. Можливі значення: normal або italic.
left - відступ ліворуч вмісту тега. Можливі значення: відступ у стандартних одиницях (пунктах: 12pt, міліметрах: 12mm, пікселях: 12px).
margin - границя навколо вмісту тега. Можливі значення: ширина кордону в стандартних одиницях (пунктах: 12pt, міліметрах: 12mm, пікселях: 12px).
padding - бордюр між вмістом тегу та рамкою навколо вмісту тега. Можливі значення: відступ у стандартних одиницях (пунктах: 12pt, міліметрах: 12mm, пікселях: 12px).
position - тип позиціонування вмісту тега. Можливі значення: absolute (абсолютне позиціонування на екрані з використанням параметрів стилю top і left), relative (відносне позиціонування за звичайними правилами HTML), static (яке-або спеціальне позиціонування відсутній і вміст тега розміщується за звичайними правилами HTML).
text-align - вирівнювання абзацу тексту. Можливі значення: left (по лівому краю), right (по правому краю), center (по центру), justify (по ширині).
top - відступ зверху вмісту тега. Можливі значення: відступ у стандартних одиницях (пунктах: 12pt, міліметрах: 12mm, пікселях: 12px).
Передбачено три різних способи визначення стилів:
зовнішні таблиці стилів для декількох сторінок - визначення стилів розміщується в окремому файлі з розширенням css. Застосовується для стилів, використовуваних на декількох сторінках. Структура файла з таблицею стилів:
<style type="text/css">
визначення стилів
</style>
пОпределить стиль можна наступним чином:
вказавши параметри стилю для необхідного тега;
тег {параметр: значення; параметр: значення;}
вказавши параметри стилю для стильового класу;
.класс {параметр: значення; параметр: значення;}
вказавши параметри стилю для ідентифікатора стилю;
#ідентифікатор {параметр: значення; параметр: значення;}
Для використання в сторінці HTML зовнішнього файлу таблиці стилів необхідно застосувати в заголовку сторінки тег <link>:
Застосування стилю на сторінці HTML залежить від того, яким чином стиль був визначений:
якщо параметри стилю були вказані для певного тега, то ніяких змін на сторінці HTML робити не потрібно;
якщо параметри стилю були вказані для стильового класу, то для застосування стилю до необхідного тегу на сторінці необхідно присвоїти атрибуту class значення, рівне імені стильового класу;
<тег class=клас>
якщо параметри стилю були вказані для ідентифікатора стилю, то для застосування стилю до необхідного тегу на сторінці необхідно присвоїти атрибуту id значення, рівне імені ідентифікатора стилю (ідентифікатор стилю рекомендується використовувати на сторінці тільки в одному тезі);
<тег id=ідентифікатор>
вбудовування таблиць стилів в сторінку HTML - визначення стилів прописується в заголовку сторінки в парному тезі <style>. Застосовується для стилів, які використовуються тільки на даній сторінці.
<head>
<style type="text/css">
визначення стилів
</style>
</head>
Визначення та застосування стилів аналогічно використання зовнішніх таблиць стилів.
вбудовування стилів в теги HTML - визначення стилю прописується в атрибуті style якого-або тега. Застосовується для стилів, які використовуються тільки для цього тега на сторінці. Вбудовування стилів в теги HTML записується наступним чином:
