Выпуск №8. Свойства таблиц стилей (css)

свойства css

Продолжим изучать свойства таблиц стилей css.

В этом выпуске мы познакомимся со стилями, которые позволяют форматировать списки, и рассмотрим стили для задания различного вида границ элементов.

Итак о списках.

Стилей форматирующих списки не так много. Вот они все:

list-style-type — задает вид маркера для списка.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Значения:

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

disc — маркер в виде круга

square — квадрат

decimal — арабские цифры

lower-alpha — строчные латинские буквы

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

lower-roman — строчные римские цифры

upper-roman — прописные римские цифры

Пример:

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

Значения:

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

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

Пример:

list-style-position — определяет позицию маркера относительно списка

Значеня:

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

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

Пимер:

Для примера предложу такой вариант использования списков:

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

Единственное что попрошу проделать — это поменять в свойстве list-style-position значение outside на inside. Что бы увидеть разницу данный пример не совсем подходит. Предложу такое:

Если вставить такую строку в наш вышестоящий <ul> то можно понять для чего используют outside и inside.

Существует возможность задать сразу все эти свойства.

Вот, пожалуй, и все что касается работы со списками.

Далее что бы я хотел вам рассказать — это свойства управляющие границами элемента.

Подчеркиваю, что именно границами элемента, потому что многие понимают границы — значит только у таблиц.

Так вот, границы, или рамки, можно задавать не только у таблиц, но и у тегов, допустим <div> и даже тому же самому тегу <li>можно задать рамку, определить ее вид, толщину и цвет.

Вот что может CSS!

И так рассмотрим свойства.

Border — определяет вид рамки

Значения:

none — без рамки

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

dashed — пунктирная

solid — сплошная

Border-style — определяет стиль рамки

Значения:

none — без рамки

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

Примеры:

То есть, мы для всей рамки задали толщину, стиль и цвет. Порядок следования свойств, рекомендую использовать именно такой!!! (ВАЖНО)

Рассмотрим еще два свойства. Они просты и понятны.

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

Значения:

x — число указывающее ширину

auto — определяется браузером

x — число указывающее ширину в %

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

Значения:

x — число указывающее высоту

auto — определяется браузером

x — число указывающее высоту в %

Надеюсь, принцип понятен.

Для закрепления материала, предлагаю сделать небольшое упражнение, которое вы можете скачать здесь:

Архив 8 урока.

Оно небольшое и несложное, однако вы на практике научитесь применять изученные свойства и поймете, где и для чего их можно применять.

Там же вы можете скачать файл с готовым упражнением и разобраться, если что-то не вышло.

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

cir.jpg — картинка которую вы можете использовать в качестве маркера списка

index.html — исходный код вашего задания (если что-то не получится)

С уважением, Андрей Бернацкий.

киберсант-вебмастер

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (25)