Форматіваніе блоку псевдокласів і псевдоелементів
Форматіваніе блоку
Блоком в каскадних аркушах стилів прийнято вважати фрагмент сторінки або її повний обсяг, поміщений в контейнери <P> і <DIV>, а також <BODY> (якщо сторінка в цілому). Форматуванням блоку є зміна його параметрів, таких як: ширина і висота блоку, зовнішні і внутрішні відступи від його кордонів, привласнення кольору і зовнішнього вигляду як окремих ліній (меж), так і загального фону.
Габарити блоку в стилях вказуються у властивостях width і height, при цьому, як і повсюдно в таких випадках не можна вказувати негативні значення. У деяких випадках для дизайну сторінок доводиться вдаватися до змінних габаритам блоку. Для цього в CSS передбачені властивості min-width, min-height (мінімальна ширина і висота блоку) і max-widht / max-height (максимальні їх значення).
Зовнішні відступи від блоку диктують параметри: margin (відступи однакові), margin-left (відступ тільки зліва), margin-right (відступ справа), margin-top (відступ зверху) і margin-bottom (відступ знизу). Аналогічно знаходить застосування властивість padding (відступ всередині блоку).
При завданні фону блоку div потрібно застосувати властивість background-color, вибір значення якого не відрізнити від загального застосування квітів. У разі, якщо Ви захочете використовувати в якості фону будь-яке зображення, то застосовуйте властивість background-image, при цьому в значенні вкажіть адресу і ім'я файлу потрібного зображення. Обмежити повторення зображення в тлі блоку можна властивістю background-repeat і його значеннями: repeat-x (повторення по осі X), repeat-y (по осі Y) і no-repeat (без повторень). При необхідності зафіксувати фонове зображення, для того, щоб воно залишалося нерухомим при прокручуванні використовуйте значення fixed у властивості background-attachment.
Для зміни параметрів рамки блоку застосовуються властивості, початківці зі слова BORDER. Так за допомогою border-width можна встановити однакові значення для всіх чотирьох кордонів блоку, а в значеннях border-left-width, border-right-width, border-top-width і border-bottom-width описується конкретна межа. За аналогічним поданням застосовуються: border-color (колір ліній рамки блоку) і border-style (зовнішній вигляд ліній). Про остання властивість потрібно додати, що вони мають кілька, невивчених нами, значень:
- solid, groove, ridge, double - лінії рамки будуть суцільними, втиснутими, опуклими і подвійними відповідно.
- inset - блок повністю втиснутий.
- outset - об'ємний вигляд блоку.
- none - немає ліній.
З вищевикладеного можна припустити, що стиль блоку може мати наступний вигляд:
.box {width: 200px; height: 100px; margin-left: 5px; margin-right: 5px; margin-top: 10px; margin-bottom: 15px; padding: 5px; border-width-left: 1px; border-width-right: 0px; border-width-top: 0px; border-width-bottom: 5px; border-color: # 202020; border-style: solid}
Форматування псевдокласів і псевдоелементів
До даної категорії відносяться елементи Web-сторінок, яких складно віднести до звичайних елементів. Псевдокласи це - посилання, first-child і lang (мова). У специфікації CSS 2.0 вони описані як:
- a: link - властивості звичайної посилання.
- a: active - властивості активного посилання.
- a: visited - властивості відвіданого посилання.
- a: hover - властивості посилання при наведенні на неї миші.
- a: focus - властивість посилання при фокусі
- first-child - виділяє перший елемент серед наступних.
- lang - форматування елементів в залежності від застосування мов на сторінці.
У каскадних аркушах стилів при форматуванні посилань застосовуються ті ж значення, що і до звичайного тексту. При описі інших псевдокласів в CSS перед їхніми значеннями вказується символ ">".
До псевдоелементи в стилях відносяться властивості:
- first-letter - форматує перший символ для першого рядка.
- first-line - призначається окреме форматування першого рядка блоку тексту.
- after - призначає місця розташування об'єкта після поточного елемента.
- before - призначає місця розташування об'єкта до поточного елемента.
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.