ПрограммированиеПохожие презентации:
Механізм наслідування стилів. Каскадність
1.
Механізм наслідування стилів.Каскадність
1 Механізм наслідування стилів
2 Каскадність
2.
1 Механізм наслідування стилівДіти успадковують деякі риси своїх батьків: колір очей, зріст. Як ви переконалися в
попередньому розділі, модель сімейних відносин застосовна і до структури мови HTML. І
точно так само, як люди, теги можуть успадкувати CSS-властивості від своїх предків.
Наслідування - це прийом, за допомогою якого CSS-властивості, що відносяться до
одного тегу веб-сторінки, поширюються і на вкладені теги. Наприклад, <p> завжди
знаходиться
всередині
<body>.
Так,
атрибути,
що
застосовуються
до
<body>,
успадковуються <p>. Припустимо, ви створили CSS-стиль для <body>, який встановлює
атрибут color (наприклад, темно-червоний колір). Похідні теги, які є нащадками <body>,
тобто теги, розташовані всередині нього, успадковують атрибут. Це означає, що будь-який
текст, укладений в <h1>, <h2>, <p>, буде відображений тим же самим темно-червоним
кольором.
3.
1 Механізм наслідування стилівМеханізм наслідування - багаторівневий, тобто його ефект не тільки поширюється на
прямих нащадків (дочірні елементи), але і переноситься на всі вкладені елементи. Якщо,
наприклад, <em> і <strong> розташовані всередині <p>, то також успадкують атрибути
будь-якого стилю, застосовуваного до <body>.
Може, це здається трохи незрозумілим і заплутаним, але механізм успадкування
насправді економить дуже багато часу. Уявіть, що жоден атрибут неуспадковується
вкладеними тегами і у вас є абзац тексту, який містить, наприклад, тег <em>, що виділяє
фрагмент тексту, або <a>, який додає гіперпосилання. Якщо ви створили стиль, форматує
даний абзац шрифтом Arial розміром 24 пікселя фіолетового кольору, було б дивно, якби
всередині <em> відобразився колишній стиль. Вам довелося б створювати для
форматування ще один стиль.
4.
1 Механізм наслідування стилівСпрощення таблиць стилів через успадкування
Ви можете використовувати переваги механізму спадкування в своїх інтересах
для того, щоб спростити і прискорити написання таблиць стилів. Припустимо, ви
хочете відобразити весь текст веб-сторінки однаковим шрифтом. Замість того щоб
створювати стилі для кожного тега, просто створіть один для <body> (або створіть
клас і застосуєте його). Визначте потрібний шрифт, і всі теги веб-сторінки
успадкують його:
body {font-family: Arial, Helvetica, sans-serif; }
5.
1 Механізм наслідування стилівВи також можете використовувати спадкування для застосування стильових атрибутів
до цілого розділу веб-сторінки. Наприклад, ви можете застосовувати, як і більшість
дизайнерів, тег <div> для визначення таких фрагментів, як шапка, навігаційне меню,
нижня частина сторінки, або, якщо ви використовуєте елементи HTML5, можна задіяти
один з нових елементів поділу на розділи, наприклад <header>, <aside>, <footer> або
<article>.
Застосовуючи стиль до зовнішнього тегу, ви виділяєте специфічні CSS-властивості для
всіх вкладених тегів, що знаходяться всередині даного розділу веб-сторінки. Щоб весь
текст в навігаційному меню був відображений тим же самим кольором, можна створити
стиль і застосувати його до <div>, <header>, <article> або до інших елементів поділу на
розділи. Всі теги, укладені всередині, в тому числі <p>, <h1> і т. д., успадкують цей колір
шрифту.
6.
1 Механізм наслідування стилівНижче описані конкретні випадки, коли спадкування точно не застосовується.
• Як правило, властивості, які зачіпають розміщення елементів на сторінці (відступи
(поля), межі (рамки) елементів), що не успадковуються.
• Браузери використовують власні вбудовані стилі для форматування різних тегів.
Заголовки зазвичай відображаються великим напівжирним шрифтом, посилання - синім
кольором і т. д. Навіть якщо визначено конкретний розмір кегля для текстового вмісту
веб-сторінки і застосовано до <body>, заголовки будуть відображені великим за
розміром шрифтом. Теги <h1> будуть більшими <h2>. Точно так само, коли ви
встановлюєте колір стосовно до <body>, гіперпосилання веб-сторінки все одно будуть
показані синім кольором з підкресленням.
7.
1 Механізм наслідування стилівЯкщо виникає конфлікт, то перемагає більш явно визначений стиль. Іншими словами,
коли ви застосовуєте CSS-властивість до елементу веб-сторінки (наприклад, встановлюєте
розмір шрифту для маркованого списку) і воно конфліктує з наслідуваною (наприклад,
розміром шрифту <body>), то браузер використовує явно описану властивість, – ту, що більш
близько відноситься до стілізованого елемента (в даному випадку застосовується розмір
шрифту, визначений для <ul>).
8.
1 Механізм наслідування стилівПриклади.
1 Однорівневе наслідування
p{
color: #FF6600;
}
Зверніть увагу на те, як цей стиль <p> впливає інші теги. Вони вкладені в <p> і також
змінюють колір. Наприклад, текст, укладений в <em> і <strong> всередині кожного абзацу,
також змінюється на помаранчевий, при цьому зберігається виділення напівжирним
шрифтом. У кінцевому рахунку встановлюється колір тексту абзацу, який ви хотіли,
незалежно від будь-яких інших тегів.
9.
1 Механізм наслідування стилів2 Наслідування для стилізації веб-сторінки
Створити клас:
.pageStyle {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 18px;
color: #BD8100;
width: 900px;
margin: 0 auto;
}
10.
1 Механізм наслідування стилівЗастосувати до сторінки: <body class="pageStyle">
Колір до абзаца не застосувався.
У цьому прикладі для <p> утворився конфлікт стилів, зокрема двох однакових атрибутів
кольору, - тегів, створеного вище, і стильового класу <body>. Якщо сталася така ситуація, то
браузер повинен вибрати один із стилів. Використовується ближчий до елементу стиль тобто колір, який ви явно призначили <p>. Про правила каскадності буде розказано в
наступному питанні.
11.
1 Механізм наслідування стилів3 виключення механізма наслідування
Додамо до p три властивості:
p{
color: #FF6600;
margin-left: 50px;
padding-left: 20px;
border-left: solid 25px #BD8100;
}
Зверніть увагу на те, що відступ 50 пікселів від лівого краю вікна і жирну коричневу границю
мають всі абзаци, представлені <p>. Однак у тегів, вкладених в будь-який з <p> (наприклад, у <em>),
немає такого відступу або границі. Це поведінка браузера виправдана: веб-сторінка виглядала б
незрозуміло, якби кожен тег <em> і <strong> в абзаці мав додатковий лівий відступ розміром 50
пікселів!
12.
2 КаскадністьУ міру того як ви будете створювати все більш складні таблиці стилів, ви все частіше
будете задаватися питанням: чому конкретний елемент веб-сторінки виглядає саме так?
Через особливості наслідування CSS, описаних в попередньому розділі, на будь-який тег
впливають оточуючі його елементи.
Стиль стає складно комбінованим. Наприклад, тег <body> може передати властивості
форматування, що до нього застосовуються, абзацу тексту, а той - гіперпосиланням, що
знаходяться всередині. Іншими словами, може відбутися спадкування CSS-властивостей і
<body>, і <p> одночасно.
13.
2 КаскадністьКрім того, може виникати конфлікт: одна і та ж CSS-властивість багаторазово описується
в різних стилях, які потім ставиться до одного елементу веб-сторінки (наприклад, стиль <p>
у зовнішній таблиці стилів і у внутрішній).
Ви можете спостерігати таку ситуацію, коли текст відображається яскраво-синім
кольором, незважаючи на те, що встановлений червоний. Існує особлива система, яка
управляє взаємодією стилів і визначає їх пріоритет у разі конфлікту. Цей механізм
називається правилами каскадності або просто каскадністю.
14.
2 КаскадністьКаскадність - ряд правил, що визначають, які саме стильові властивості необхідні
елементам веб-сторінки, тобто задають послідовність застосування багаторазово певних
стилів. Іншими словами, каскадність визначає, яким чином браузер повинен обробити
складну структуру, що відноситься до одного і того ж тегу, і що робити, якщо виникає
конфлікт властивостей.
Це відбувається у двох випадках: через механізму успадкування (однакове властивість
успадковується від декількох батьківських елементів-предків) і коли один або більше стилів
застосовуються до одного елементу веб-сторінки (наприклад, ви застосували до абзацу стиль
за допомогою атрибуту class, а також створили стиль для тега <p>, і обидва стилі
застосовуються до цього абзацу).
15.
2 КаскадністьОб'єднання унаслідуваних стилів
Як ви дізналися з попередньої матеріалу, наслідування CSS гарантує, що однорідні
взаємозалежні елементи веб-сторінки (наприклад, всі слова в абзаці, навіть якщо вони є
вкладеними гіперпосиланнями або розташовані в іншому тезі) отримують стильові
властивості батьківських елементів. Це позбавляє від необхідності створення окремих стилів
для кожного тега веб-сторінки.
Оскільки тег може наслідувати властивості будь-якого предка (наприклад, посилання,
наслідує шрифт батьківського <p>), визначити, чому конкретний тег відформатований саме
так, може бути складним завданням. Припустимо таку ситуацію: до <body> застосований
певний шрифт, до <p> - розмір шрифту, а для <a> - колір. Таким чином, будь-який тег <a>
абзацу успадкує властивості <body> і <p>. Іншими словами, успадковані стилі будуть
об'єднані, сформувавши один складний.
16.
2 КаскадністьСторінка, представлена на рис., має три стилі: один для <body>, другий для <p> і третій
для <strong>. CSS-код виглядає наступним чином:
body { font-family: Verdana, Arial, Helvetica, sans-serif; }
p { color: #F30;}
strong { font-size: 24px; }
17.
2 КаскадністьТег <strong> вкладений в абзац, який, у свою чергу, є вкладеним в <body>. Стильові
властивості успадковує <strong> у всіх елементів-предків, отримуючи зображення шрифту
font-family від <body> і колір color від батьківського абзацу. Крім того, <strong> має власну
CSS-властивість, що встановлює розмір шрифту 24 пікселя. Кінцевий зовнішній вигляд тега
визначається поєднанням всіх трьох стилів. Іншими словами, <strong> виглядає так, ніби для
нього створили наступний стиль:
strong {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: color: #F30;
font-size: 24px;
}
18.
2 КаскадністьПеревага близького батьківського елемента-предка
Як видно з попереднього прикладу, комбінування стилів різних тегів з застосуванням
наслідування створює повний стильовий пакет. Але що станеться в разі конфлікту наслідуваних
властивостей CSS? Уявіть собі сторінку, де ви встановили червоний колір шрифту для тега body і
зелений колір шрифту для тега абзацу.
На рис. <strong> відформатований шрифтом визначеного накреслення, розміру і кольору,
незважаючи на те що для нього в стилі явно визначено тільки одна властивість. Два інших успадковані
від тегів-предків <body> і <p>.
Тепер припустимо, що усередині абзацу є тег <strong>. Тег <strong> успадковує стиль як тега
body, так і тега абзацу. Так який текст всередині тега <strong> - червоний або зелений? Це буде
зелений колір від стилю абзацу. Браузер застосує стиль, який є найближчим стосовно розглянутого
тегу.
19.
2 КаскадністьУ даному прикладі будь-які властивості, успадковані від <body>, є скоріше загальними. З
одного боку, вони відносяться до всіх тегам веб-сторінки за умови відсутності інших. Однак
стиль <p> ближчий до <strong> і, можна сказати, знаходиться по сусідству з ним. Стильові
властивості <p> застосовуються безпосередньо до вкладених тегів абзацу.
По суті, якщо тег не має власного, явно певного стилю, то при виникненні конфліктів з
успадкованими властивостями здобудуть перемогу найближчі теги-предки (рис. 2).
Наприклад тег <em> успадковує накреслення і колір від <body> і від <p>. Однак стилі
<body> і <p> мають різні типи шрифтів і колір, тег <em> в кінцевому випадку використовує
той шрифт і колір, які визначені найближчим тегом-предком - <p>. Коли стиль відноситься
безпосередньо до тегу, браузер застосовує його й ігнорує властивості конфліктуючих
успадкованих стилів.
20.
2 КаскадністьПереваги безпосередньо застосованого стилю
Єдиний стиль, що володіє найвищим пріоритетом, є найближчим предком в
«генеалогічному» дереві CSS. Це той стиль, який безпосередньо застосований до тегу.
Припустимо, що колір шрифту встановлюється для <body>, <p> і <strong>. Стиль абзацу
<p> є певним по відношенню до <body>, але <strong> - ще більш конкретний, ніж всі інші.
Він форматує тільки теги <strong>, скасовуючи будь конфліктуючі властивості,
успадковані від інших тегів. Іншими словами, властивості стилю, явно визначеного для тега,
скасовують будь-які успадковані.
21.
2 КаскадністьЦе правило пояснює, чому деякі властивості не застосовуються.
Гіперпосилання, що знаходиться усередині абзацу, текст якого відформатований
червоним шрифтом, як і раніше буде відображена в стилі браузера синьою з підкресленням.
Це відбувається тому, що є свій зумовлений стиль для тега гіперпосилання <a>.
Таким чином, успадкований колір тексту не буде застосований.
22.
2 КаскадністьБезліч стилів для одного тега
Наслідування - один із способів форматування декількома стилями. Однак можна
визначити багато стилів, які будуть застосовані безпосередньо.
Розглянемо такий випадок: у нас є прикріплена до веб-сторінці зовнішня таблиця стилів
з тегом <p>. У ній є внутрішня таблиця, яка також містить визначення <p>.
До одного з цих тегів застосований ще один стильовий клас. Так, для одного тега абзацу
<p> безпосередньо визначено три різні явних форматуючих стилі. Який з них повинен
використовувати браузер?
23.
2 КаскадністьВсе залежить від великої кількості чинників - типів стилів, порядку, в якому вони були
створені. Браузер сам вибирає: застосувати один або декілька одночасно. Розглянемо
ситуації, коли численні стилі можуть застосовуватися до одного і того ж тегу:
• до тегу одночасно застосований стиль з селектором і стильовий клас;
• однакова назва стилю зустрічається кілька разів в таблиці;
• до тегу одночасно застосовані стильовий клас і ID-стиль;
• з веб-сторінкою пов'язано кілька таблиць, і в кожній з них міститься однакова назва
стилю;
• єдиний тег веб-сторінки може бути об'єктом впливу складних селекторів.
Якщо до конкретного елементу веб-сторінки застосовано кілька стилів, то браузер
об'єднує їх властивості за умови, що вони не конфліктують між собою.
24.
2 КаскадністьОсобливості механізму каскадності: які стилі мають перевагу
Що вийде, якщо кожен з трьох стилів, наведених вище, має своє визначення накреслення
у властивості font-family? Який з них вибере браузер?
Механізм каскадності встановлює кілька правил. Мають перевагу властивості самого
близького по відношенню до стилізованого елемента, самого явно визначеного стилю.
Однак, як і в прикладі зі стилями, не зовсім зрозуміло, який з них є найбільш визначеним. На
щастя, CSS пропонує метод визначення пріоритетів. Він заснований на присвоєння значень в
умовних одиницях (пунктах) кожному типу стильових селекторів: тегів, класів, IDселекторам і т. д.
25.
2 КаскадністьСистема працює так:
Селектор тегів має значущість (специфічність) 1 пункт;
Селектор класів - 10 пунктів;
ID-селектор – 100;
Вбудований (inline) стиль – 1000.
26.
2 КаскадністьСелектор
Ідентификатор
Клас
Тег
Всього
p
0
0
1
1
.byline
0
1
0
10
p.byline
0
1
1
11
#banner
1
0
0
100
#banner p
1
0
1
101
#banner .byline
1
1
0
110
a:link
0
1
1
11
p:first-line
0
0
2
2
h2 strong
0
0
2
2
#wrapper #content .byline a:hover
2
2
1
221
27.
2 КаскадністьВирішення конфліктів: застосовується останній стиль. Два стилі можуть мати однаковий
пріоритет. Конфлікт значущостей може статися у разі подвійного визначення однакових селекторів. У
вас може бути селектор тега <p> у внутрішній таблиці і такий же у зовнішній. Або два різні стилі
можуть мати однаковий пріоритет. У такому випадку більш значущим буде стиль, визначений
останнім в таблиці.
Приклад.
Веб-сторінка:
<p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de
Pomme</a></p>
Таблиця стилів:
.byline a { color: red; }
p .email { color: blue; }
Якого кольору буде посилання? (синього)
28.
2 КаскадністьУправління каскадністю
Як ви могли помітити, чим більше CSS-стилів створено, тим вища ймовірність
заплутатися в них. Наприклад, можна створити стильовий клас, що встановлює для шрифту
певне накреслення і розмір, але застосування його до абзацу ні до чого не приведе. Ця
проблема зазвичай пов'язана з механізмом каскадності. Навіть коли ви абсолютно впевнені в
кінцевому результаті, все одно може існувати стиль з більшою значущістю.
Є кілька варіантів вирішення цієї проблеми:
• !Important;
• зміна значущості;
• вибіркова відміна значущості.
29.
2 Каскадність!Important
CSS надає можливість повністю скасувати значущість стилів. Ви можете використовувати цей
прийом, щоб ніякий інший більш значущий стиль не скасував конкретну властивість елемента вебсторінки. Просто вставте після нього значення !Important.
Розглянемо приклад. У нас є два стилі:
.nav a { color: red; }
a { color: teal !important; }
При звичайному розкладі посилання, вкладене в елемент з класом .nav, була б пофарбована в
червоний колір, так як стиль, визначений селектором .nav а, більш значущий, ніж <a>. Однак
додавання !Important передбачає, що дана властивість завжди матиме більший пріоритет. Так, у
вищенаведеному прикладі всі посилання веб-сторінки, в тому числі вкладені з класом nav, будуть
відображені зеленувато-блакитним кольором.
30.
2 КаскадністьЗміна значущості
Нехай два стилі форматують
перший абзац. Стильовий клас
.intro не настільки значущий, як
#sidebar
p.
властивості
Таким
.intro
чином,
не
буде
використовуватися до абзацу.
31.
2 КаскадністьЩоб збільшити значущість, додайте до стилю ідентифікатор #sidebar .intro.
Але просте додавання додаткових селекторів з метою «перемогти» властивості стилю
може привести до так званих війн значущості, коли у вас в кінцевому підсумку виходять
таблиці стилів, що містять дуже довгі і заплутані імена стилів на кшталт #home #main #story
h1. Потрібно уникати стилів такого типу і намагатися, щоб селектори були якомога
коротшими.
32.
2 КаскадністьВибіркова відміна значущості
Можна точно проробити дизайн веб-сторінок, вибірково скасовуючи стилі. Припустимо,
ви створили зовнішню таблицю і назвали її styles.css, зв'язавши з усіма сторінками сайту.
Цей CSS-файл містить загальні визначення стилів дизайну сторінок: шрифт і колір для тегів
заголовків <h1>, стиль елементів форм і т. д.
Можливо, ви хочете, щоб на головній (домашній) сторінці <h1> виглядав відмінно від
того, як він відображений на інших. Наприклад, був виділений крупним напівжирним
шрифтом або шрифтом меншого розміру, щоб вмістити більший обсяг інформації. Іншими
словами, ви все ще хочете використовувати більшість стилів файлу styles.css, але необхідно
скасувати кілька атрибутів окремих тегів (<h1>, <p> і т. д.).
33.
2 КаскадністьОдин зі способів зробити так полягає в простому створенні внутрішньої таблиці, яка
містить стилі, які ви хочете скасувати і перевизначити. Припустимо, у файлі styles.css є
наступний стиль:
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #000;
}
34.
2 КаскадністьВи хочете, щоб заголовок <h1> головною веб-сторінки був відображений великим
шрифтом червоного кольору. Просто додайте у внутрішню таблицю наступний стиль:
h1 {
font-size: 36px;
color: red;
}
Але потрібно переконатися, що ви приєднуєте зовнішню таблицю стилів перед
внутрішньою в розділі HTML-заголовка <head>. Це гарантує, що потрібні стилі матимуть
перевагу в тих випадках, де значущість однакова.
35.
2 КаскадністьІнший метод полягає в створенні ще однієї зовнішньої таблиці. Наприклад, таблиці
home.css, яку потрібно буде приєднати до головної веб-сторінки в додаток до styles.css. Файл
home.css буде містити стилі styles.css, які ви хочете перевизначити. Для правильної роботи
файл home.css повинен бути приєднаний після styles.css в HTML-коді головною вебсторінки:
<link rel="stylesheet" href="css/ styles.css">
<link rel="stylesheet" href="css/home.css">
36.
2 КаскадністьВи вирішили, що потрібно зробити текст абзацу всередині div-контейнера article червоним, і
створили наступний селектор нащадка:
#article p { color: red; }
Але потім вам захотілося, щоб текст одного абзацу з класом special був синім. Якщо просто
створити селектор класу, ви не отримаєте бажаного результату.
.special { color: blue; }
Як вже говорилося, коли визначається, яку з властивостей потрібно застосувати до тега, веб-
браузер використовує для вирішення стильових конфліктів просту математичну формулу: браузери
дають ID-селектору значення 100, селектору класу - значення 10, а селектору тега -значення 1.
Оскільки селектор #article p складений з одного ідентифікатора і одного елемента (сумарний показник
значущості -101), він замінює собою простий стиль класу, змушуючи вас змінити селектор:
#article .special {color: blue; }
37.
УЗАГАЛЬНЕННЯ ВИВЧЕНОГО МАТЕРІАЛУ1 В чому полягає механізм наслідування стилів CSS? Навести приклади.
2 Що таке каскадність?
3 Коли відбувається об’єднання унаслідуваних стилів?
4 Що відбувається при виникненні конфліктів властивостей?
5 Охарактеризувати поняття значущості (специфічності)?
6 Як управляти каскадністю? Охарактеризувати кожен випадок.
7 Для чого використовується параметр !Important?
8 Як скинути стандартні стилі?
38.
ДОМАШНЄ ЗАВДАННЯ:Реалізувати розглянуті приклади.
Макфарланд Д. Большая книга CSS3 / Д. Макфарланд. – 3-е изд. – СПб. : Питер,
2014, с. 116-136