Лекція 3
стилі css та їх використання. Контейнери
План
1. Поняття про стилі CSS та їх створення.
2. Основні види таблиць стилів.
3. Правила каскадності.
3. Контейнери та основи контейнерного дизайну.
1. Сучасна концепція Web-дизайну вимагає розділяти вміст сторінки, її оформлення (представлення) та поведінку (реакцію на дії користувача). До цих пір ми фактично займалися наповненням нашої сторінки даними, згрупованими у різні структури (абзаци, списки, таблиці тощо). Тепер розглянемо як грамотно організувати оформлення нашої інформації.
Для створення оформлення Web-сторінки призначена технологія каскадних таблиць стилів (Cascading Style Sheets, CSS), або просто таблиця стилів. Вона містить набір правил (стилів), що описують оформлення самої сторінки та її окремих фрагментів. Ці правила визначають кольори тексту та фону, накреслення, відступи і т.д.
Кожен стиль повинен бути прив’язаний до відповідного елементу Web-сторінки чи до неї самої. Після прив’язки відповідні параметри стилю починають застосовуватися до даного елемента. Прив’язки є явні (коли ми самі вказуємо який стиль до якого елементу слід застосувати) та неявні, коли стиль автоматично прив’язується до всіх елементів, створених конкретним тегом. Таблиця стилів може описуватися як в самій сторінці, так і в зовнішньому файлі. Крім того окремі стилі можна включати безпосередньо в тег.
Таблиці стилів пишуть на спеціальній мові – CSS. Стандарт першої версії CSS1 з’явився в 1996 році. Зараз широко використовують CSS2 та ведеться розробка CSS3.
Формат визначення стилю має вигляд:
<селектор> {
<атрибут стилю 1>: <значення 1>
<атрибут стилю 2>: <значення 2>
….
<атрибут стилю n>: <значення n>
}
Наведемо основні правила створення стилів.
- Визначення стилю містить селектор і список атрибутів стилю з їх значеннями.
- Селектор використовується для прив’язки стилю до елементу сторінки, на який він повинен розповсюджуватися.
- За селектором, через пробіл, вказують список атрибутів стилю та їх значень, поміщаючи їх у фігурні дужки.
- Атрибут стилю є параметром елемента: колір, вирівнювання, відступ тощо. Значення атрибуту записують через двокрапку (деколи в лапках).
- Пари <атрибут стилю 1>: <значення 1> відділяють одна від одної крапкою з комою.
- Між останньою парою <атрибут стилю 1>: <значення 1> та закритими фігурними дужками крапка з комою не ставиться.
- Визначення різних стилів розділяють пробілами та переводами стрічки.
- Всередині селекторів та імен стилів не повинні бути пропуски та переводи стрічок. Інші пробіли браузер ігнорує.
2. Розглянемо види стилів.
Стиль перевизначення тегу. Його селектором є тег, елемент якого оформляється без символів < та >. Букви можуть бути як малі, так і великі. Наприклад,
P { color: blue}
EM { color: green;
font-weight: bold }
BODY { background: red;
color: #FFFFFF }
Стильовий клас.
Може бути прив’язаний до будь якого тегу. Селектором є ім’я стильового класу, що однозначно його ідентифікує. Ім’я повинно відповідати загальним правилам імен ідентифікаторів. Воно обов’язково містить спереду крапку.
.myStyle1 { color: blue}
.myStyle2 { font-align: center;
font-weight: bold }
Для прив’язки такого стилю до елемента використовують атрибут тега class із значенням селектора без крапки в лапках:
<P class="myStyle2">
<H1 class="myStyle1">
Якщо для атрибуту class вказати декілька імен стильових класів, то їх дія буде накладатися:
<P class="myStyle1 myStyle2 ">
Іменований стиль. Схожий на стильовий клас. Селектором є унікальне ім’я, що однозначно його ідентифікує. Прив’язка до тега – явна.
Відмінності іменованого стилю від стильового класу:
- У визначенні перед іменем ставлять знак решітки #.
- Прив’язку реалізують через атрибут ID, його значенням є ім’я потрібного іменованого стилю без #.
- Значення атрибута тега ID повинно бути унікальним в межах сторінки. Тому іменований стиль використовують, якщо є потреба прив’язати стиль до одного-єдиного елемента сторінки.
#myStyle1 { color: blue}
…
<P ID="myStyle"> ці букви будуть синіми </P>
Комбіновані стилі. Це стилі з довільною кількістю селекторів. Служать для прив’язки до тегів, що задовольняють декілька умов.
Правила написання:
- Селекторами можуть бути імена тегів, імена стильових класів та імена іменованих стилів.
- Селектори перераховують зліва направо і визначають рівень вкладеності відповідних тегів, теги, записані правіше, повинні бути вкладені в теги, записані лівіше.
- Якщо ім’я тега скомбіновано з іменем з іменем стильового класу чи іменованого стилю, значить для даного тега повинно бути вказане це ім’я стильового класу чи іменованого стилю.
- Селектори розділяють пробілами.
- Стиль прив’язують до тега, визначеного селектором, записаним найправіше.
Наприклад,
P EM { color: #0000FF}
….
<P> <EM> Тут - сині букви <EM> а ці вже ні </P>
<P> Ці теж ні… </P>
P.mini { color: red
font-size: smaller }
…
<P class="mini"> маленькі червоні букви </P>
<P> This text is’nt red</P>
Всі ці чотири стилі можуть бути присутні тільки в таблицях стилів. Якщо їх записати в код сторінки, браузер їх проігнорує.
Вбудовані стилі. Вони не мають селектора, бо ставляться зразу в потрібний тег. Крім того, в них немає фігурних дужок, оскільки немає потреби відділяти список атрибутів стилю від селектора. Вбудований стиль прив’язаний лише до одного тега – того, де він прописаний.
Визначення вбудованого стилю вказують як значення атрибуту STYLE.
<P STYLE="font-size: bigger; font-style: italic; font-family: Arial ‘Times New Roman’ " > Тут абзац великими курсивними літерами, записаний або шрифтом Arial або Times New Roman </P>
Вбудовані стилі зараз застосовують дуже рідко.
В залежності від місця розміщення таблиці стилів діляться на два види:
Зовнішні таблиці стилів – містяться окремо від коду сторінки у файлах з розширенням .css. Вони містять css- код конкретних стилів.
Прив’язка до сторінки зовнішньої таблиці стилів до сторінки здійснюється одинарним мета тегом <LINK>:
<HEAD>
…
<LINK REL="stylesheet" HREF="<адреса>" TYPE="text/css">
…
</HEAD>
Внутрішня таблиця стилів записується безпосередньо в коді сторінки в парному тезі <STYLE>, що прописується в заголовковій частині.
<HEAD>
…
<STYLE>
EM { color: green;
font-weight: bold }
BODY { background: red;
color: #FFFFFF }
#myStyle1 { color: blue}
.myStyle2 { font-align: center;
font-weight: bold }
</STYLE>
…
</HEAD>
Для багатьох сторінок одного сайту логічно припустити існування одного стильового оформлення, тому зазвичай використовують зовнішні таблиці стилів.