Випуск №8. Властивості таблиць стилів (css)

24

Продовжимо вивчати властивості таблиць стилів css.

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

Отже про списках.

Стилів форматують списки не так багато. Ось вони всі:

list-style-type — визначає вигляд маркера списку.

Значення:

none — без маркера

disc — маркер у вигляді кола

square — квадрат

decimal — арабські цифри

lower-alpha — малі латинські літери

upper-alpha — прописні латинські букви

lower-roman — малі римські цифри

upper-roman — великі римські цифри

Приклад:

li{
list-style-type: square;

list-style-image — задає малюнок, який буде виступити в ролі маркера списку.

Значення:

none — без зображення

URL — адресу файлу з зображенням

Приклад:

li{
list-style-image:url(cir.jpg);
}

list-style-position — визначає позицію маркера щодо списку

Значеня:

outside — маркер знаходиться поза списку

inside — маркер знаходиться всередині списку

Пимер:

li{
list-style-position: outside;
}

Для прикладу запропоную такий варіант використання списків:

h2{
color:#CC0000;
}
li{
list-style-type: lower-alpha;
list-style-image:url(cir.jpg);
list-style-position: outside;
}

Столиці деяких держав

  • Москва
  • Мінськ
  • Лондон
  • Париж

Думаю, коментарі тут будуть зайвими. Все тут просто і зрозуміло (я сподіваюся).

Єдине, що попрошу зробити — це змінити властивості list-style-position значення outside на inside. Що б побачити різницю даний приклад не зовсім підходить. Запропоную таке:

  • Москва
    Токіо

Якщо вставити такий рядок в наш вищестоящий

то можна зрозуміти для чого використовують outside та inside.

Існує можливість встановити відразу всі ці властивості.

li{
list-style: lower-alpha url(cir.jpg) outside;
}

Ось, мабуть, і все що стосується роботи зі списками.

Далі що б я хотів вам розповісти — це властивості керуючі кордонами елемента.

Підкреслюю, що саме кордонами елемента, тому що багато хто розуміє межі — значить тільки у таблиці.

Так от, межі, або рамки, можна задавати не тільки таблиці, але і у тегів, припустимо

і навіть тому ж самому тегу
  • можна поставити рамку, визначити її вид, товщину і колір.

    Ось що може CSS!

    І так розглянемо властивості.

    Border — визначає вид рамки

    Значення:

    none — без рамки

    dotted — рамка з точок

    dashed — пунктирна

    solid — суцільна

    Border-style — визначає стиль рамки

    Значення:

    none — без рамки

    dotted — рамка з точок

    dashed — пунктирна

    solid — суцільна

    border-width — задає ширину рамки

    Значення:

    thin — тонкий

    medium — середня

    thick — широка

    x — числове значення

    border-color — задає колір рамки

    Значення:

    колір

    Існує в CSS можливість задавати стиль для готельних частин рамки (верхньою, нижньою правою і лівою).

    border-top-width — ширина верхньої частини рамки

    border-bottom-width — ширина нижньої частини рамки

    border-left-width — ширина лівій частині рамки

    border-right-width — ширина правій частині рамки

    Значення:

    Ті ж, що і у border-width

    border-top-color — колір верхньої частини рамки

    border-bottom-color — колір нижній частині рамки

    border-left-color — колір лівій частині рамки

    border-right-color — колір правій частині рамки

    Значення:

    колір

    border-top-style — стиль верхній частині рамки

    border-bottom-style — стиль нижній частині рамки

    border-left-style — стиль лівій частині рамки

    border-right-style — стиль правій частині рамки

    Значення:

    Ті ж, що і для border-style

    Як і для всіх списків, можна задавати відразу кілька властивостей для рамки, або для окремої частини рамки.

    Приклади:

    td{
    border: 2px solid #a01616;
    }

    Тобто, ми для всієї рамки поставили товщину, стиль і колір. Порядок проходження властивостей, рекомендую використовувати саме такий!!! (ВАЖЛИВО)

    H3{
    border-top: 1px dotted #1b25ac;
    }
    li{
    border-bottom: thin dashed # fcff06;
    }

    Розглянемо ще дві властивості. Вони прості і зрозумілі.

    width — задає значення ширини елемента

    Значення:

    x — число вказує ширину

    auto — визначається браузером

    x — число вказує ширину %

    height — задає значення висоти для елемента

    Значення:

    x — число вказує висоту

    auto — визначається браузером

    x — число вказує висоту %

    Сподіваюся, принцип зрозумілий.

    Для закріплення матеріалу, пропоную зробити невелику вправу, яку ви можете завантажити тут:

    Архів 8 уроку.

    Він невеликий і нескладний, однак на практиці навчитеся застосовувати вивчені властивості і зрозумієте, де і для чого їх можна застосовувати.

    Там же ви можете завантажити файл з готовим вправою і розібратися, якщо щось не вийшло.

    img.jpg — картинка з вашим завданням

    cir.jpg — картинка, яку ви можете використовувати в якості маркера списку

    index.html — вихідний код вашого завдання (якщо щось не вийде)

    З повагою, Андрій Бернацький.

    Випуск №8. Властивості таблиць стилів (css)