Випуск №6. CSS — каскадні таблиці стилів.

20

Здрастуйте, шановні передплатники.

З Вами я, Андрій!

У цьому випуску ми поговоримо про CSS (каскадних таблиць стилів).

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

І так почнемо!

За допомогою таблиць стилів можна вказати правило відображення тега HTML в браузері.

Таблиця стилів — це фактично набір правил, які застосовуються до HTML-тегами. Кожне правило складається із селектора і визначення.

Селектор — це тег HTML.

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

Приклад:

p {color: #FF0000;}

Тут:

P — це селектор.

color: #FF0000; — це визначення. Визначення завжди полягає у фігурні дужки, після кожного визначення ставиться крапка з комою.

сolor — це назва властивості (у даному випадку колір).

#FF0000 — це значення властивості.

Властивостей таблиць стилів дуже багато, з ними ми познайомимося в наступних випусках.

А поки, для того щоб зрозуміти в роботі того, про що піде мова в цьому випуску, скористаємося двома властивостями:

color — задає колір тексту.

background-color — задає фоновий колір елемента.

Отже, розглянемо яким чином можна вбудовувати таблиці стилів в документ.

1 Спосіб:

Можна задати властивість для будь-якого тега за допомогою параметра style. У цьому випадку селектор не потрібен.

Приклад:

Ми змінили колір тла абзацу

2 Спосіб:

Вказати властивість в заголовку документа між тегами ….

Приклад:

Untitled Document
p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}

Ці властивості застосовуються до всього документа.

Значить, у нас все абзаци будуть мати сіруватий колір тла, і червоний колір шрифту, а всі заголовки другого рівня будуть на чорному тлі з жовтим кольором шрифту.

Всі інші теги відображаються без застосування стилів.

Якщо однаковими властивостями володіють кілька тегів, їх можна вказати через кому у якості селектора.(H1, H2, p, li{ color:blue;}).

3 Спосіб:

Спосіб дозволяє використовувати одну таблицю для форматування декількох документів.

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

Untitled Document

href=»mystyle.css» — шлях до файлу CSS.

А вміст файлу будується за тими ж правилами (селектор та визначення).

Код файлу mystyle.css:

p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}

4 Спосіб:

Спосіб дозволяє використовувати каскадну таблицю стилів (css), що лежить на якому-небудь сервері.

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

@import:url(http://www.mysite.ru/style/mystyle.css);

Приклад:

Untitled Document
@import:url(http://www.mysite.ru/style/mystyle.css);
p {color:# 003333; background-color:#000099;}
h2 {color:#FFFF00; background-color:#000000;}

Ви помітили, що в 4-му способі реалізовано два способи включення таблиці стилів до документа.

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

Отже, розташування способів в порядку убування їх пріоритетів:

1 Спосіб;

2 Спосіб;

4 Спосіб;

3 Спосіб;

Тобто, якщо в 3-му або 4-му способі зазначено p {color: red;}, а у 2-му або в 1-му p {color: blue;} застосується до параграфів властивість p {color: blue;}, тому що пріоритет 1-ого та 2-ого способу вище, ніж 3-го і 4-го.

Пару слів про спадкування і перейдемо до класів.

Часто зустрічається ситуація, коли вміст одного тега знаходиться цілком всередині іншого.

Приклад:

Текст абзацу текст абзацу, виділений жирним продовження тексту абзацу.

Тобто у нас тег лежить повністю всередині тега

.

І якщо ми тепер задамо стиль параграфа, він застосовуватиметься і до тегу .

Текст абзацу червоними буквамитекст абзацу червоними літерами, виділений жирним продовження тексту абзацу червоними.

Класи.

Класи використовуються для того, щоб одного і того ж тегу можна було б задавати різні правила.

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

Давайте подивимося на приклад:

p.red {color:#FF0000; background-color:#000099;}
p.yellow{color:yellow; background-color:#000000;}

Описали клас red і yellow для тега

Параграф класу red з червоним кольором шрифту і синім фоном.

Параграф класу yellow з жовтим кольором шрифту і чорним фоном.

……

Існують, також і універсальні класи.

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

Синтаксис таких класів досить простий: спочатку йде крапка, потім ім’я класу, і в фігурних дужках визначення.

Приклад:

.red {color:#FF0000;}

Заголовок 1-го рівня, класу red

Заголовок 2-го рівня, класу red

Текст параграфа класу red

Таким чином, ми застосували клас red до трьох різних тегам.

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

Рекомендую застосувати стилі, наприклад, до нашого другого випуску з казками. Зробити там різнокольорові абзаци, заголовки з допомогою стилів.

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

Пишіть на E-mail: [email protected]

Проект webformyself.com — основи самостійного сайтобудування

Успіхів у навчанні!

З Вами був Андрій Бернацький