Table of Content
CSS – каскадні таблиці стилів використовуються для оформлення HTML документів. При цьому параметри оформлення задаються у виді так званих таблиць стилів, елементами яких є стильові правила. Існує 3 способи включення стилевих правил до документів:
- Зв’язані таблиці стилів. Визначаються в окремому файлі, що зазвичай має розширення *.css. Зв’язок цього файлу з документом здійснюється за допомогою елемента <link>, що є різновидом заголовочного елементу. Для цього елемента задаються наступні атрибути:
- rel = “stylesheet”
- type = “text/css”
- href із значенням у вигляді URL зв’язуваного файлу.
- Глобальні таблиці стилів. Вони визначаються як вміст заголовочного HTML елемента style.
- Внутрішні (inline) стилі. Визначаються як значення атрибута style того HTML елемента до якого будуть застосовуватись стильове правило.
Слід зазначити, що можлива ситуація коли на різниз рівнях для одного і того ж елемента стилеві правила. В цьому разі слід враховувати, що пріоритет збільшується в напрямку від зв’язаниз до внутрішніх.
Формат стильових правил.
Стильове правило має наступний формат.
селектор { стильові_властивості }
Селектор – визначає набір елементів документа до яких будуть застосовані стильові властивості.
Стильові властивості – являють собою набір пар “ім’я: значення” розділених крапкою з комою.
Селектори
Існують декілька видів селекторів:
- Селектор тега (селектор елемента). Цей вид селектора визначає набір елементів за його іменем.
- Наприклад селектор
"р"
визначає набір елементів типу “абзац”.
- Наприклад селектор
- Селектор класу. Задається у формі “.ім’я класу”, може комбінуватись з селектором тега, що ставиться перед точкою, а може використовуватись самостійно. Цей селектор визначає набір елементів, що мають задане ім’я класу серед значення атрибуту класу.
- Приклад: “.block” визначає набір елементів, що відносяться до класу “block”, тобто мають значення “block” в атрибуті “class”.
- Селектор ідентифікатора. Задається у формі “#ідентифікатор”. Визначає один єдиний елемент з заданим ідентифікатором.
- Приклад “#b1”
- Контекстуальний селектор. Має наступний вигляд “селектор1 селектор2”. Визначає набір елементів, що описуються “селектором2” але таких, що входять до складу елементів які описуються “селектором1”.
- Приклад “#b1 div”. Визначає набір елементів div, що містяться в середині ідентифікатора “b1”. Для контекстуального селектора рівень вкладеності довільним.
- Cусідній селектор. Має наступний формат “селектор1 + селектор2”. Визначає набір елементів, що описуються селектором2, які слідують безпосередньо за селектором1 знаходячись на одному рівні ієрархії.
- Приклад: .block1 + block2.
- Дочірній селектор. Має наступний формат: “селектор1 > селектор2”. Визначає набір елементів, що описуються селектором2, які містяться безпосередньо в елементах, що описуються селектором1, тобто є їх прямими потомками.
- Приклад: “#b1 > div”.
- Селектор атрибуту. Має декілька підвидів:
- Простий селектор атрибуту. Має наступний формат [атрибут], визначає набір елементів, що мають заданий атрибут.
- Приклад [selected] визначає набір елементів, що мають атрибут “selected”.
- Атрибут із значенням. Має наступний формат: [атрибут = “значення”], визначають набір елементів, що мають задане значення атрибута.
- Приклад input[type=”text”], всі текстові елементи input, тобто поля вводу.
- Атрибут, що починається з заданого тексту. Визначає всі елементи у яких значення заданого атрибуту із заданого тексту. Має наступний формат [атрибут^=”текст”]
- Приклад:
[class^="block"]
, визначає всі елементи у яких class буде починатись із тексту “block” (block1, block2, block3).
- Приклад:
- Атрибут, що закінчуються заданим текстом.
- Приклад: [class$=”red”]. Визначає набір елементів у яких текст закінчується на “red” (class-red, block-red).
- Атрибут, що включає заданий текст. Визначає набір елементів для яких вказаний атрибут містить заданий текст в будь-якій позиції. Формат: [атрибут*=”текст”]
- Приклад: [class*=”_”], визначає набір елементів у яких атрибут class містить “_”.
- Одне із значень набору. Визначає набір елементів для яких одним із значень заданого атрибута є вказаний текст. Формат [атрибут~”текст”]
- Приклад: [class~”red”], визначає набір елементів, які серед класів визначених для них мають клас “red”.
- Атрибут, що містить префікс з дефісом. Визначає набір елементів для яких значення заданого атрибута починається з вказаного текста за яким слідує дефіс. Формат: [атрибут!=”текст”].
- Приклад [class!=”block”], визначає набір елементів у яких атрибут “class” починаєть з тексту “block-“.
- Простий селектор атрибуту. Має наступний формат [атрибут], визначає набір елементів, що мають заданий атрибут.
- Універсальний селектор. Позначається “*”, визначає набір всіх елементів.
- Псевдокласи визначають:
- Динамічний стан елементів, що змінюються внаслідок дій користувача.
- Положення елемента в дереві документа.
Має наступний формат “:псевдокласи”
Псевдокласи, що відповідають динамічній змінній елемента.
- :active – цей псевдоклас ставиться елементу, який є активний.
- :focus – цей псевдоклас співставляється елементу, який отримує focus.
- :link – цей псевдоклас співставляються гіперпосилання які ще не були відвідувані.
- :visited – співставляється елементам, що задають відвідані гіперпосилання.
- :hover – співставляється елементу на який наведений курсор миші.
Псевдокласи, що відображають положення в дереві документа, в якості прикладів наведемо такі:
- first-child – елемент є першим дочірнім елементом.
- nth-child(even), nth-child(odd), nth-child(an+b). Наприклад: nth-child(2n) дозволяє відібрати парні елементи.
- even – з парними номерами
- odd – з непарними номерами
- an+b дозволяє відібрати певний набір дочірніх елементів в ньому “а” та “b” цілі числа, а “n” пробігає послідовні значення починаючи від 0.
Псевдоелементи
Псевдоелементи задаються у форматі:
селектор: псевдоелементи
Вони дозволяють:
- Визначати стиль елементів, які не існують у DOM.
- Додавати до документа новий контент.
Приклади псевдоелементів:
- “:first-letter” – визначає перший символ тексту заданого елемента.
- “:first-line” – визначає псевдоелемент, що відповідає першому рядку тексту блокового елемента.
- “:after” – додає заданий контент після вмісту даного елемента. Сам контент визначається стильовою властивістю :content
- li .important:after {content: “!”;}, застосування цього правила призведе до додавання “!” в кінці тексту кожного елемента li з класом “important”
- “before” – діє аналогічно “:after” тільки з різницею, що новий контент додається перед текстом даного елемента.
Стильові властивості
- Назви стильових властивостей
Назви стильових властивостей визначених у css формуються згідно певних правил. Відповідно до цих правил:
- У загальному випадку назва являє собою набір ключових слів, розділених дефісом.
- Стильові властивості об’єднуються у групи, при цьому перше слово назви ідентифікує групу, наступні слово уточнюють конкретну властивість.
- Для певних властивостей існує деяка узагальнююча властивість, значення якої складається з декількох компонентів при цьому кожна окрема компонента значення відповідає певній конкретній властивості.
Приклад:
Існує група властивостей “border”, що задає параметри рамки. До цієї групи входять такі окремі властивості:
- border-style – тип лінії
- border-width – товщина
- border-color – колір лінії
Можна задати окремо значення кожної властивості, натомість можна використати узагальнюючу властивість “border” із значенням виду:
border: solid 1px green, значення складається з окремих компонент відділених проміжками. Важливість порядку слідування компонентів залежить від узагальненої властивості.
- Призначення властивостей
Значення властивостей може бути різних типів:
- Числовий – числові значення можуть задаватись як у вигляді цілих чисел так і чисел з дробовою частиною.
- Текстові – текстові значення задаються у вигляді послідовності символів у подвійних або одинарних лапках. У випадку коли серед символів трапляються лапки використовують або чередування видів лапок ” -> ‘ або екрануванням.
- % – в цьому разі значення задається як число після якого ставиться знак %. Цей тип застосовуються коли значення прив’язується до батьківського елемента, тобто задається відносно нього.
- Розміри:
- Відносні – при задані відносниз розмірів використовують наступні одиниці:
- em – ця одиниця прив’язується до розміру поточного шрифта. В свою чергу розмір поточного шрифта визначається або властивістю “font-size” або значення за замовчування для браузера.
- ex – схожа з “em” з тією різницею, що здійснюється прив’язка до літер x.
- px – один піксель.
- Абсолютні одиниці
- in – один дюйм
- cm – сантиметр
- mm – мм
- pt – пункт (1/72 дюйму)
- pc – 12 pt (1/6 дюйма)
- Відносні – при задані відносниз розмірів використовують наступні одиниці:
- Колір:
- #rrggbb – rr – дві шестинадцятирічні символи які задають інтенсивність червого, gg – зеленого, bb – синій
- rgb(r,g,b) – r, g, b – цілі числа в діапазоні від 0 до 255, що задають інтенсивність. Можна використовувати %.
- ключове слово, наприклад: red, white etc…
- Адреса: задається у форматі url (“адреса”).
- Ключові слова, в цьому випадку значення не беруться в лапки інакше вони будуть сприйматись як текст.
Групування селекторів
Досить часто трапляються ситуації коли для різних наборів елементів застосовуються однакові стильові властивості. В цьому разі для оптимізації коду використовується групування селекторів. Групування здійснюється шляхом перерахування цих селекторів через кому. Приклад:
селектор1 {
властивість1:
властивість2:
властивість3:
}
селектор2 {
властивість1:
властивість2:
властивість4:
}
Шляхом групування код переписується таким чином:
селектор1, селектор2 {
властивість1:
властивість2:
}
селектор1 {
властивість3:
}
селектор2 {
властивість4:
}
Наслідування селекторів
Наслідування означає застосування властивостей батьківсього елемента до дочірніх елементів. Не всі стильові властивості наслідуються. Отримати інформацію проте які стильові властивості наслідуються можна з довідників css.
Каскадування
Під каскадування розуміють одночасне застосування до одних і тих же елементів різних стильових властивостей, що стосуються одних і тих же параметрів оформлення.
При розгляді каскадування мова йде про ситуації коли для певного набору елементів одночасно співіснують різні значення однієї і тієї ж властивості. Такі ситуації можуть наприклад виникати коли:
- Елементи одночасно підпадають під дію декількох різних селекторів.
- З документом зв’язано декілька зовнішніх таблиць стилів.
В описаних ситуаціях важливим є питання пріоритетів стильових правил.
При визначенні пріоритетів враховується наступне:
- При включенні деяких зв’язаних стилів вищий пріоритет має той, що включений останній.
- Враховується так звана специфічність селектора – це ціле число, що обчислюється за наступним алгоритмом:
- Кожний селектор ідентифікатора нараховується 100.
- За кожний селектор класу та псевдокласу нараховується 10.
- За кожен селектор тега нараховується 1.
- Пріоритет стильового правила можна підвищити за допомогою ключово слова “important!”. Приклад: селектор {властивість !important }