CSS (Cascading Style Sheets)

Table of Content
CSS – каскадні таблиці стилів використовуються для оформлення HTML документів. При цьому параметри оформлення задаються у виді так званих таблиць стилів, елементами яких є стильові правила. Існує 3 способи включення стилевих правил до документів:
  1. Зв’язані таблиці стилів. Визначаються в окремому файлі, що зазвичай має розширення *.css. Зв’язок цього файлу з документом здійснюється за допомогою елемента <link>, що є різновидом заголовочного елементу. Для цього елемента задаються наступні атрибути:
    1. rel = “stylesheet”
    2. type = “text/css”
    3. href із значенням у вигляді URL зв’язуваного файлу.
  2. Глобальні таблиці стилів. Вони визначаються як вміст заголовочного HTML елемента style.
  3. Внутрішні (inline) стилі. Визначаються як значення атрибута style того HTML елемента до якого будуть застосовуватись стильове правило.

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

селектор { стильові_властивості }

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


селектор1 {
властивість1:
властивість2:
властивість3:
}


селектор2 {
властивість1:
властивість2:
властивість4:
}

Шляхом групування код переписується таким чином:


селектор1, селектор2 {
властивість1:
властивість2:
}
селектор1 {
властивість3:
}
селектор2 {
властивість4:
}

Наслідування селекторів
Наслідування означає застосування властивостей батьківсього елемента до дочірніх елементів. Не всі стильові властивості наслідуються. Отримати інформацію проте які стильові властивості наслідуються можна з довідників css.
Каскадування
Під каскадування розуміють одночасне застосування до одних і тих же елементів різних стильових властивостей, що стосуються одних і тих же параметрів оформлення.
При розгляді каскадування мова йде про ситуації коли для певного набору елементів одночасно співіснують різні значення однієї і тієї ж властивості. Такі ситуації можуть наприклад виникати коли:
  1. Елементи одночасно підпадають під дію декількох різних селекторів.
  2. З документом зв’язано декілька зовнішніх таблиць стилів.
В описаних ситуаціях важливим є питання пріоритетів стильових правил.
При визначенні пріоритетів враховується наступне:
  1. При включенні деяких зв’язаних стилів вищий пріоритет має той, що включений останній.
  2. Враховується так звана специфічність селектора – це ціле число, що обчислюється за наступним алгоритмом:
    1. Кожний селектор ідентифікатора нараховується 100.
    2. За кожний селектор класу та псевдокласу нараховується 10.
    3. За кожен селектор тега нараховується 1.
  3. Пріоритет стильового правила можна підвищити за допомогою ключово слова “important!”. Приклад: селектор {властивість !important }

Leave a Reply

Your email address will not be published. Required fields are marked *