Способи підключення CSS до документа
- коли таблиця стилів описана в самому документі, вона може розташовуватися в ньому між тегами (Які, в свою чергу, розташовуються в цьому документі між тегами і ). Всі правила цієї таблиці діють протягом усього документа;
- коли таблиця стилів описана в самому документі, вона може розташовуватися в ньому в тілі якогось окремого тега (за допомогою його атрибута style) цього документа. Всі правила цієї таблиці діють тільки на вміст цього тега.
У перших двох випадках кажуть, що до документа застосовані зовнішні таблиці стилів. а по-друге двох випадках - внутрішні таблиці стилів.
Для додавання CSS до XML-документу, останній повинен містити спеціальне посилання на таблицю стилів. наприклад:
Ієрархія елементів всередині документа
Як відомо, HTML-документи будуються на підставі ієрархії елементів, яка може бути наочно представлена в деревовидної формі. Елементи HTML один для одного можуть бути батьківськими, дочірніми, елементами-предками, елементами-нащадками, сестринськими.
Елемент є батьком іншого елемента, якщо в ієрархічній структурі документа він знаходиться відразу, безпосередньо над цим елементом. Елемент є предком іншого елемента, якщо в ієрархічній структурі документа він знаходиться десь вище цього елемента.
Нехай, наприклад, в документі присутні два абзаци p. включають в себе шрифт з напівжирним шрифтом b. Тоді елементи b будуть дочірніми елементами своїх батьківських елементовp. і нащадками своїх предковbody. У свою чергу, для елементів p елемент body буде тільки батьком. І крім того, ці два елементи p будуть сестринськими елементами. як мають одного і того ж батька - body.
В CSS можуть задаватися, за допомогою селекторів, не лише поодинокі елементи, але і елементи, які є нащадками, дочірніми або сестринськими елементами інших елементів (див. Підрозділ «види селекторів»).
Побудова правила CSS
види селекторів
Селектори правила CSS можуть бути
- Також в CSS існує так званий універсальний селектор. позначає будь-який елемент, що зустрічається в документі. Наприклад, *. Перед будь-яким селектором, що задає клас або ідентифікатор, можна поставити знак універсального селектора, в результаті вийде еквівалентну вираз, наприклад. first і * .first мають один і той же зміст.
Класи елементів. Ідентифікатори елементів.
Клас або ідентифікатор може бути присвоєно якомусь елементу (тегу) HTML за допомогою атрибутів class або id цього елемента (тега):
Основна відмінність між класами елементів і ідентифікаторами елементів в тому, що в документі який-небудь клас може бути присвоєно відразу кількох елементів, а ідентифікатор - тільки одному. Також відмінність у тому, що можуть існувати множинні класи (коли клас елемента складається з декількох слів, розділених пробілами). Для ідентифікаторів таке неможливо.
Імена класів і ідентифікаторів, на відміну від назв тегів і їх атрибутів, чутливі до регістру введення букв.
Властивості класів і ідентифікаторів задаються за допомогою відповідних селекторів. Причому може бути задано як властивість класу в цілому (в такому випадку селектор починається з «.»), Або властивість ідентифікатора самого по собі (в такому випадку селектор починається з "#"), так і властивість якогось елементу цього класу або з цим ідентифікатором.
Спадкування. Каскадування. Пріоритети стилів CSS.
Застосування CSS до документів HTML засноване на принципах успадкування і каскадирования. Принцип успадкування полягає в тому, що властивості CSS, оголошені для елементів-предків, успадковуються елементами нащадками. Але, природно, не всі властивості CSS успадковуються - наприклад, якщо для тега параграфа p засобами CSS задана рамка, то вона не буде успадковуватися жодним тегом, що містяться в даному тезі p, а ось якщо для параграфа p засобами CSS заданий колір шрифту (наприклад , color: green;), то це властивість буде успадковано кожним елементом-тегом, що знаходяться в параграфі.
Принцип каскадирования застосовується в разі, коли якомусь елементу HTML одночасно поставлено у відповідність більш одного правила CSS, тобто, коли відбувається конфлікт значень цих правил. Щоб дозволити такі конфлікти вводяться правила пріоритету.
Приклад таблиці стилів
Приклад таблиці стилів (в такому вигляді вона може бути або розміщена в окремому файлі .css, або ж обрамлена тегами