Опис кожного стильової властивості відбувається за одним шаблоном, містить таблицю браузерів з номерами версій, які підтримують вказане властивість, синтаксис написання, допустимі значення, успадкування і до яких елементів властивість застосовується. Кожна властивість ілюструється прикладом, який показує область його застосування. У більшості випадків наводиться малюнок, що демонструє результат прикладу, що дозволяє наочно зрозуміти, як діє та чи інша властивість CSS.
Браузери
Хоча більшість властивостей CSS описані досить давно, розробники не завжди включали їх підтримку в браузер або робили це не в повному обсязі. З цієї причини часто виникала ситуація, коли стандарти не можна було застосовувати тільки тому, що вони не працювали. На щастя, ця ситуація виправляється і сучасні браузери підтримують специфікацію CSS 2.1 практично в повному обсязі, хоча ще й не до кінця. Проте, при створенні універсальних веб-сторінок, які коректно відображаються в різних браузерах, необхідно знати, які властивості будуть працювати і де, а які ні. Для цього в таблиці наведено популярні браузери - Internet Explorer, Chrome, Opera, Safari і Firefox, а також можуть використовуватися такі символи:
- властивість повністю підтримується браузером з усіма допустимими значеннями;
- властивість браузером не сприймається і ігнорується;
- властивість розуміється браузером, але з деякими ог оворкамі. Наприклад, не всі допустимі значення діють; властивість застосовується не до всіх елементів, які вказані в специфікації; властивість працює тільки з Вендорний префіксом.
Значення за умовчанням
Якщо якась властивість в стилі не наводиться явно, то браузер, проте, самостійно застосовує його зі значенням, яке встановлено за умовчанням. Подібні значення не завжди є оптимальними, тому їх можна перепризначити, якщо безпосередньо вказати властивість з бажаним значенням.
Спадкування
Спадкування - це перенесення правил форматування для елементів, що знаходяться всередині інших. Наприклад, якщо для тега <p> заданий червоний колір тексту, а для курсиву <i> , який знаходиться всередині абзацу, немає, то в цьому випадку вкладений елемент успадковує властивості свого батька і курсивний текст також буде корисним.
Спадкування корисно для завдання властивостей, застосовуваних до елементу за умовчанням. Так, досить задати параметри форматування тега <table> і до елементів таблиці <td> вони будуть застосовані автоматично. Точно так само можна визначити властивості тега <body> , який породжує стиль всіх інших елементів веб-сторінки.
Існує два варіанти застосування успадкування. Якщо властивість успадковується, то для дочірнього елемента той же властивість можна не вказувати, крім випадку, коли його використання бажано. Навпаки, якщо властивість не успадковуються, то для дочірнього елемента потрібно вказати властивість знову або пропустити, коли воно не потрібно.
Застосування
Властивості CSS можна застосовувати далеко не до всіх елементів веб-сторінки, а тільки до тих, з якими вони «дружать». Більшість властивостей працюють з усіма елементами, а деякі тільки з блочними або позиціонувати. Наприклад, для зображень абсолютно безглуздо встановлювати властивості, які маніпулюють з текстом. Так що в кожному випадку варто вирішувати самостійно, коли застосовувати властивість, а коли немає.
Посилання на специфікацію
Для об'єктивності інформації наводиться посилання на специфікацію CSS 2.1 або CSS 3 за вказаною властивості. Саму специфікацію можна почитати за адресою http://www.w3.org/TR/CSS21/
Властивості CSS 3 ще не носять остаточний характер, тому посилання наводиться, як правило, на робочі версії специфікації.
версії CSS
Зазначено, в яких версіях CSS підтримується стильова властивість, а в яких ні. Використовуються такі позначення:
- властивість описано у зазначеній версії CSS.
- властивість в цю версію специфікації CSS не включено.
Синтаксис
При описі синтаксису застосовуються наступні позначення:
- вертикальна риса між значеннями (наприклад, fixed | scroll ) вказує на логічне виключає АБО, це означає, що треба вибрати тільки одне значення із запропонованих;
- подвійна вертикальна Єртай ( border-style || color ) позначає об'єднує АБО (АБО /І), кожне значення може використовуватися самостійно або спільно з іншими через пробіл;
- квадратні дужки ( [left | center | right] ) позначають групу, з якої, як правило, вибирається одне значення, причому воно не є обов'язковим до використання;
- два числа в фігурних дужках ( {a, b} ) говорять, що передує їм значення варто повторювати не менше a, але не більше b раз.
приклади
Все приклади перевірені на відповідність специфікації HTML за допомогою валідатора за адресою http://validator.w3.org, а також на відповідність специфікації CSS 2.1 і CSS 3 за допомогою валідатора ( http://jigsaw.w3.org/css-validator ). Біля кожного прикладу розташовується таблиця, де кольором виділяється, валиден приклад чи ні. Також наводяться деякі популярні браузери, в яких виконувався приклад і зазначено, працює в них приклад чи ні. Працездатність позначається тій же кольоровій схемою, що і для таблиці з браузерами.
Об'єктна модель
Для динамічного зміни властивостей елемента через JavaScript, необхідно знати, як до нього звертатися. Знаючи ім'я об'єкта і бажане властивість, можна вказати його нове значення без перезавантаження веб-сторінки. Так, для приховування та відображення елемента застосовується visibility, а об'єктна модель для управління його значенням - document.getElementById (" elementID"). Style .visibility . Вказуючи замість elementID свій ідентифікатор елемента, заданий параметром id, отримуємо механізм для динамічного приховування деякого вмісту.