2. Історія розвитку css.

1967

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

Вільям Тьюннікліфф (William W. Tunnicliffe) оприлюднив ідею використання мови розмітки в комп'ютерній обробці текстів. Його концепція GenCod вперше дозволила вирішити найважливіше завдання, відокремити вміст документа від його зовнішнього вигляду.

1973

Вбивство президента Альєнде і прихід до влади Піночета. Підписання Паризького угоди про припинення війни і відновлення миру у В'єтнамі.

Чарльз Голдфарб (англ. Charles Goldfarb) презентує мову GML (Generalized Markup Language - узагальнений мову розмітки)

1986

Аварія на Чорнобильській АЕС. Американський зонд «Вояджер- 2» досяг околиць Урана. Майк Тайсон вперше став чемпіоном світу з боксу.

Організацією ISO була опублікована як міжнародний стандарт мова SGML ( Standard Generalized Markup Language – стандартна узагальнена мова розмітки). Ця мова є прямим предком HTML.

1991

Розпався СРСР. Збройні сили США, Великобританії та інших країн почали військову операцію в Іраку «Буря в пустелі». Міхаель Шумахер дебютував в гонках «Формула-1».

Тімоті Джон Бернерс-Лі ( Timothy John Berners -Lee ) використовував синтаксис SGML для створення HTML.

1994

Нельсон Мандела стає президентом ПАР. Зареєстровано національний домен верхнього рівня для Росії – .Ru. Тім Бернерс- Лі заснував Консорціум Всесвітньої павутини (W3C). Була утворена німецька рок-група Rammstein.

Хокон Віум Лі (норв. Hakon Wium Lie) запропонував концепцію каскадних таблиць стилів.

Відомі такі версії каскадних таблиць стилів: CSS1 (1996), CSS2 (1998), CSS2.1 (2009), CSS3 (в розробці).

3. Правила побудови css

Каскадні таблиці стилів (CSS) описують оформлення HTML документа. Звичайно, існують правила побудови цього опису.

З чого складається CSS?

Каскадні таблиці стилів можуть містити директиви, правила та коментарі.

Що таке директива?

Директива - це оператор CSS. Вона починається знаком @ і є певною командою чи установкою. Наприклад, часто застосовуються директиви @charset (задає кодування символів), @import (дозволяє включати одні таблиці стилів в інші ) і @media (задає імена пристроїв відображення).

Директива @charset задає кодування символів таблиці стилів. У CSS повинна йти першою. Застосовувати кілька @charset в одному CSS не можна.

Приклад синтаксису @ charset:

Головний будівельний блок CSS - це правила. Без правил CSS просто втрачає сенс. Адже саме вони визначають, як буде виглядати той чи інший елемент на сторінці. Власне, можна сказати, що сама таблиця стилів складається з набору правил.

Кожне правило має дві основні частини: селектор (selector) і блок оголошень (declaration block). Селектор визначає, до якого елементу будуть застосовані стилі, блок оголошень – які саме стилі застосуються. Блок оголошень складається з одного або декількох оголошень (declarations), а кожне оголошення – це поєднання властивості (property) і його значення (value).

Отже, дивимося правило «у розрізі»:

Загальний синтаксис правила можна описати так:

селектор 1, селектор 2 {

свойство: значение;

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

свойство: значение

}

Складання CSS правил:

• Першим вказується селектор (до чого застосовуємо стилі). Допускається вказувати кілька селекторів через кому.

• Далі йде блок оголошень у фігурних дужках (власне список стилів, які застосовуються).

• Окремі оголошення всередині блоку оголошень розділяються крапкою з комою. Після останнього оголошення в кожному правилі крапку з комою можна не ставити.

• Кожне оголошення являє собою ім'я CSS властивості і його бажане значення, розділені двокрапкою.

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

Групування правил

Правила з однаковими блоками оголошень можна групувати, скорочуючи обсяг CSS. У цьому випадку селектори виписуються через кому, перед спільним блоком оголошень. Наприклад, замість:

Можна записати як:

Результат буде абсолютно однаковим, при цьому обсяг файлу значно скорочується. Крім того, зменшується час, що витрачається на написання CSS. Уяви, наприклад, що потрібно поміняти колір (властивість color) для всіх цих елементів. Звичайно, простіше знайти і виправити тільки один рядок.

Коментарі

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

Коментарі є важливим елементом будь-якої мови програмування. У CSS вони виділяються за допомогою символів /* ( відкриваємо коментар ) і символів */ (закриваємо коментар). Все, що розташоване між цими символами браузер проігнорує.

Приклад:

Значення, що дублюються

CSS обробляється так, що оголошення, яке зустрічається по тексту пізніше, скасовує попереднє.

Наприклад:

Оголошення margin-left: 0; скасує попереднє оголошення. Відступ у абзацу (тег p) буде дорівнює 0.

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

Правила написання коду:

В CSS, як і в HTML будь-яку кількість прогалин, табуляцій або «Enter» вважається, як один пропуск. Це дає прекрасну можливість форматувати текст за допомогою відступів.

Вважається хорошим тоном:

• кожне правило починати з нового рядка;

• кожне оголошення починати з нового рядка;

• робити горизонтальний відступ у оголошень щодо селектора;

• групувати і виділяти відступами (і коментарями) правила які стосуються окремих смислових груп (шапка сайту, оформлення контенту і т.д.).

Виконання цих рекомендацій сильно підвищує читабельність CSS і хороше враження про його автора.