Продовжимо вивчати властивості таблиць стилів 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.
- можна поставити рамку, визначити її вид, товщину і колір.
Ось що може 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 — вихідний код вашого завдання (якщо щось не вийде)
З повагою, Андрій Бернацький.
Існує можливість встановити відразу всі ці властивості.
li{
list-style: lower-alpha url(cir.jpg) outside;
}
Ось, мабуть, і все що стосується роботи зі списками.
Далі що б я хотів вам розповісти — це властивості керуючі кордонами елемента.
Підкреслюю, що саме кордонами елемента, тому що багато хто розуміє межі — значить тільки у таблиці.
Так от, межі, або рамки, можна задавати не тільки таблиці, але і у тегів, припустимо