Базовий синтаксис. Спосіб запису CSS відрізняється від форми використання тегів HTML й у загальному виді має наступний синтаксис

селектор {властивість1: значення; властивість2: значення;...}

Селектором називається ім'я стилю, в якому зазначені параметри форматування. Селектори поділяються на декілька типів: селектори тегів, ідентифікатори й класи. Після вказівки селектора йдуть фігурні дужки, у яких записується необхідна стильова властивість, а її значення вказується після двокрапки. Параметри розділяються між собою крапкою з комою, в кінці цей символ можна опустити. CSS не чутливий до регістру, переносу рядків, пробілів і символів табуляції, тому форма запису залежить від бажання розроблювача. Імена селекторів обов'язково повинні починатися з латинського символу (a-z, A-Z) і можуть містити в собі цифри.

Селектори тегів. Як селектор може виступати будь-який тег HTML, для якого визначаються правила форматування, такі як: колір, фон, розмір і т.д. Правила задаються в наступному виді:

тег {властивість1:значення; властивість2:значення;}

Наприклад: p {text-align:justify; color:green;}

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

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

тег.ім’я класу {властивість1: значення; властивість2: значення;}

Всередині стильової таблиці спочатку пишеться бажаний тег, а потім, через крапку користувальницьке ім'я класу. Щоб указати в коді HTML, що тег використовується з певним стилем, до тегу додається параметр class="ім'я класу".

Імена класів вибираються за бажанням, головне, щоб вони були зрозумілі й відповідали їхньому використанню. Можна, також, використати класи і без вказівки тегу. Синтаксис у цьому випадку буде наступний.

.ім’я класу {властивість1: значення; властивість2: значення;}

Класи зручно використовувати, коли потрібно застосувати стиль до різних тегів веб-сторінки: ячейок таблиці, посилань, параграфів.

Ідентифікатори. Ідентифікатор (що називається також "ІD селектор") визначає унікальне ім'я елемента, який використовується для зміни його стилю й звертання до нього через скрипти, що дозволяє управляти стилем елемента динамічно.

Синтаксис використання ідентифікатора наступний.

#ім’я ідентифікатора {властивість1: значення; властивість2: значення;}

Звертання до ідентифікатора відбувається аналогічно класам, але як ключове слово в тегу використовується параметр іd, значенням якого виступає ім'я ідентифікатора. Символ дієх при цьому вже не вказується. Як і при використанні класів, ідентифікатори можна застосовувати до конкретного тегу. Синтаксис при цьому буде наступний.

тег#ім’я ідентифікатора {властивість1: значення; властивість2: значення;}

Коментарі. Щоб позначити, що текст є коментарем, застосовують конструкцію /*... */ Для створення однорядкового коментаря застосовується подвійна коса риса (//). Усе, що перебуває після цих символів браузером ігнорується й розцінюється як коментар. Перенос рядка в цьому випадку не допускається.

Контекстні селектори. При створенні веб-сторінки часто доводиться вкладати одні теги всередину інших. Щоб стилі для цих тегів використовувалися коректно, допоможуть селектори, які працюють тільки в певному контексті. Наприклад, задати стиль для тегу <b></b> тільки коли він розташовується всередині контейнера <p></p>. Таким чином можна одночасно встановити стиль для окремого тегу, а також для тегу, що перебуває всередині іншого. Контекстний селектор складається із простих селекторів, розділених пробілом. Так, для селектора тегу синтаксис буде наступний:

тег1 тег2 {...}

В даному випадку стиль буде застосовуватися до тегу2, коли він розміщується всередині тегу1, як показано нижче:

<тег1>
<тег2>... </тег2>
</тег1>

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

a {color:green;}
.menu a {color:navy;}

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

Групування. При створенні стилю для сайту, коли одночасно використовується безліч селекторів, можлива поява повторюваних параметрів. Щоб не повторювати двічі ті самі елементи, їх можна згрупувати для зручності подання й скорочення коду. Селектори групуються у вигляді списку тегів, розділених між собою комами. У групу можуть входити не тільки селектори тегів, але також ідентифікатори й класи. Загальний синтаксис наступний.

селектор1, селектор2,... селекторN {Опис правил стилю}

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

Блокові й рядкові елементи і їхні властивості. Існує поняття рядкового (іn-lіne) елемента розмітки й блокового (block) елемента розмітки. Найпростіше пояснити різницю між блоком і рядковим елементом можна на прикладі. Параграф – це блоковий елемент розмітки. Виділення курсивом – це рядковий елемент розмітки.

За набором атрибутів керування відображенням (атрибути опису стилю) рядкові й блокові елементи відрізняються. Деякі властивості елементів наведені в таблиці А.1 додатка А.

Блокові елементи дозволяють оперувати з елементами в термінах блоків. При цьому блок тексту стає елементом дизайну сторінки з тими ж властивостями, що й картинка, таблиця або прямокутна область додатка. Властивості блокового елемента наведені на рис.4.1.

Рисунок 4.1 – Властивості блокового елемента

4.2 Порядок виконання лабораторної роботи

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

<div id="header"><p>Заголовок</p></div>

<div id="leftmenu"><p>/<strong>Навігація</strong></p>

<ul>

<li><a href="#">Розділ 1</li>

..............................

<li><a href="#">Розділ N</li>

</ul>

</div>

<div id="content"><p>Це зміст</p></div>

<div id="rightmenu"><p>/<strong>Новини</strong></p>

</div>

Але ця структура буде відображатися послідовно. Для того, щоб отримати відповідне відображення використовується форматування за допомогою таблиць стилів. Наприклад:

Файл style.css

body {margin:0px; padding:0px;

background-color:#f0f0f0;}

#header {

margin:0px;

padding:1%;

text-align:center;

font:bold xx-large normal;

}

#main {

margin:0px;

padding:0px;