Продолжим изучать свойства таблиц стилей css.
В этом выпуске мы познакомимся со стилями, которые позволяют форматировать списки, и рассмотрим стили для задания различного вида границ элементов.
Итак о списках.
Стилей форматирующих списки не так много. Вот они все:
list-style-type — задает вид маркера для списка.
Значения:
none — без маркера
disc — маркер в виде круга
square — квадрат
decimal — арабские цифры
lower-alpha — строчные латинские буквы
upper-alpha — прописные латинские буквы
lower-roman — строчные римские цифры
upper-roman — прописные римские цифры
Пример:
|
1 2 3 |
li{ list-style-type: square; } |
list-style-image — задает рисунок, который будет выступить в роли маркера списка.
Значения:
none — без изображения
URL — адрес файла с изображением
Пример:
|
1 2 3 |
li{ list-style-image:url(cir.jpg); } |
list-style-position — определяет позицию маркера относительно списка
Значеня:
outside — маркер находится вне списка
inside — маркер находится внутри списка
Пимер:
|
1 2 3 |
li{ list-style-position: outside; } |
Для примера предложу такой вариант использования списков:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style type="text/css"> h2{ color:#CC0000; } li{ list-style-type: lower-alpha; list-style-image:url(cir.jpg); list-style-position: outside; } <h2>Столицы некоторых государств </h2> <ul> <li>Москва</li> <li>Минск</li> <li>Лондон</li> <li>Париж</li> </ul> </style> |
Думаю, комментарии тут будут лишними. Все здесь просто и понятно (я надеюсь).
Единственное что попрошу проделать — это поменять в свойстве list-style-position значение outside на inside. Что бы увидеть разницу данный пример не совсем подходит. Предложу такое:
|
1 |
<li>Москва <br /> Токио</li> |
Если вставить такую строку в наш вышестоящий <ul> то можно понять для чего используют outside и inside.
Существует возможность задать сразу все эти свойства.
|
1 2 3 |
li{ list-style: lower-alpha url(cir.jpg) outside; } |
Вот, пожалуй, и все что касается работы со списками.
Далее что бы я хотел вам рассказать — это свойства управляющие границами элемента.
Подчеркиваю, что именно границами элемента, потому что многие понимают границы — значит только у таблиц.
Так вот, границы, или рамки, можно задавать не только у таблиц, но и у тегов, допустим <div> и даже тому же самому тегу <li>можно задать рамку, определить ее вид, толщину и цвет.
Вот что может 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
Как и для списков, можно задавать сразу несколько свойств для рамки, либо для отдельной части рамки.
Примеры:
|
1 2 3 |
td{ border: 2px solid #a01616; } |
То есть, мы для всей рамки задали толщину, стиль и цвет. Порядок следования свойств, рекомендую использовать именно такой!!! (ВАЖНО)
|
1 2 3 4 5 6 |
H3{ border-top: 1px dotted #1b25ac; } li{ border-bottom: thin dashed # fcff06; } |
Рассмотрим еще два свойства. Они просты и понятны.
width — задает значение ширины для элемента
Значения:
x — число указывающее ширину
auto — определяется браузером
x — число указывающее ширину в %
height — задает значение высоты для элемента
Значения:
x — число указывающее высоту
auto — определяется браузером
x — число указывающее высоту в %
Надеюсь, принцип понятен.
Для закрепления материала, предлагаю сделать небольшое упражнение, которое вы можете скачать здесь:
Оно небольшое и несложное, однако вы на практике научитесь применять изученные свойства и поймете, где и для чего их можно применять.
Там же вы можете скачать файл с готовым упражнением и разобраться, если что-то не вышло.
img.jpg — картинка с вашим заданием
cir.jpg — картинка которую вы можете использовать в качестве маркера списка
index.html — исходный код вашего задания (если что-то не получится)
С уважением, Андрей Бернацкий.
Комментарии (25)