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

311

Продовжимо вивчати властивості таблиць стилів 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)