Лекція 5. Наслідування та каскадування. Оформлення тексту за допомогою CSS
1. Наслідування та каскадування
Ієрархічне дерево
HTML-документ являє собою ієрархічне дерево. Це означає, що у кожного елемента (крім кореневого) є тільки один батько, тобто елемент, усередині якого він розташовується. У кореневого розділу батько відсутній. Розглянемо найпростішу сторінку:
<html>
<head> </ head>
<body>
<p> Текст документа </ p>
<p class = "text"> Виділена <span> рядок </ span> </ p>
</ body>
</ html>
Для цієї сторінки можна намалювати таке ієрархічне дерево:
Воно схематично відображає структуру вкладеності елементів. В даному прикладі видно, що в елемента span батьком є p.text, а у p.text батько - Body.
Ієрархічна структура документа визначає основи концепції наслідування.
Наслідування
Наслідування в CSS - механізм, за допомогою якого значення властивостей елемента-батька передаються його елементам-нащадкам. Стилі, присвоєні деякого елементу, успадковуються всіма нащадками (вкладеними елементами), якщо вони не перевизначені (перекриті) явно. Наприклад, розмір шрифту і його колір досить часто застосувати до body, щоб всі елементи всередині мали ті ж властивості. Наслідування дозволяє скоротити розмір таблиці стилів, але якщо стилів багато, то відстежити який батьківський елемент встановив певну властивість стає складніше.
Давайте на простих прикладах докладніше розберемося, в чому ж перевага наслідування. Розглянемо приклад:
<p class = "text"> Рядок з виділеним <span> словом </ span> </ p>
Уявімо, що нам потрібно встановити червоний колір шрифту для всього тексту. Задаємо CSS-властивості наступним чином:
.text {
color: red;
}
Завдяки наслідуванню колір шрифту в тезі span автоматично стане червоним:
Рядок з виділеним словом
А так би виглядав результат, якби наслідування не працювало:
Рядок з виділеним словом
Нам, довелося б, окремо прописувати колір шрифту для тега span. І тоді, установка таких простих властивостей, як стиль шрифту, стала б великою проблемою: потрібно було б задавати властивості для всіх можливих вкладених тегів.
Напевно ви звертали увагу, що не всі властивості успадковуються тегами-нащадками від їхніх батьків. Дійсно, було б дивно, якби властивість border автоматично встановлювалася для всіх вкладених елементів. Наприклад, для цього фрагмента коду:
<p class = "bordered"> Cтрічка з виділеним <span> словом </ span> </ p>
Встановимо CSS- властивість:
.bordered {
border: 1px solid green;
}
Якби наслідувалися усі властивості, то результат би виглядав так:
Рядок c виділеним словом
Насправді рамка буде намальована тільки у тега <p>.
Про те, які саме властивості успадковуються буде розказано нижче.
Наслідування властивості
До спадкоємною властивостей відносяться в першу чергу властивості, що визначають параметри відображення тексту:
font-size, font-family, font-style, font-weight, color, text-align, text-transform, text-indent, line-height, letter-spacing, word-spacing, white-space, direction і т. д.
Також до спадкоємною властивостей відносяться list-style, cursor, visibility, border-collapse і деякі інші. Але вони використовуються значно рідше. Весь список успадкованих властивостей дивіться в стандарті CSS. Значення yes в колонці Inherited?.
Ці властивості можна і потрібно задавати через предків, слідуючи семантиці документа. Наприклад, параметри тексту часто не змінюються в межах окремих блоків сторінки: меню, основного змісту, інформаційних панелей. Тому загальні параметри тексту (колір, розмір, гарнітура) зазвичай вказують в стилях самих блоків.
Ненаслідувані властивості
Вище ми перерахували основні наслідувані властивості. Всі інші відносяться до ненаслідуваних. Це параметри позиціонування, розмірів, відступів, фону, рамок і т. д. А саме: background, border, padding, margin, width, height, position і ін. Весь список ненаслідуваних властивостей дивіться в стандарті CSS. Значення no в колонці Inherited?. Ці властивості не унаслідуються з міркувань здорового глузду. Наприклад: якщо для будь-якого блоку встановлений внутрішній відступ, автоматично виставляти такий же відступ кожному вкладеному елементу немає ніякої потреби. Ці параметри найчастіше унікальні для кожного окремого блоку.
Примусове наслідування
Для кожної властивості може бути задано значення inherit. Воно означає, що дана властивість приймає таке ж значення, що і у батьківського елементу. Значення inherit може бути використано для посилення наслідуваних значень, а також у властивостях, які зазвичай не унаслідуються. Запис виглядає наступним чином:
p {
background: inherit;
}
В даному випадку у тегів <p> властивість background буде така ж, як і в їхніх батьківських тегів.
Каскадність
CSS розшифровується як «Cascading Style Sheets» або «каскадні таблиці стилів». Каскадність означає, що до одного і того ж елементу може застосовуватися кілька CSS-правил (наборів CSS-властивостей). Серед цих властивостей можуть бути і конфліктуючі між собою. Тому існують інструкції, які визначають, яким буде фінальний набір властивостей елемента. Наприклад, для елемента:
<p class = "text" style = "color: red;"> </ p>
CSS-правила існують як мінімум в трьох різних місцях:
1. в файлі, що підключається style.css для селекторів p або .text;
2. в атрибуті style;
3. в стандартних стилях відображення, вбудованих в браузер.
Каскадність якраз і визначає, які саме властивості з цих джерел застосуються до даного абзацу. Є три основні концепції, керуючі порядком, в якому застосовуються CSS-властивості:
1. важливість;
2. специфічність;
3. порядок вихідного коду.
Найважливішими для нас є останні дві і докладніше про них ми поговоримо окремо.
Перед тим як розбирати складні правила роботи каскадування, розрахунку специфічності та визначення пріоритетів, розберемо приклад. Ось HTML-код, в якому є абзац з двома класами:
<p class = "red blue"> Синій або червоний? </ p>
А ось CSS-код c двома правилами для цих класів:
.blue {
color: blue;
}
.red {
color: red;
}
Запитання: якого кольору буде текст абзацу? Яке з CSS-правил пріорітетніше?
Відповідь: червоного кольору, друге правило пріорітетніше.
Це відбувається тому, що селектори у правил однакового типу, і відповідно мають однакову специфічність. В такому випадку більш високим пріоритетом володіє те правило, що розташоване в CSS-коді нижче в нашому випадку це правило для класу red.
Трохи складніший приклад. Той же HTML:
<p class = "red blue"> Синій або червоний? </ p>
Трохи інший CSS:
p.blue {
color: blue;
}
.red {
color: red;
}
У цьому випадку текст абзацу буде синім. Відбувається це тому, що селектор p.blue більш специфічний, ніж селектор .red. Просте пояснення специфічності звучить так: чим менша кількість елементів потенційно може вибрати селектор, тим він специфічніше. У нашому прикладі селектор .red вибере всі теги з потрібним класом, а селектор p.blue вибере тільки абзаци з потрібним класом.
Як ви вже знаєте, існують селектори не тільки по класах, а й по id. Вони починаються з решітки #.
HTML:
<div id = "experiment-1" class = "experiment">
<p class = "red blue"> Синій або червоний? </ p>
</ div>
CSS:
# experiment-1 .blue {
color: blue;
}
.experiment .red {
color: red;
}
Особливість атрибуту id полягає в тому, що його значення повинно бути унікальним в межах сторінки. Тобто, може існувати тільки один тег з певним значенням id. Виходить, що селектор по id може вибрати тільки один елемент. І тому він на порядок специфічніше селектора по тегам, класам, а також комбінацій цих селекторів.
Наступними за пріоритетом після селектора id ідуть CSS-правила, які прописані в атрибуті style. Вони володіють найвищим пріоритетом. Такий спосіб завдання стилів не вітається у професійній верстці сайтів і годиться тільки для створення швидких прототипів.
Однак існує спосіб перевизначити в підключених CSS-файлах навіть стилі, задані в атрибуті style. Для цього потрібно використовувати ключове слово !Important. Воно задає CSS-властивості посилений пріоритет. Ось приклад:
HTML:
<p style = "color: red;" class = "blue"> Синій або червоний? </ p>
CSS:
.blue {
color: blue! important;
}
Колір тексту в цьому прикладі буде синім. При верстці не рекомендується часто використовувати !Important, по можливості намагайтеся обходитись без нього.
Як ви вже здогадалися, найголовнішим механізмом для визначення пріоритетів стилів є специфічність. Тому давайте ще трохи потренуємося працювати з нею.
Розглянемо приклад: на підлозі в коробці сидить кіт
<div id = "floor">
<span class = "cat-in-box">
Кексик
</span>
</div>
Припустимо в стилях існують такі визначення:
span {
background-color: # 27ae60; / * Зелений * /
}
div span {
background-color: # 2980b9; / * Синій * /
}
#floor .cat-in-box {
background-color: # 34495e; / * Мокрий асфальт * /
}
.cat-in-box {
background-color: # 8e44ad; / * Фіолетовий * /
}
#floor span {
background-color: # c0392b; / * Червоний * /
}
div .cat-in-box {
background-color: # e67e22; / * Помаранчевий * /
}
А тепер питання на засипку: якого кольору буде коробка? Відповідь: мокрого асфальту так, як у нього найбільш специфічний селектор – клас вкладений в id. Нижче наведені повні правила визначення специфічності.
Специфічність селектора розбивається на 4 групи - a, b, c, d:
· якщо стиль вбудований, тобто визначений як style = "...", то а = 1, інакше a = 0;
· значення b дорівнює кількості ідентифікаторів (тих, які починаються з #) в селекторі;
· значення c дорівнює кількості класів, псевдокласів і селекторів атрибутів;
· значення d дорівнює кількості селекторів типів елементів і псевдо-елементів.
Після цього отримане значення приводиться до числа (зазвичай в десятковій системі числення). Селектор, що володіє великим значенням специфічності, володіє і великим пріоритетом.
Порахуємо специфічність у нашому прикладі:
|
Селектор |
a, b, c, d |
Число |
|
span |
0,0,0,1 |
1 |
|
div .cat-in-box |
0,0,1,1 |
11 |
|
#floor .cat-in-box |
0,1,1,0 |
110 |
|
div span |
0,0,0,2 |
2 |
|
.cat-in-box |
0,0,1,0 |
10 |
|
#floor span |
0,1,0,1 |
101 |
Тут відразу видно, що в нашому прикладі самим пріоритетним є селектор #floor .cat-in-box.
Якщо два CSS-правила застосовуються до одного і того ж елементу і мають однакову специфічність, то більш пріоритетним буде те правило, яке з'явиться в коді пізніше (нижче) іншого.
При створенні стилів для подібних за зовнішнім виглядом або функціональністю елементів, які можуть використовуватися на сторінці неодноразово, дуже зручно користуватися перехресним спадкуванням.
Прийом цей полягає в наступному:
1. створюється базовий стиль для таких елементів;
2. визначаються допоміжні стилі, які застосовуються до елементів у міру потреби;
3. елемент успадковує базовий стиль і один або декілька допоміжних.
Наприклад, на сторінці використовуються кнопки різного призначення: для відправки форм, для скидання інформації в полях форми, як елементи навігації тощо. Можна винести загальне оформлення (розміри, відступи і т.д.) для всіх кнопок в окреме CSS-правило для класу, наприклад .button. А потім створити додаткові CSS-правила, в яких будуть визначені тільки ті властивості цих кнопок, що відрізняються за значенням, наприклад колір фону. Для цих правил можна використовувати такі назви класів: .button-send, .button-clear, .button-navigation. Кожна кнопка в HTML-коді матиме два класи: загальний і додатковий.
<a class="button button-send"> Відправити </a>
2. Оформлення тексту за допомогою CSS
Стрічковий тег - span
При оформленні тексту за допомогою css найчастіше використовують тег <span>. Він позначає «просто певну частину тексту». Тобто власного значення він не має. Також цей тег ніяк не змінює відображення тексту. Однак, додатковий сенс даного тегу додають за допомогою класів. Наприклад:
<span class = "error"> </ span>
<span class = "ok"> </ span>
А вже для класу за допомогою css задають стилі і тим самим змінюють оформлення.
Властивість font-size: задаємо розмір шрифту
Властивість font-size задає розмір шрифту. Розмір шрифту найкраще здавати у відносних одиницях виміру – em. 1em звичайно дорівнює довжині літери M в даному шрифті.
Інші одиниці виміру для завдання розмірів шрифту:
· пікселі: 20px
· пункти: 15pt
· відсотки: 80%
Пікселі і пункти - це абсолютні одиниці виміру, а відсотки - відносні. Також розмір шрифту можна задавати за допомогою ключових слів: small, large і т.д. Але їх зазвичай не використовують.
Властивість font-weight: товщина накреслення
Напівжирний текст можна задавати за допомогою властивості font-weight, що має два основних значення:
1. normal - звичайне написання;
2. bold - напівжирне накреслення.
Насправді ця властивість має багато значень: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900. Ці значення задають ступінь товщини шрифту, від самого тонкого, до самого товстого. Але більшість браузерів все одно вміють відображати тільки два варіанти товщини: звичайний і напівжирний. Тому інші значення властивості зазвичай не використовують.
Властивість font-style: курсив
Накреслення тексту можна задавати за допомогою властивості font-style. Її основні значення:
1. normal - звичайне написання;
2. italic - курсивне зображення.
Ця властивість має й інші значення, але їх майже не використовують.
Властивість font-family: шрифт
Задати сімейство шрифту можна за допомогою властивості font-family. Можна задавати конкретну назву шрифту: "Times New Roman". А можна задавати бажаний тип шрифту, наприклад:
· serif - шрифт із зарубками;
· sans-serif - шрифт без зарубок.
Є й інші типи, але вони використовуються рідше.
Зазвичай, як значення властивості задають список шрифтів, перераховуючи їх через кому. На початку списку розташовують найрідкісніший шрифт, потім схожий, але поширений, а в самому кінці списку - бажаний тип шрифту. Приклад:
body {
font-family: "PT Sans", "Arial", serif;
}
Браузер проходить за списком зліва направо і використовує перший знайдений в системі шрифт.
Властивість color: колір тексту
Колір тексту задається за допомогою властивості color. Значення кольору можна задавати різними способами:
· шістнадцятковим кодом, наприклад #FF9900.
· Ключовим словом: red.
· У RGB-форматі: rgb(255, 255, 0).
Найчастіше колір задають в шістнадцятковому форматі.
Властивість text-decoration: підкреслення та інші ефекти
Додаткове оформлення тексту можна задати за допомогою властивості text-decoration. Її значення:
1. underline - підкреслення;
2. line-through - закреслення;
3. overline – лінія над текстом;
4. none - прибирає вище перелічені ефекти.
До тексту можна одночасно застосувати кілька ефектів, якщо перерахувати значення через пропуск.
Декоративне підкреслення
Ви, напевно, вже багато разів бачили красиве пунктирне підкреслення. Його використовують для оформлення посилань та інших динамічних елементів. Технологія наступна:
1. Прибираємо звичайне підкреслення за допомогою text-decoration.
2. Задаємо потрібний колір тексту за допомогою color.
3. Додаємо декоративне підкреслення за допомогою властивості border-bottom.
Також можна при наведенні курсору приховувати таке підкреслення за допомогою псевдокласу: hover.
Задаємо регістр символів за допомогою text-transform
За допомогою css можна керувати навіть регістром символів: робити букви малими або великими. Робиться це за допомогою властивості text-transform. Її значення:
1. lowercase - усі малі;
2. uppercase - всі прописні;
3. capitalize - кожне слово починається із прописної;
4. none - Скасовує зміна регістру.
5.
Управляємо пробілами: white-space
Як Ви вже знаєте, браузер ігнорує множинні пробіли та переноси рядків в HTML-коді. Змінити цю поведінку можна за допомогою тега <pre>. Однак, за допомогою CSS управляти пробілами і переносами можна більш гнучко. За це відповідає властивість white-space, значення якого:
· nowrap - відображає весь текст одним рядком без переносів;
· pre - зберігає пробіли та переноси стрічки як у вихідному коді аналогічно тегу <pre>;
· pre-wrap - працює як значення pre, але додає автоматичні переноси, якщо текст не поміщається в контейнер;
· normal - режим за замовчуванням.
Горизонтальне вирівнювання тексту: text-align
Вирівнювання тексту по горизонталі задається за допомогою властивості text-align. Його Ви вже використовували в курсі про таблиці. Значення властивості:
1. left - вирівнювання по лівому краю;
2. right - по правому краю;
3. center - по центру;
4. justify - по ширині.
Вертикальне вирівнювання: vertical-align
Вирівнюванням тексту по вертикалі можна керувати за допомогою властивості vertical-align. Її дія добре помітна в елементах таблиці, в середині текстового рядка «робота» цієї властивості помітна, якщо в ній є фрагменти різного розміру.
У даної властивості багато значень, але найбільш часто використовувані:
1. top - вирівнювання по верхньому краю рядка;
2. middle - по середині;
3. bottom - по нижньому краю;
4. baseline - за базовою лінії (значення за замовчуванням).
Верхні і нижні індекси на CSS
За допомогою CSS можна імітувати теги <sub> і <sup>, які застосовуються для створення нижніх і верхніх індексів. Робиться це так:
1. використовуємо властивість vertical-align із значенням sub або super.
2. трохи зменшуємо розмір шрифту за допомогою font-size.
Властивість line-height: управляємо висотою рядка
Висотою рядка або, правильніше, міжрядковим інтервалом можна керувати за допомогою властивості line-height. Значення цієї властивості можна задавати наступними способами:
1. множником, наприклад 1.5, 2.
2. у відсотках: 150%.
3. за допомогою будь-яких інших одиниць виміру CSS: 12px, 2em.
4. ключовим словом normal, яке задає автоматичний розрахунок висоти рядка.
Переважно міжрядковий інтервал задається або множником, або у відносних одиницях виміру.
Вертикальний ритм тексту
У веб-дизайні існує поняття «вертикальний ритм тексту». Воно досить складне і ми не будемо глибоко в нього вдаватися. Відзначимо лише, що хороший вертикальний ритм покращує сприйняття тексту.
Щоб зберегти вертикальний ритм і хорошу читабельність тексту при будь-якому розмірі шрифту, потрібно задавати розміри шрифту, міжрядковий інтервал і вертикальні відступи між заголовками і абзацами у відносних одиницях.
Тоді, як би користувач ні змінював розмір шрифту, ваш текст залишиться читабельним і зручним для сприйняття.