Стільові властивості (продовження)

Властивості блоку

Текстові HTML-елементи можна представити у вигляді прямокутних блоків. До таких елементів відносяться Р, DIV, BODY. Для них у CSS передбачена спеціальна група властивостей, що дозволяє задавати поля, границі, відступи, розміри блоку. Розглянемо окремо кожну із властивостей блоку:

· margin - це ключове слово позначає набір властивостей, що визначають кожне із чотирьох полів навколо блоку: margin- top (верхнє поле), margin- right (праве поле), margin- bottom (нижнє поле), margin- left (ліве поле). До властивостей поля відноситься також і margin, що дозволяє одним рядком задати значення всіх чотирьох полів. Значення полів виражаються в абсолютних числах (наприклад, 50pt, 10cm) або у відсотках від ширини блоку (наприклад, 70%). Можливе значення auto, при якому браузер сам підбирає оптимальне поле;

· border - позначає набір властивостей відображення границі елемента. Розрізняють властивості:

o border- style (керування виводом границі) Значеннями цієї властивості є dotted (границя із крапок), dashed (пунктирна границя), solid (звичайна суцільна границя), double (подвійна лінія), groove («утоплена» лінія границі), ridge (опукла границя), insert (об'єкт, «втиснений» у сторінку), outset (опуклий об'єкт);

o border- width (ширина границі). Ширину границі можна задавати як в абсолютних одиницях (наприклад, 3 рх), так і за допомогою ключових слів: thin (тонка), medium (середня) і thick (товста);

o border- color (колір границі) визначається символьною назвою кольору, шістнадцятирічним кодом #RRGGBB, у десятковому форматі (наприклад, rgb (56,28,18)) або в процентному форматі (наприклад, rgb(25%,3 0%, 70%)).

Властивості границь можуть застосовуватися до рядкових елементів (наприклад, SPAN). При цьому рядковий елемент автоматично перетворюється в блок, відділений від іншого тексту порожніми рядками.

· padding - визначає просвіт між умістом блоку й границею. Для кожної границі є своя властивість: padding- top, padding-right, padding-bottom і padding-left. Значення властивості задається в абсолютних одиницях (наприклад, lcm, 5mm, 10pt);

· width і height - задають відповідно ширину й висоту блоку без урахування відступів, границь і полів. Ці властивості вказуються в абсолютних одиницях (mm, cm, pt і т.д.), а ширину можна задавати також і у відсотках. У текстовому блоці, висоту можна не визначати, при цьому властивості height привласнюється значення за замовчуванням - auto. Розмірність абсолютної величини за замовчуванням зазначена в пікселях (наприклад, weight: 100);

· float - визначає розміщення поточного елемента по горизонталі стосовно зовнішнього елемента. Наприклад, якщо ця властивість задана для малюнка IMG, за яким слідує текстовий блок, то float буде задавати обтікання малюнка текстом. Властивість float приймає значення left (розміщення елемента ліворуч), right (розміщення елемента праворуч) і none (відсутність обтікання при розміщенні елемента вздовж лівої границі документа);

· clear - скасовує дію властивості float. Якщо, наприклад, було задане розміщення малюнка вздовж лівої границі з обтіканням тексту, то значення clear:left відключить це обтікання. Відключити обтікання по обидва боки можна значенням both.

Властивості списків

Аркуші стилів дозволяють керувати відображенням списків: задавати гарнітуру, розмір і колір шрифту, обирати вид маркерів.

Нижче розглянуто основні властивості, призначені для форматування маркерів списків.

· list-style-type - задає маркери для впорядкованих (нумерованих) і неупорядкованих (маркірованих) списків. Набір припустимих значень властивості list-style-type включає 22 значення, багато з яких поки що не підтримуються розповсюдженими браузерами. Часто використовуються:

o square - маркер у вигляді квадратика □;

o circle - коло ○;

o disc - затемнене коло ● (значення за замовчуванням);

o decimal - десяткові числа, починаючи з 1;

o lower-roman - рядкові римські цифри, наприклад, i, ii, iii;

o upper-roman - прописні римські цифри, наприклад, I, П, III;

o lower-latin або lower-alpha - рядкові латинські букви, наприклад, а, b, с;

o upper-latin або upper-alpha - прописні латинські букви, наприклад, А, В, С;

o none - маркер не відображається.

· list-style-image - задає маркер у вигляді картинки (зображення). Наприклад, правило UL {list-style-image:url("mymarker.gif")} установлює для маркерів зображення, що зберігається у файлі mymarker.gif;

· list-style-position - встановлює позицію маркера в рядку списку. Значення цієї властивості задає додатковий відступ перед кожним рядком списку. Можна застосовувати два значення: outside (маркер відображається за межами області рядка списку) або inside (маркер перебуває всередині області списку). За замовчуванням приймається значення outside.

 

Зауваження

Властивість list-style-type можна застосовувати до всього списку відразу (у складі елементів OL або UL) або до окремих рядків (у тегу <LI>). Наприклад, список із нумерацією рядків за допомогою рядкових римських цифр задається тегом

 

<OL style=" list-style-type: lower-roman">

 

або CSS-правилом

 

UL { list-style: lower-roman}

 

Для виділення відображення окремого рядка списку можна скористатися вбудованим стилем. Наприклад, тег

 

<LI style=" list-style-type:circle">

 

задає окремий рядок, маркірований кружком ○.

Скориставшись CSS-властивістю display: list-item, можна сформувати список і без елементів 0L або UL.