Здрастуйте, шановні читачі блогу . Сьогодні ми продовжимо розмову про таблиці каскадних стилів (матеріали на цю тему ви зможете знайти в Довіднику CSS). Без цієї технології зараз вже не обходиться практично жоден сайт в інтернеті, тому вивчення мови стильової розмітки так само обов’язково, як і вивчення підручника з Html).
Без розуміння основ цієї технології ви не зможете вносити навіть невеликі зміни в шаблон вашого сайту і змушені будете або миритися з цим, або наймати сторонніх фахівців. Якщо, наприклад, PHP вивчити складно, то ХТМЛ і CSS освоїти на рівні користувача не складе праці. У всякому разі варто спробувати, а там дивись і сам піде.
Значення правил CSS — кольори, функціонали і розміри
У минулій статті ми говорили про те, що таке CSS і стилі підключити до Html-коду (Style і Link). Сьогодні ми продовжимо розпочату тему і поговоримо про спадкування в стильовому оформленні та про завдання розмірів шрифтів (піксель, пункт, відсотки тощо).
В загальному-то нічого складного та об’ємного сьогодні не буде, але от у наступний статті ми вже почнемо розглядати селектори — тему досить об’ємну і, напевно, сложноватую в освоєнні.
Отже, давайте подивимося, а де ми можемо почерпнути інформацію про таблиці каскадних стилів? Напевно, логічно її буде пошукати все на тому ж сайті валідатора W3C, ну, або відразу ж перейти на сторінку з поточної специфікації CSS. Для перегляду всіх наявних у цій специфікації правил достатньо перейти по посиланню з верхнього меню під назвою «properties«.
В якості значень цих правил можуть виступати якісь слова (наприклад, left, right, center, justify тощо), які заздалегідь відомі і обумовлені в таблиці з цієї специфікації (див. малюнок вище — стовпець «Values»). В якості значень можуть виступати і просто цифри, які не мають розмірності (наприклад, у правилі «z-index») або позначення шістнадцятиричних кодів кольори (наприклад, #fff8dc).
Трохи докладніше зупинимося на завданні квітів в CSS і як це можна втілювати в життя:
color:red;
color:#186EAE;
color:#CA7;
color:rgb (0, 148, 253);
color:rgb (0%, 50%, 98%);
Можливе використання в якості значень для правил CSS і так званих функціоналів. Яскравим прикладом функціоналу є Url і укладений у круглі дужки — url (images/navtabr.png). Таким чином дуже часто задають в стилях фонове зображення:
Ну, і ще в CSS в якості значень дуже часто використовуються розміри шрифтів та інших речей. Якщо ви пам’ятаєте, то в теге Font з атрибутом Size вони задавалися просто цифрами від 1 до 7. А, наприклад, розмір зображень в атрибути Width і Height тега Img задавалися просто числами без позначення розмірності, хоча ці числа передбачали пікселі.
Стильова розмітка спочатку призначалася для різних пристроїв виводу — не тільки для моніторів, але і, наприклад, для оформлення інформації призначеної для друку. Тому розміри шрифтів або, наприклад, відступи завжди вказуються в CSS з одиницями виміру. Причому, синтаксис передбачає написання цифр і одиниць розмірності (без додавання між ними пробілів).
При цьому можуть використовувати як відносні, так і абсолютні одиниці. Абсолютні пов’язані з фізичним світом та їх вказівки можна буде використовувати наступні одиниці:
Абсолютні розміри в CSS можуть використовуватися для тієї ж печатки. Сантиметри (cm) і міліметри (mm) є основними одиницями метричної системи, а дюйми (in) є базовою одиницею, від якої утворюються дуже часто використовуються в поліграфії пункти (pt) і піки (pc).
Дюйм (in), відповідно, становить 25,4 міліметра (mm), а пункт (pt) утворюється діленням одного дюйма (in) на 72 частини. Т. о. один пункт (pt) буде дорівнює приблизно однієї третини міліметри (мм). Ну, а одна піку (pc) має розмір дорівнює 12 пунктам (pt). Тут, думаю, все і так зрозуміло.
Пікселі, Em, Ex і відсотки — відносні розміри в CSS
Отже, всі абсолютні одиниці використовуються виключно для друку. А ось для відображення інформації на моніторах потрібно використовувати розміри в відносних одиницях. Вся справа в тому, що фізичний розмір точок, що утворюють зображення на моніторі (їх ще називають пікселями), може бути різним в залежності від типу і фізичного розміру цього самого монітора.
Крім того, на будь-якому моніторі можна встановити дозвіл відмінне від фізичного (коли піксель буде настільки малий, що не помітний) і можливий варіант, коли при великій діагоналі монітора і малому дозвіл один піксель буде помітний неозброєним оком. Тобто піксель монітора — це величина суто відносна і тому при блокової верстки сайтів з використанням CSS слід робити упор на завдання розмірів саме у відносних величинах.
Відносні розміри в CSS можуть задаватися за допомогою наступних одиниць:
Отже, давайте почнемо з пікселі (pixels), про яких ми вже, власне, все сказали. Вони є відносною величиною з тієї простої причини, що немає такої фізичної заходи. Піксель виходить на екрані монітора в результаті обробки відеокартою якихось там сигналів, і його розмір буде змінюватись в залежності від використовуваного монітора і в залежності від встановлених параметрів (дозволу екрану).
Далі йдуть більш хитрі відносні одиниці розмірів шрифтів, які використовуються в CSS — Em і Ex. Перше — це висота шрифту що використовується на комп’ютері користувача за промовчанням, а Ex — висота великої літери «х» використовується за умовчанням шрифті. Напевно, трохи не зрозуміло. Давайте розглянемо це трохи детальніше.
Багато браузери приймають значення Ex рівним половині значення Em (наприклад, IE). У кожного шрифту є базова лінія, є заголовні букви і деякі особливі малі літери, які виступають за базову лінію (наприклад, «y»). Є ще літери з діакритичними знаками, наприклад, «е» та «ї» у російській мові або які-небудь умляути і т. п. Тому розмір шрифту (Em) визначається виносними елементами.
Ну, а Ex — це, як я вже казав — висота великої (маленької літери «x» (ікс) у латинській розкладці. Зрозуміло, що в залежності від співвідношення рядкових і прописних букв в шрифті, ці значення Em і Ex можуть ставитися один до одного по-різному, а не просто як Ex=Em/2.
Одиницю відносних розмірів Ex використовують CSS досить рідко, в основному застосовують Em (не беручи в розрахунок пікселі, які використовують для вказівки розміру ще частіше). Але є ще один спосіб завдання відносних розмірів — відсотки, тобто він повинен буде вираховуватися щодо чого-небудь.
Далеко не всі правила CSS можуть задаватися з відсотками. Навіть у списку консорціуму W3C це виділено в окрему колонку:
Якщо навпаки правила в колонці «Percentages» нічого не написано, то значить використання процентів для цього правила не доступно. Для тих же стильових правил, яким дозволено використовувати розміри у відсотках, у цій колонці буде наведено пояснення для чого це можна буде використовувати.
Спадкування згідно специфікації CSS
Всі можливі значення правил і всі їх допустимі значення описані в цій специфікації і заздалегідь відомі. Але тут є одне дуже велике відміну від Html. Всі наявні теги мови гіпертекстової розмітки у всіх браузерах, що підтримують і інтерпретуються однаково, чого не можна сказати про CSS.
Деякі стильові властивості можуть підтримуватися і інтерпретуватися різними браузерами по різному. Причому, це залежить від браузера, так і від його версії.
Отже, на сторінці «properties» в таблиці з правилами наводяться такі значення:
Тут ми як раз і підійшли до поняття спадкування в CSS. Що це таке? По-перше, якщо ми подивимося на наведену таблицю, то побачимо, що для частини стильових правил спадкування має місце бути (дозволено), а для іншої частини — воно заборонено.
Припустимо, що ви уклали в контейнер Div кілька інших Html-елементів, наприклад, теги параграфа P. Так от, якщо ви пропишіть для цього Div яке-небудь властивість CSS, для якого спадкування дозволено, то воно буде застосовано для всіх тегів абзацу усередині цього контейнера.
Таким чином, якщо в наведеній таблиці навпроти цікавить вас правила в колонці «Inherited?» написано «Yes», то, відповідно, спадкування для нього дозволено (наприклад, color), а якщо «No», то спадкування буде заборонено (наприклад, для background).
Давайте розглянемо спадкування в CSS на прикладах для закріплення, так би мовити, матеріалу. Для цього створимо своєрідну матрьошку із трьох контейнерів Div вкладених один в одного і подивимося на цьому прикладі, як здійснюється спадкування для одних правил і не здійснюється для інших:
Отже, ми пам’ятаємо, що для правила color спадкування дозволено, а для правила background — ні. У відповідності з цим ми маємо наступну картину:
У першому елементі (зовнішньому контейнері) ми задаємо за допомогою атрибута Style правило «color:red», яке наказує пофарбувати текст укладений у цьому контейнері в червоний колір. Т. к. правило «color» підтримує спадкування, то це означає, що і у всіх вкладених у зовнішній контейнер елементах текст теж повинен буде забарвитися в червоний колір.
Власне, так і відбувається, за винятком самого внутрішнього контейнера Div, для якого прописано своє власне «color:blue». Природно, що правило, написаний безпосередньо для цього Html тега, буде мати пріоритет над тим, що було прописано у зовнішньому елементі. Тому текст у внутрішньому контейнері вийде синього кольору.
Хоча правило «background» по специфікації CSS і не підтримує спадкування, але оскільки третій контейнер Div розташований всередині другого, то виходить ілюзія спадкування фонової заливки. Але це не так. Якщо спробувати гіпотетично винести внутрішній контейнер за межі другого, то фону у нього вже не буде.
У наступній статті ми вже приступимо до такого базового поняття в CSS, як селектор.
Удачі вам! До зустрічей на сторінках блогу
