Форматіваніе блоку псевдокласів і псевдоелементів

Форматіваніе блоку

Блоком в каскадних аркушах стилів прийнято вважати фрагмент сторінки або її повний обсяг, поміщений в контейнери <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 - призначає місця розташування об'єкта до поточного елемента.