Рамки і стилі в CSS
У цьому уроці на прикладі блоків буде показано - які стилі можна задати рамкам, адже як правило ви зустрічаєте на сайтах таблиці (і інші елементи) зі звичайними (суцільними) рамками, але у деяких може виникнути необхідність зробити "щось нестандартне".
Під стилем мається на увазі в першу чергу сам тип рамки: суцільна, пунктирна, подвійна і т.д. По мимо цього кожної зі сторін рамки (ліва, права, низ, верх) можна задати окремо колір і товщину. Слід зауважити, що таким параметром, як "рамка" крім блоків і таблиць мають і інші елементи. наприклад - Заголовки () та Пункти (
). Це, до речі, застосовувалося для створення вертикального меню в цьому уроці.І так, давайте, як уже говорилося раніше, на прикладі блоків розглянемо основні типи рамок.
Створіть файл test_border.html в якому ви будете перевіряти роботу стилів для рамок.
Пунктирна рамка - dotted;
Пунктирна рамка блоку з точок
Пунктирна рамка з коротких відрізків - dashed;
Пунктирна рамка блоку з коротких відрізків
Подвійна рамка - double;
Блок з подвійною рамкою
Хмарно рамка - solid;
Хмарно рамка блоку
Лівий край рамки темніше правого - inset;
Рамка блоку, у якого лівий край темніше правого
Правий край рамки темніше лівого - outset;
Рамка блоку, у якого правий край темніше лівого
А тепер, зробимо блок, у якого ліва і верхня сторона рамки будуть мати свій тип, колір і розмір:
У верхнього і лівого краю рамки свій стиль