3.3.1 Властивості css

Текст

За допомогою CSS можна визначати стиль і вигляд тексту. Аналогічно тому, використується тег <FONT>, який задає властивості шрифту, але стилі володіють великими можливостями і дозволяють скоротити код HTML. Зміна накреслення шрифту і його розміру відбувається через властивості CSS, які описані в табл. 3.1

Таблиця 3.1 - CSS-властивості для роботи зі шрифтами

Властивість	Значення	Опис
font-family	Ім’я шрифту	Задає список шрифтів
font-style	normal italic oblique	Нормальний шрифт курсив Похилий шрифт

Продовження таблиці 3.1

font-variant	normal small-caps	Капітель (особливі прописні букви)
font-weight	normal lighter bold bolder 100-900	Нормальна жирність Світле накреслення Жирний 100-світлий шрифт, 900-самий жирний
font-size	normal pt px %	Нормальний розмір Пункти Пікселі Відсотки

Крім зміни параметрів шрифтів, можна управляти і властивостями всього тексту. Значення властивостей наведені в табл. 3.2.

Таблиця 3.2 - CSS-властивості для роботи з текстом

Властивість	Значення	Опис
line-height	normal множитель точно %	Міжрядковий інтервал
text-decoration	none underline overline line-through blink	Прибрати все оформлення Підкреслення Лінія над текстом Підкреслення Миготіння тексту
text-transform	none capitalize uppercase lowercase	Прибрати всі ефекти Починати з прописних Всі прописні У рядкові
text-align	left right center justify	Вирівнювання тексту
text-indent	точно %	Відступ першого рядка

Колір

CSS має кілька опцій для визначення кольору тексту і фонових областей на веб-сторінці. Ці опції по роботі з кольором не тільки замінюють аналогічні в простому HTML, але і дають безліч нових можливостей. Наприклад, традиційний шлях для створення кольорової області, полягає в застосуванні таблиці. Стилі дозволяють відмовитися від подібного використання таблиць, пропонуючи більш прості і зручні варіанти управління кольором. У табл. 3.3 перераховані властивості елементів, призначених для завдання кольору.

Таблиця 3.3 - CSS-властивості для роботи з кольором.

Властивість	Значення	Опис
color	Колір	Встановлює колір тексту
background-color	Коліч transparent	Колір фону Прозорий
background-image	URL none	Фоновий малюнок Відсутній
background-repeat	repeat repeat-x repeat-y no-repeat	Повторюваність фонового малюнка
background-attachment	scroll fixed	Повторюваність фонового малюнка
background-position	Відсотки Пікселі top center bottom left right	Початкове положення фонового малюнку

Колір, використовуючи CSS, можна задавати трьома способами:

• За його назвою. Браузери підтримують деякі кольори по їх назві.

• За шістнадцятиричним значенням. Колір можна встановлювати по його шістнадцятиричним значенням, як і в звичайному HTML. Також допустимо використовувати скорочений запис, начебто # fc0. Вона означає, що кожен символ дублюється, в результаті отримаємо # ffcc00.

• За допомогою RGB. Можна визначити колір, використовуючи значення червоного, зеленого та синього компонента в десятковому численні. Значення кожного з трьох кольорів може набувати значень від 0 до 255. Також можна задавати колір в процентному відношенні.

Посилання

Для управління виглядом різних посилань в CSS використовуються псевдокласи, які вказуються після селектора A через двокрапку. В табл. 3.4 наведені допустимі псевдокласи і їх опис .

Таблиця 3.4 - Псевдокласи для роботи з посиланнями

Властивість	Опис
A:link	Визначає стиль для звичайних посилань, які не відвідувались.
A:visited	Визначає стиль для відвіданого посилання.
A:active	Визначає стиль для активного посилання. Активним посилання стає при натисканні по ньому.
A:hover	Визначає стиль для посилання при наведенні на нього мишею.

Зазвичай використання псевдокласу link має той же ефект, що і застосування стилю до селектора A. Тому цей псевдоклас можна опустити.

Списки

За допомогою CSS можна створити марковані й нумеровані списки, а також використовувати в якості маркера відповідне зображення. У табл. 3.5 перераховані властивості елементів, призначених для створення і зміни списків.

Таблиця 3.5 - CSS-властивості для роботи зі списками

Властивість	Значення	Опис
list-style	disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none	Вид маркера. Перші три використовуються для створення маркованого списку, а решта - для нумерованого.
list-style-image	none URL	Встановлює символом маркера будь-яку картинку.
list-style- position	outside inside	Вибір положення маркера щодо блоку рядків тексту.

Оскільки тег <LI> успадковує стильові властивості тега <OL> або <UL>, який виступає в якості його батька, то можна встановлювати стиль як для селектора UL, так і для селектора LI.

Одиниці виміру

Для завдання розмірів різних елементів, в CSS використовуються абсолютні і відносні одиниці виміру. Абсолютні одиниці не залежать від пристрою виводу, а відносні одиниці визначають розмір елементу щодо значення іншого розміру. Відносні одиниці зазвичай використовують для роботи з текстом, або коли треба обчислити процентне співвідношення між елементами. У табл. 3.6 перераховані основні відносні одиниці.

Таблиця 3.6 - Основні відносні одиниці

Одиниця	Опис
Em	Висота шрифту поточного елементу
Ex	Висота символу x
Px	Піксель
%	Відсоток

Значення, яке змінює, залежить від розміру шрифту поточного елементу (встановлюється через стильовий атрибут font-size). В кожному браузері закладений розмір тексту, який застосовується в тому випадку, коли цей розмір явно не заданий. Тому спочатку 1em дорівнює розміру шрифту, заданого в браузері за замовчуванням. Відповідно, встановлюючи розмір тексту для всієї сторінки в em, робота відбувається саме з цим параметром. У тому випадку, коли em використовується для певного елемента, за 1em приймається розмір шрифту його предка.

Аргумент ex визначається як висота символу "x" в нижньому регістрі. На ex поширюються ті ж правила, що і для em, а саме, він прив'язаний до розміру шрифту, заданого в браузері за замовчуванням, або до розміру шрифту елемента предка.

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

Таблиця 3.7 - Основні абсолютні одиниці

Одиниця	Опис
In	Дюйм (1 дюйм дорівнює 2.54 см)
Cm	Сантиметр
Mm	Міліметр
Pt	Пункт (1 пункт дорівнює 1/72 дюйма)
Pc	Піка (1 піку дорівнює 12 пунктам)

Найбільш, мабуть, найпоширенішою одиницею є пункт, який використовується для вказівки розміру шрифту.