Блочна модель документа - Частина 2

Категорії статей: CSS ; 16.04.2010

Продовжимо знайомитися із стильовими властивостями блоку, зокрема взнаємо, як можна управляти відображенням границі блоку.

Стильові властивості границі блоку

Каскадні таблиці стилів дозволяють задавати границі блоку, зокрема такі параметри, як товщина, колір і стиль відображення границі. Познайомимося з ними по порядку.

Товщину границі блоку можна задати властивостями border-top-width, border-right-width, border-bottom-width і border-left-width, які визначають товщину верхньої, правої, нижньої і лівої частини границі відповідно. Товщину границі можна задавати або в абсолютних величинах (наприклад, пікселях), або умовними величинами

  • thin - задає тонкі границі;
  • medium - задає границі середньої товщини;
  • thick - задає товсті границі.
Наприклад

Код
div { border-top-width:5px; }

Для скороченого запису потрібно використовувати властивість border-width, якій можна передати від одного значення до чотирьох. Якщо вказано одне значення, то воно поширюється на всі частини границі. Якщо вказано два значення, то перше значення застосовується до верхньої і нижньої частин границі, а друге - до лівої і правої частин границі. Якщо вказано три значення, то перше застосовується до верхньої частини, друге до лівої і правої частин границі, а третє значення застосовується до нижньої частини границі. Якщо ж вказано чотири значення, то вони застосовуються до верхньої, правої, нижньої і лівої частин границі відповідно. Наприклад

Код
div { border-width: 10px 5px; }
p { border-width: 5px; }

Колір границі блоку можна задати властивостями border-top-color, border-right-color, border-bottom-color, border-left-color, які визначають колір верхньої, правої, нижньої і лівої частин границі блоку відповідно. Як кольори задаються, ми вже знаємо, ось тільки додам, що можна вказувати значення transparent, яке робить границі прозорим. Наприклад

Код
div { border-top-color:#aabbcc; }
div { border-bottom-color:#bb4400; }

Також можна використовувати скорочений запис у вигляді властивості border-color, якій можна передати від одного значення до чотирьох. Наприклад

Код
div { border-color:#ba99ff; }
p { border-color:#ba99ff #3399bb; }

Стиль відображення границі блоку можна задати властивостями border-top-style, border-right-style, border-bottom-style, border-left-style, які визначають стиль верхньої, правої, нижньої і лівої частин границі відповідно. Дані властивості можуть приймати одне з наступних значень

  • none - границі не відображується, навіть якщо задані інші властивості, наприклад, border-width (значення по замовчуванню);
  • dotted - задає границі пунктирною лінією;
  • dashed - задає границі штрих-пунктирною лінією;
  • solid - задає границі суцільною лінією;
  • double - задає відображення границі двома безперервними лініями;
  • groove - задає відображення границі лінією, що втиснута з двох сторін;
  • ridge - задає відображення границі випуклою з двох сторін лінією;
  • inset - задає відображення границі втиснутою лінією;
  • outset - задає відображення границі випуклою лінією.
Наприклад

Код
div { border-top-style: solid; border-left-style: solid; }

Також є скорочена форма запису, що використовує властивість border-style, яке задає стиль відображення відразу для всіх частин границі. Властивості border-style можна передавати від одного значення до чотирьох. Наприклад

Код
div { border-style: solid double; }p { border-style: solid double dashed; }


Але є ще способи скороченого запису властивостей границі блоків. Властивості border-top, border-right, border-bottom, border-left задають параметри товщини, кольору і стилю відображення верхньої, правої, нижньої і лівої частин границі блоку. Наприклад, замість запису

Код
div { border-top-width:5px; border-top-color: red; border-top-style: solid; }


можна написати наступне

Код
div { border-top: 5px red solid; }

І нарешті, властивість border задає однакові параметри товщини, кольору і стилю відображення всім чотирьом частинам границі блоку. Наприклад

Код
div { border: 5px red solid; }

В даному випадку границі блоку div будуть у вигляді суцільної лінії червоного кольору, товщиною п'ять пікселів.

По зовнішнім джерелам

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.43MB | 0.01Sec ad Google