Тема Основи CSS Успадковування та каскадування

Тема: Основи CSS. Успадковування та каскадування

Поняття успадковування Успадковування пов’язано з тим, яким чином елемент у розмітці HTML успадковує властивості своїх батьківських елементів (в яких він утримується) і передає їх своїм нащадкам, у той час як каскадування має справу з оголошеннями CSS, які застосовуються до документа, і як конфліктуючі правила перевизначають один одного. Успадкування в CSS є механізмом, за допомогою якого певні властивості передаються від батьківського елемента його елементам-нащадкам. Використовуючи успадковування можна, наприклад, визначити властивості шрифту для елементів html або body, і вони будуть успадковані усіма іншими елементами. Можна визначити кольори фону і переднього плану для певного контейнерного елемента, і колір переднього плану буде автоматично успадкований елементами- нащадками в цьому контейнері. Фоновий колір не успадковується, але початкове значення для background-color буде transparent, що означає, що батьківський фон буде просвічувати. Ефект буде аналогічний тому, який був би отриманий при успадкуванні фонового кольору. Якщо б успадковувалися фонові зображення, то кожен нащадок мав би таке ж фонове зображення, як і його батьківський елемент, і результат виглядав би як деяка головоломка, так як фон “починався” б для кожного елемента.

Поняття каскадування Каскадування - це механізм, який керує кінцевим результатом, коли кілька конфліктуючих оголошень CSS застосовуються до одного елементу. Є три основні концепції, які управляють порядком, в якому застосовуються оголошення CSS: • Важливість • Специфічність • Порядок вихідного коду Важливість оголошення CSS залежить від того, де воно визначено. Конфліктуючі оголошення будуть застосовуватися в наступному порядку, більш пізні будуть перевизначати попередні: § Таблиці стилів агента користувача § Звичайні оголошення в таблицях стилю автора § Важливі оголошення в таблицях стилю користувача

Поняття каскадування Таблиця стилів агента користувача є вбудованою таблицею стилів браузера. Кожен браузер має свої використовувані за замовчуванням правила, що визначають, як виводити різні елементи HTML, якщо ніякий стиль не визначений користувачем або дизайнером сторінки. Наприклад, невідвідані посилання будуть зазвичай виводитися синім кольором і підкресленими. Таблиця стилів користувача є таблицею стилів, яку визначив користувач. Не всі браузери підтримують таблиці стилів користувача, але вони можуть бути дуже корисні, особливо для користувачів з деякими типами функціональних недоліків. Наприклад, людина з дислексією може мати таблицю стилів, яка визначає певні шрифти та кольори, які полегшують читання. Таблиця стилів автора є тим, що ми зазвичай називаємо “таблиця стилів”. Це таблиця стилів, яку автор документа (або, більш імовірно, дизайнер сайту) написав і приєднав (або включив). Звичайні оголошення є саме цим: звичайними оголошеннями. Протилежними є важливі оголошення, які є оголошеннями, за якими слідує директива !іmportant. Важливі оголошення в таблиці стилів користувача будуть перекривати все інше, що цілком логічно. Подання, яке використовується за замовчуванням в браузері, буде застосовуватися тільки в тому випадку, якщо ці оголошення не перевизначені будь-якими правилами таблиці стилів користувача або таблиці стилів автора, так як таблиця стилів агента користувача має найменший пріоритет.

Поняття каскадування Специфічність є деякою характеристикою, яку кожен автор CSS повинен розуміти і думати про неї. Можна уявляти її як міру того, наскільки конкретним є селектор деякого правила. Селектор з низькою специфічністю може відповідати багатьом елементам (такий як *, який відповідає кожному елементу в документі), в той час як селектор з високою специфічністю може відповідати тільки одному елементу на сторінку (такий як #nav, який відповідає тільки елементу з id співпадаючим з nav). Специфічність має чотири компоненти, давайте назвемо їх a, b, c і d. Компонент “a” є найбільш розмежовуючим, “d” – найменш. § Компонент “a” дуже простий: це 1 для оголошення атрибуту style, інакше це 0. § Компонент “b” є числом селекторів id в селекторі (тих, які починаються з #). § Компонент “c” є числом селекторів атрибутів, включаючи селектори класів – і псевдо-класів. § Компонент “d” є числом типів елементів і псевдо-елементів в селекторі.

Поняття каскадування Порядок вихідного коду Якщо два оголошення впливають на один і той же елемент, мають однакову важливість і однакову специфічність, то остаточне рішення визначає порядок вихідного коду. Оголошення, яке з’являється пізніше в таблицях стилів буде вигравати у тих, які зустрічаються раніше. Якщо є єдина зовнішня таблиця стилів, то оголошення в кінці файлу будуть перевизначати оголошення, які зустрічаються раніше у файлі, якщо виникає конфлікт. Конфліктуючі оголошення можуть також виникати в різних таблицях стилів. У цьому випадку порядок, в якому приєднуються таблиці стилів, включаються чи імпортуються, керують тим, яке оголошення буде застосовуватися.

Як працює успадковування в CSS Кожен елемент в документі HTML буде наслідувати всі успадковані властивості свого батьківського елементу, за винятком кореневого елементу (html), який не має предка. Приклад успадкування: ПНК

Інтернет - технології

Колір та фон Властивість color описує колір переднього елементу. Наприклад, ми бажаємо встановити зелений колір тексту абзаца, для цього у файлі style. css створимо таке правило: p{ color: #00 ff 00; } В документі розміщуємо посилання на даний стиль:

Колір тексту у цьому абзаці зелений

Колір та фон Властивість background-color описує колір фону елемента. Для того, щоб замінити фон всієї веб-сторінки властивість background-color слід застосувати до тегу . Також властивість background-color можна застосовувати до інших елементів веб-сторінки. У файл style. css внесемо зміни, що описують фон абзацу. p{ color: #00 ff 00; background-color: #ff 0000; } В документі розміщуємо посилання на даний стиль:

Колір тексту у цьому абзаці зелений на червоному фоні.

Колір та фон За допомогою властивості background-color, зображення можна не тільки помістити на задній план елементу або зробити фоном веб-сторінки, але задати його положення на веб-сторінці. У цьому прикладі ми в якості зображення будемо використовувати зображення шару. Щоб зробити дане зображення фоном веб-сторінки файлі style. css застосувати параметри тега body{ background-image: url(". . /images/ball. jpg"); } достатньо в

Колір та фон. Властивість background-repeat Результатом виконання попереднього прикладу було повторення зображення шару, як по вертикалі так і по горизонталі, щоб керувати цим повторенням застосовується властивість background-repeat.

Колір та фон. Властивість background-repeat Таблиця значень background-repeat body{ background-image: url(". . /images/ball. jpg"); background-repeat: repeat-x; }

Колір та фон. Властивість background-attachment Таблиця значень background-attachment body{ background-image: url(". . /images/ball. jpg"); background-repeat: repeat-x; background-attachment: fixed; } За замовчуванням фонове зображення розміщається у лівому куті екрану.

Колір та фон. Властивість background-position За допомогою властивості background-position зображення можна розміщати у будь-якому місці екрану. Значення властивості background-position являють собою вісь координат. body{ background-image: url(". . /images/ball. jpg"); background-repeat: no-repeat; background-position: 5 cm } Після виконання цього прикладу ми побачимо, що зображення розташовано на 5 см зліва та на 5 см зверху. В якості значень властивості background-position можна використовувати значення у процентах, ключові слова (right, left, top, bottom). body{ background-image: url(". . /images/ball. jpg"); background-repeat: no-repeat; background-position: 100% 25% }

Колір та фон. Властивість background-position

Колір та фон. Властивість Властивості background, що були розглянуті, можна записувати у скороченому вигляді. Розглянемо фрагмент код: background-color: #ff 0000; background-image: url(". . /images/ball. jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: 5 cm Для того, щоб властивість background можна було записати однією стрічкою, необхідно розташувати його властивості у такому порядку: [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]. background: #ff 0000 url(". . /images/ball. jpg") no-repeat fixed 5 cm; Якщо властивість відсутня, то вона автоматично отримує значення за замовчуванням. Наприклад, якщо властивості backgroundattachment та background-position відсутні то вони отримують свої значення за замовчуванням.

Управління шрифтом В старих версіях HTML шрифт оформлявся за допомогою тегу але цей тег треба було додавати кожного разу, коли було необхідно встановити шрифт, від цього збільшувався розмір веб-сторінки, незручно було змінювати властивість шрифту. Щоб задати сімейство шрифтів використовується властивість font-family. В цій властивості завжди вказується ряд шрифтів, розділених комою, наприкінці списку вказується сімейство шрифтів. При застосуванні шрифтів до веб-сторінки завжди задається основний шрифт, а потім альтернативний. У разі відсутності на комп’ютері користувача заданих шрифтів то веб-сторінка, як мінімум буде відображена шрифтом, що входить до цього сімейства. Існують п’ять сімейств шрифтів: